QML Multiple selection in Treeview



  • I have a treeview in qml using itemselectionmodel for allowing multiple selection. It is working fine in gnome and unity but not in xfce and mate versions of ubuntu. Please point me what is going wrong?

    My code snippet:

    TreeView {
    id:jobs_treeview_import
    anchors.top:jobs_rect_top.top
    anchors.left: jobs_img_importbg.left
    anchors.leftMargin: 12jobs_popup_import.width_ratio
    anchors.bottom: jobs_rect_bottom.top
    model: jobs_ctrller_import.myModel
    width:650
    jobs_popup_import.width_ratio
    Component.onCompleted: {
    expand(jobs_ctrller_import.getRootItem());

            }
            selectionMode: SelectionMode.MultiSelection
            selection: ItemSelectionModel{
                id:import_itemodel_sel
                model:jobs_ctrller_import.myModel
    
                onSelectionChanged:  {
                    console.log("On selection changed")
                    if(jobs_ctrller_import.updateButtonState(jobs_treeview_import.currentIndex))
                    {
                        console.log("Selection changed enable buttons")
                        jobs_btndef_del.enabled=true;
                        jobs_btndef_del.opacity=1
                        jobs_btndef_import.enabled=true;
                        jobs_btndef_import.opacity=1
                    }
                    else
                    {
                        console.log("Selection changed disable buttons")
                        jobs_btndef_del.enabled=false;
                        jobs_btndef_del.opacity=0.3
                        jobs_btndef_import.enabled=false;
                        jobs_btndef_import.opacity=0.3
                    }
                }
            }

  • Lifetime Qt Champion

    Hi and welcome to devnet,

    Can you give the exact versions you are using of:

    • Qt
    • Ubuntu
    • XFCE
    • Mate

    On a side note, your code snippet is missing the import statements.



  • @SGaist I have ubuntu 16.04
    MATE version is1.16.2
    QT- 5.8.0 (GCC 5.3.1 20160406 (Red Hat 5.3.1-6), 64 bit)

    I have a very peculiar problem. When i do multiselection in treeview it works fine in laptop in ubuntu 16.04. But the moment i run the same application in a linux touch monitor the multiselection breaks. What could be the reason?



  • @SGaist

    Adding my complete qml file:

    import QtQuick 2.5
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Controls 1.4
    import QtQuick.Layouts 1.1
    import QtQuick.Controls 2.0
    import QtQml.Models 2.2
    import RTLImport 1.0
    
    Popup{
        id:jobs_popup_import
        property real height_ratio: jobs_popup_import.height/630
        property real width_ratio: jobs_popup_import.width/680
       property var index_value;
        modal: true
        focus: true
        dim: false
        closePolicy: Popup.NoAutoClose
        padding :50
        signal importjob_close();
    
        FontLoader {
            id: jobs_font_roboto
            source:"Fonts/Roboto/Roboto-Regular.ttf"
        }
    
        background: Rectangle{
            anchors.fill: parent
            color:"transparent"
        }
    
        contentItem: Image {
            id:jobs_img_importbg
            source:"Import_Assets/popup.svg"
            width: 680*jobs_popup_import.width_ratio
            height:630*jobs_popup_import.height_ratio
            anchors.fill: parent
    
            Text{
                text :"Import RTL Files"
                font.pixelSize: 20*jobs_popup_import.width_ratio
                anchors.top:jobs_img_importbg.top
                anchors.topMargin: 20*jobs_popup_import.height_ratio
                anchors.left: jobs_img_importbg.left
                anchors.leftMargin: 20*jobs_popup_import.width_ratio
            }
            Image{
                id:popup_btnimg_close
                source:"Import_Assets/close_btn.svg"
                width: 80*jobs_popup_import.width_ratio
                height:80*jobs_popup_import.height_ratio
                anchors.top:jobs_img_importbg.top
                anchors.topMargin: -10*jobs_popup_import.height_ratio
                anchors.right: jobs_img_importbg.right
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        close();
                        jobs_treeview_import.refreshtree();
                    }
                }
            }
    
            Rectangle {
                id:jobs_rect_top
                anchors.left: jobs_img_importbg.left
                anchors.leftMargin: 5*jobs_popup_import.width_ratio
                anchors.top: jobs_img_importbg.top
                anchors.topMargin: 48*jobs_popup_import.height_ratio
                width:657*jobs_popup_import.width_ratio
                height:1*jobs_popup_import.height_ratio
                color:"#979797"
            }
    
            Rectangle {
                id:jobs_rect_bottom
                anchors.left: jobs_img_importbg.left
                anchors.leftMargin: 5*jobs_popup_import.width_ratio
                anchors.bottom: jobs_img_importbg.bottom
                anchors.bottomMargin: 105*jobs_popup_import.height_ratio
                width:657*jobs_popup_import.width_ratio
                height:1*jobs_popup_import.height_ratio
                color:"#979797"
            }
    
            ButtonDefault {
                id:jobs_btndef_del
                anchors.left: jobs_img_importbg.left
                anchors.leftMargin: 30*jobs_popup_import.width_ratio
                anchors.bottom:jobs_img_importbg.bottom
                anchors.bottomMargin: 40*jobs_popup_import.height_ratio
                button_width:180*jobs_popup_import.width_ratio
                button_height:52*jobs_popup_import.height_ratio
                button_radius:8*jobs_popup_import.width_ratio
                border_color: "black"
                button_color:"#FFFFFF"
                text_Value: "DELETE"
                text_color:"black"
                pixel_size:20*jobs_popup_import.width_ratio
                font_family: jobs_font_roboto.name
                text_width:100*jobs_popup_import.width_ratio
                text_height:24*jobs_popup_import.height_ratio
                hoverEnabled: true
                button_hovered_color:"#00AEEF"
                text_hovered_color:"white"
                onClicked: {
                    jobs_ctrller_import.deleteRTLFile(jobs_treeview_import.selection.currentIndex)
                    close();
                    jobs_treeview_import.refreshtree();
                }
            }
    
    
    
            ButtonDefault {
                id:jobs_btndef_cancel
                button_width:180*jobs_popup_import.width_ratio
                button_height:52*jobs_popup_import.height_ratio
                button_radius:8*jobs_popup_import.width_ratio
                border_color: "black"
                button_color:"#FFFFFF"
                anchors.left: jobs_img_importbg.left
                anchors.leftMargin: 261*jobs_popup_import.width_ratio
                anchors.bottom:jobs_img_importbg.bottom
                anchors.bottomMargin: 40*jobs_popup_import.height_ratio
                text_Value: "CANCEL"
                text_color:"black"
                pixel_size:20*jobs_popup_import.width_ratio
                font_family: jobs_font_roboto.name
                text_width:100*jobs_popup_import.width_ratio
                text_height:24*jobs_popup_import.height_ratio
                hoverEnabled: true
                button_hovered_color:"#00AEEF"
                text_hovered_color:"white"
                onClicked: {
                    close();
                    jobs_treeview_import.refreshtree();
                }
            }
    
            ButtonDefault {
                id:jobs_btndef_import
                button_width:180*jobs_popup_import.width_ratio
                button_height:52*jobs_popup_import.height_ratio
                button_radius:8*jobs_popup_import.width_ratio
                border_color: "black"
                button_color:"#FFFFFF"
                opacity: 100
                anchors.left: jobs_img_importbg.left
                anchors.leftMargin: 453*jobs_popup_import.width_ratio
                anchors.bottom:jobs_img_importbg.bottom
                anchors.bottomMargin: 40*jobs_popup_import.height_ratio
                text_Value:"IMPORT"
                text_color:"black"
                pixel_size:20*jobs_popup_import.width_ratio
                font_family: jobs_font_roboto.name
                text_width:100*jobs_popup_import.width_ratio
                text_height:24*jobs_popup_import.height_ratio
                hoverEnabled: true
                button_hovered_color:"#00AEEF"
                text_hovered_color:"white"
                onClicked: {
                    jobs_ctrller_import.importRTLFile(jobs_treeview_import.selection.currentIndex)
                    close();
                    jobs_treeview_import.refreshtree();
                }
            }
    
            RTLImportController {
                id: jobs_ctrller_import
            }
            TreeView {
                id:jobs_treeview_import
                anchors.top:jobs_rect_top.top
                anchors.left: jobs_img_importbg.left
                anchors.leftMargin: 12*jobs_popup_import.width_ratio
                anchors.bottom: jobs_rect_bottom.top
                model: jobs_ctrller_import.myModel
                width:650*jobs_popup_import.width_ratio
                Component.onCompleted:  {
                    expand(jobs_ctrller_import.getRootItem());
    
                }
                selectionMode: SelectionMode.MultiSelection
                selection: ItemSelectionModel{
                    id:import_itemodel_sel
                    model:jobs_ctrller_import.myModel
      //commenting below lines since currentindex variable is not detected in mate and xfce window managers of linux (only single selection is allowed as of now)
                    onSelectionChanged:  {
                        console.log("On selection changed")
                        if(jobs_ctrller_import.updateButtonState(jobs_treeview_import.currentIndex))
                        {
                            console.log("Selection changed enable buttons")
                            jobs_btndef_del.enabled=true;
                            jobs_btndef_del.opacity=1
                            jobs_btndef_import.enabled=true;
                            jobs_btndef_import.opacity=1
                        }
                        else
                        {
                            console.log("Selection changed disable buttons")
                            jobs_btndef_del.enabled=false;
                            jobs_btndef_del.opacity=0.3
                            jobs_btndef_import.enabled=false;
                            jobs_btndef_import.opacity=0.3
                        }
                    }
                }
                section.labelPositioning:ViewSection.NextLabelAtEnd
    
    
                itemDelegate: Rectangle {
                    color: styleData.selected ? "#00AEEF" :( ( styleData.row % 2 == 0 ) ? "#f7f7f7" : "#e9e9ea" )
                    height: 20*jobs_popup_import.height_ratio
    
                    CheckboxGenericwhite{
                        id:mediadb_chkboxgw_defaultmedia
                        width_ratio:jobs_popup_import.width_ratio
                        height_ratio:jobs_popup_import.height_ratio
                        check_color_checked:"#00AEEF"
                        check_color_unchecked:"gray"
                        check_border_color:"transparent"
                        checkable: true
                        checked:false
                        anchors{
                            top:parent.top
                            left:parent.left
                            topMargin: 0*jobs_popup_import.height_ratio
                            //leftMargin: 1067*jobs_popup_import.width_ratio
                        }
                    }
    
                    Image{
                        id:jobs_img_icn
                        anchors.top: parent.top
                        anchors.topMargin: 10*jobs_popup_import.height_ratio
                        anchors.left: parent.left
                        anchors.leftMargin: 60 * jobs_popup_import.width_ratio
                        source: if(styleData.value !== " ")
                            jobs_ctrller_import.getImagePath(styleData.value)
                        else
                                    jobs_img_icn.enabled= false
                    }
                    Text {
                        id:jobs_text_name
                        anchors.left:jobs_img_icn.right
                        anchors.leftMargin: 10*jobs_popup_import.width_ratio
                        anchors.verticalCenter: parent.verticalCenter
                        font.pixelSize: 18*jobs_popup_import.width_ratio
                        text: styleData.value === undefined ? "" : styleData.value 
                    }
                }
    
    
                rowDelegate: Rectangle{
                    height:38*jobs_popup_import.height_ratio
                    color: styleData.selected ? "#00AEEF" :( ( styleData.row % 2 == 0 ) ? "#f7f7f7" : "#e9e9ea" )
    
                }
    
                style:TreeViewStyle{
                    indentation:50*jobs_popup_import.width_ratio
                    handle: Rectangle{
                        implicitWidth: 16*jobs_popup_import.width_ratio
                        implicitHeight: 16*jobs_popup_import.height_ratio
                        color:"transparent"
                        Rectangle {
                            color: "black"
                            radius:8*jobs_popup_import.width_ratio
                            anchors.fill: parent
                            anchors.topMargin: 2*jobs_popup_import.height_ratio
                            anchors.leftMargin: 2*jobs_popup_import.width_ratio
                            anchors.rightMargin: 2*jobs_popup_import.width_ratio
                            anchors.bottomMargin: 2*jobs_popup_import.height_ratio
                        }
                    }
                }
                onClicked: {
                    import_itemodel_sel.clearCurrentIndex();
                   // import_itemodel_sel.setCurrentIndex(index, 0x0002 | 0x0010)
                    if(jobs_ctrller_import.isRTL(index))
                    {
                        jobs_btndef_del.enabled=true;
                        jobs_btndef_del.opacity=1
                        jobs_btndef_import.enabled=true;
                        jobs_btndef_import.opacity=1
                    }
                    else
                    {
                        jobs_btndef_del.enabled=false;
                        jobs_btndef_del.opacity=0.3
                        jobs_btndef_import.enabled=false;
                        jobs_btndef_import.opacity=0.3
                    }
                }
    
    
                onExpanded: {
    
                    jobs_ctrller_import.fillData(index)
                    expand(index);
    
                }
                onCollapsed: {
    
                    collapse(index)
                    jobs_ctrller_import.clearAllData(index)
    
                }
                onDoubleClicked: {
                    import_itemodel_sel.clearCurrentIndex();
                    import_itemodel_sel.setCurrentIndex(index, 0x0002 | 0x0010)
    
                    if(!jobs_ctrller_import.isRTL(index))
                    {
                    if(isExpanded(index))
                    {
                        collapse(index)
                        jobs_ctrller_import.clearAllData(index)
                    }
                    else
                    {
                        jobs_ctrller_import.clearAllData(index)
                        expand(index);
                    }
                    }
                }
    
                function refreshtree()
                {
                    var n = jobs_ctrller_import.getNumberofDrives()
                    for(var i=0;i<n;i++)
                    {
                        var v  =  jobs_ctrller_import.getDirectories(i);
                        if(isExpanded(v))
                        {
                            collapse(v)
                            jobs_ctrller_import.clearAllData(v)
                        }
                    }
                }
    
                TableViewColumn {
                    role: "name_role"
                    width: 1500*jobs_popup_import.width_ratio
                }
    
            }
    
        }
            onOpened: {
                jobs_treeview_import.refreshtree()
                import_itemodel_sel.clearCurrentIndex()
                jobs_btndef_del.enabled=false;
                jobs_btndef_del.opacity=0.3
                jobs_btndef_import.enabled=false;
                jobs_btndef_import.opacity=0.3
            }
    }
    

    [edit: added missing coding tags SGaist]


  • Lifetime Qt Champion

    What is RTLImport ?



  • @SGaist RTLImport is a C++ controller class which will provide me data. This treeview is used to display all RTL files inside our application data folder. The problem we are facing is, when we use multiselection in treeview in a touch friendly ubuntu 16.04 desktop monitors it breaks. But it is fine in laptop. I think we are missing some dependecy on these touch friendly monitors. Not able to figure out what?


  • Lifetime Qt Champion

    Do you have the same behaviour if you are using one of the minimal example from the QtQuick Model View introduction chapter of Qt's documentation ?



  • @SGaist Nope. Only when you use treeview where you set selectionmode as multiselection it does not work in touch monitors, though it is fine in non touch monitors.



  • @SGaist One more question. What is row delegate exactly in treeview. I am not able to find a propert answer anywhere. The problem is right now i have a workaround for multiselection. Whenever user clicks on itemdelegate i am changing the backgrounf color but I am not able to change the color of rowdelegate since itemdelegate and rowdelegate or 2 different components.


  • Lifetime Qt Champion

    Might be related to QTBUG-47243.


Log in to reply
 

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