QML Multiple selection in Treeview
Unsolved
QML and Qt Quick
-
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 } } } -
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?
-
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]
-
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?
-
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 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.
-
Might be related to QTBUG-47243.
