QML Multiple selection in Treeview

aarruunn_23 · wrote on 20 Mar 2018, 07:22

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:650jobs_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
                }
            }
        }

SGaist · 20 Mar 2018, 14:05

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.

aarruunn_23 · S SGaist 20 Mar 2018, 09:14

@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?

aarruunn_23 · S SGaist 20 Mar 2018, 09:14

@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]

SGaist · 21 Mar 2018, 05:56

What is RTLImport ?

aarruunn_23 · S SGaist 20 Mar 2018, 21:49

@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?

SGaist · 23 Mar 2018, 13:57

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 ?

aarruunn_23 · S SGaist 23 Mar 2018, 07:17

@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.

aarruunn_23 · S SGaist 23 Mar 2018, 07:17

@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.

SGaist · wrote on 23 Mar 2018, 21:19

Might be related to QTBUG-47243.