TreeView parent to child link in view field



  • Hi, i have created a treeview using qml 5.5, but it doesn't show link between elements. If you look at images in google it shows a line from parent to child element. i am running on windows 7 right now.
    I am getting treeview something like that..
    https://www.google.co.in/search?q=treeview&biw=1280&bih=887&source=lnms&tbm=isch&sa=X&ved=0CAYQ_AUoAWoVChMI0p6WiM28yAIVTCSOCh0rHwFb#imgrc=bDFgogbgOU4yPM%3A

    I want something like that.
    url: https://www.google.co.in/search?q=treeview&biw=1280&bih=887&source=lnms&tbm=isch&sa=X&ved=0CAYQ_AUoAWoVChMI0p6WiM28yAIVTCSOCh0rHwFb#imgrc=qa7W0bPCwx4OoM%3A

    you can see there is dotted lines given in second image..



  • By default the TreeView doesn't support what you want. But you can probably use a custom TreeViewStyle to draw your own dotted lines. See here : http://doc.qt.io/qt-5/qml-qtquick-controls-styles-treeviewstyle.html the branchDelegate property.



  • @Citron
    I have tried with branch delegate, but branchDelegate property couldn't draw item, it can only draw branch indicator.
    I have implemented some code but it has some hard coded values for aligning line, here is my code to draw lines.

    TreeViewStyle{id: styleId;
    backgroundColor: "gray"
    indentation: 25
    itemDelegate: checkBoxDelegate;
    branchDelegate: branchDelegateId

    Component {id: branchDelegateId
        Rectangle {id: branchId;
            x: -5; width: 10; height: 10;
            color: "red";
        }
    }
    
    
    Component {
            id: checkBoxDelegate
            Item {
                id: container
                CheckBox{
                    id: checkBox;
                    checkedState: styleData.value;
                    text: myModel.getText(styleData.index);
                    onClicked:
                    {
                        console.log("Checked index", styleData.index)
                        myModel.setDataInModel(checked, styleData.index);
                    }
                }
                Rectangle{id: rectId;
                    x: -35 * styleData.depth + 10 * (styleData.depth - 1);
                    y: -3;
                    width: 2; height: styleData.depth ? 20 : 0;
                    color:"blue";
                }
    
                Rectangle{
                    x: -35 * styleData.depth + 10 * (styleData.depth - 1);
                    y: container.height / 2;
                    height: 2; width : (styleData.depth == 1) ? 20 : 0;
                    color:"blue";
                }
    
                Rectangle{
                    x: -23 * styleData.depth + 10 ;
                    y: -3;
                    width: 2; height: (styleData.depth == 2) ? 22 : 0;
                    color:"blue";
                }
    
                Rectangle{
                    x: -23 * styleData.depth + 10 ;
                    y: container.height / 2;
                    height: 2; width : (styleData.depth == 2) ? 25 : 0;
                    color:"blue";
                }
            }
        }
    

    }
    As you can see here i am using x: -23 * styleData.depth + 10 ; to align line, is there any way by which i can align these rectangles with branchDelegateId.
    If you have some simple solution please write it here.



  • I never used branch delegates, so I can't help you here. Just a quick note : the branch delegate (as far as I understand) is only responsible for drawing the branch part. To draw the actual item, you should use the TreeView's usual delegates : itemDelegate and rowDelegate



  • @Citron
    Thanks for you reply..
    i have done it.

    import QtQuick 2.5
    import QtQuick.Controls 1.4 as QControls
    import QtQuick.Controls.Styles 1.4
    import OrmcoUI.Controls 1.0
    
    TreeViewStyle{id: styleId;
        backgroundColor: "transparent"
        indentation: 20
        itemDelegate: checkBoxDelegate;
        branchDelegate: branchDelegateId
    
        property variant linkDepthArray:[0]
        property int linkWidth: 0
        property int linkHeight: 0
        property color linkColor: "#5F5F5F"
    
    
        Component {id: branchDelegateId
            Item {id: branchItemId; x: -5;
                width: 12; height: 12;
                Rectangle {anchors.fill: parent;
                    color: "transparent";
                    Image{anchors.fill : parent
                        source: styleData.isExpanded ? "qrc:/minus.png" : "qrc:/plus.png"
                    }
                    Component.onCompleted: {
                        linkDepthArray[styleData.depth] = x - width;
                        linkWidth = width;
                        linkHeight = height;
                    }
                }
            }
        }
    
        Component {
            id: checkBoxDelegate
            Item {
                GQITreeViewItem{anchors.fill: parent;
                    branchHeight: linkHeight; branchWidth: linkWidth;
                    treeModel: control.model; depthArray: linkDepthArray;
                    index: styleData.index; widthOffset: indentation
                }
            }
        }
    
    
        //    Component {
        //        id: checkBoxDelegate
        //        Item {
        //            id: container;
        //            property int offset: (height - branchHeight) / 2.0
        //            GQICheckBox{id: checkBox; anchors.verticalCenter : container.verticalCenter
        //                checkedState: styleData.value;
        //                text: control.model.GetText(styleData.index);
        //                onClicked:
        //                {
        //                    console.log("value", styleData.value)
        //                    console.log("Checked index", styleData.index)
        //                    control.model.SetData(checked, styleData.index);
        //                }
    
        //                Component.onCompleted: {
        //                    updateLine(control.model.GetDepth(styleData.index));
        //                    //console.log("Checked height", container.height)
        //                }
        //            }
    
        //            property Item rectItem
        //            function updateLine(depth){
        //                for (var i=0; i<depth; i++){
        //                    var posX = depthArray[i] - (i+1) * indentation
        //                    var drawLine = true;
        //                    if(i > 0 && control.model.IsLastElement(styleData.index, i))
        //                        drawLine = false;
        //                    if(drawLine)
        //                    {
        //                        rectItem = linkComponentId.createObject(container);
        //                        rectItem.x = posX; rectItem.height = (i+1) * container.height;
        //                        if(control.model.IsFirstElement(styleData.index)){
        //                            rectItem.y = -offset; rectItem.height += offset;
        //                        }
        //                        //to restrict height of rectangle
        //                        if(control.model.IsLastElement(styleData.index))
        //                            rectItem.height = (rectItem.height - rectItem.y) / 2.0;
        //                    }
        //                    if(i == 0){
        //                        rectItem = linkComponentId.createObject(container);
        //                        rectItem.x = posX; rectItem.width = container.x - posX - 5;
        //                        rectItem.height = 1; rectItem.y = container.height / 2.0;
        //                        if(control.model.IsParentNode(styleData.index))
        //                            rectItem.width = indentation - (branchWidth / 2.0) + 2;
        //                    }
        //                }
        //            }
    
        //            Component {id: linkComponentId
        //                Item {id: linkRectId;
        //                    width: 1; height: container.height;
        //                    Rectangle{
        //                        anchors.fill: parent;
        //                        color: linkColor;
        //                    }
        //                }
    
        //            }
        //        }
        //    }
    }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.