Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Disable TableView scrolling



  • Hi guys,

    I'm trying to disable scrolling in my TableView by seting flickableItem.interactive: false but it's doesn't work.

    Is there any other possibilities?

    	Flickable
    	{
    		id: flick
    		width: parent.width
    		height: parent.height
    
    		//Table row number + header
    		contentHeight: (table.rowCount + 1) * rowHeight
    		clip: true
    
    		boundsBehavior: Flickable.StopAtBounds
    
    		TableView
    		{
    			id: table
    			height: flick.contentHeight
    			width: parent.width
    			model: tableModel
    			verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff
    			horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
    			frameVisible: false
    
    			flickableItem.interactive: false

  • Moderators

    hi @GoodGuy

    what is

    flickableItem

    supposed to be ?

    the property interactive is part of the Flickable, that you have named flick

    Flickable
    	{
    		id: flick
    		width: parent.width
    		height: parent.height
    
    		//Table row number + header
    		contentHeight: (table.rowCount + 1) * rowHeight
    		clip: true
    
    		boundsBehavior: Flickable.StopAtBounds
                    interactive: false
    
    		TableView
                    .....
    


  • Hi @J-Hilk

    Thanks for answer.

    The flickableItem is a property of ScrollView which TableView inherits from.

    https://doc.qt.io/archives/qt-5.10/qml-qtquick-controls-scrollview.html#flickableItem-prop


  • Moderators

    Ah, @GoodGuy I see,

    Sadly I'm rather unfamiliar with TableView and won't be able to help. :(



  • Hi @GoodGuy

    I am not sure why flickableItem.interactive: false is not working, (may be its an issue/bug with old TableView {}, Just a guess)

    But i found a workaround to disable the scrolling in TableView {}
    Below is sample code:

    import QtQuick 2.9
    import QtQuick.Window 2.0
    import QtQuick.Controls 1.4
    
    Window {
        visible: true
        width: 200
        height: 200
    
        TableView {
            id: styleData
    
            model: 10
    
            anchors.fill: parent
            frameVisible: false
            verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff
            horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
    
           // Please change the below property if you want to enable scroll for some condition
           // An internal property of ScrollView { }
            __wheelAreaScrollSpeed: 0
    
            TableViewColumn {
                title: "Numbers"
                width: 150
            }
        }
    }
    
    

    All the best.



  • Hi @Pradeep-P-N
    Thanks for answer.
    I've try to this also but it doesn't work. I was try using :

    			- flickableItem.interactive: false;
    			- flickableItem.onContentYChanged: flickableItem.contentY = 0;
    			- flickableItem.flickableDirection: Flickable.VerticalFlick
    			- __wheelAreaScrollSpeed: 0;
    

    I prepered the qml example file.

    
    import QtQuick 2.12
    import QtQuick.Controls 1.4
    import QtQuick.Controls.Styles 1.2
    
    ApplicationWindow
    {
    	visible: true
    	width: 640
    	height: 300
    	title: qsTr("Scroll")
    
    	Rectangle
    	{
    		id: popRect;
    
    		width: parent.width;
    		height: parent.height;
    
    		Flickable
    		{
    			id: flick;
    			width: parent.width;
    			height: parent.height;
    
    			//Table row number + header
    			contentHeight: (table.rowCount + 1) * 30;
    			clip: true;
    
    			boundsBehavior: Flickable.StopAtBounds;
    
    			TableView
    			{
    				id: table;
    				height: parent.height
    				width: parent.width;
    
    				//flickableItem.interactive: false;
    				//flickableItem.onContentYChanged: flickableItem.contentY = 0;
    				//flickableItem.flickableDirection: Flickable.VerticalFlick
    				//__wheelAreaScrollSpeed: 0;
    
    				model: ListModel
    				{
    					ListElement
    					{
    						Name: "name1";
    						Unit: "mojo/jojo1";
    						Content: 10;
    					}
    
    					ListElement
    					{
    						Name: "name2";
    						Unit: "mojo/jojo2";
    						Content: 10;
    					}
    					ListElement
    					{
    						Name: "name3";
    						Unit: "mojo/jojo3";
    						Content: 10;
    					}
    					ListElement
    					{
    						Name: "name4";
    						Unit: "mojo/jojo4";
    						Content: 10;
    					}
    					ListElement
    					{
    						Name: "name1";
    						Unit: "mojo/jojo1";
    						Content: 10;
    					}
    					ListElement
    					{
    						Name: "name";
    						Unit: "mojo/jojo1";
    						Content: 10;
    					}
    					ListElement
    					{
    						Name: "name";
    						Unit: "mojo/jojo1";
    						Content: 10;
    					}
    					ListElement
    					{
    						Name: "name";
    						Unit: "mojo/jojo1";
    						Content: 10;
    					}
    					ListElement
    					{
    						Name: "name";
    						Unit: "mojo/jojo1";
    						Content: 10;
    					}
    					ListElement
    					{
    						Name: "name";
    						Unit: "mojo/jojo1";
    						Content: 10;
    					}
    					ListElement
    					{
    						Name: "yoyo1";
    						Unit: "mojo/jojo1";
    						Content: 10;
    					}
    					ListElement
    					{
    						Name: "name";
    						Unit: "mojo/jojo1";
    						Content: 10;
    					}
    					ListElement
    					{
    						Name: "name";
    						Unit: "mojo/jojo1";
    						Content: 10;
    					}
    					ListElement
    					{
    						Name: "name";
    						Unit: "mojo/jojo1";
    						Content: 10;
    					}
    					ListElement
    					{
    						Name: "name";
    						Unit: "mojo/jojo1";
    						Content: 10;
    					}
    				}
    
    				verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff;
    				horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff;
    				frameVisible: false;
    
    				TableViewColumn
    				{
    					id: nameColumn;
    					role: "Name";
    					title: "Name";
    					width: popRect.width * 0.33;
    				}
    
    				TableViewColumn
    				{
    					id: unitColumn;
    					role: "Unit";
    					title: "Unit";
    					width: popRect.width * 0.33;
    				}
    
    				TableViewColumn
    				{
    					id: contentColumn;
    					role: "Content";
    					title: "Content";
    					width: popRect.width * 0.34;
    				}
    
    				style: TableViewStyle
    				{
    					headerDelegate: Rectangle
    					{
    						height: 30;
    						anchors.left: parent.left
    						anchors.right: parent.right
    						Text
    						{
    							id: textItem;
    
    							anchors.fill: parent;
    							anchors.leftMargin: 10;
    							text: styleData.value;
    						}
    					}
    					rowDelegate: Rectangle
    					{
    						width: parent.width;
    						height: 30;
    					}
    
    					itemDelegate: Rectangle
    					{
    						id: delegateRec;
    						Text
    						{
    							id: theCellText;
    							text: model ? styleData.value : "";
    						}
    					}
    				}
    			}
    		}
    	}
    }
    


  • Hi @GoodGuy

    Did you clearly notice the output of both the code (Code from my post & code from your post) ?

    • Can you please tell me why are you using Flickable { } ?
    • Output from your QML code is below. Where entire TableView { } is getting scrolled. This is because of TableView { } is its content Item for the Flickable {}.

    0_1560520649472_5b8ce74b-71c9-4d5c-bfa6-675165986ab7-image.png

    • Below is Output from my code without Flickable { } where only the table contents are scrollable.

    0_1560520895925_c7705aa2-e296-4093-8417-bcf83d4f656d-image.png

    • Adding __wheelAreaScrollSpeed: 0 will disable the TableView Scrolling which was answer for the above question i.e. Disable TableView scrolling
    • From your code you have to add interactive: false for Flickable { } to disable scroll/flick of Flickable { }
    Flickable {
        id: flick;
    
        width: parent.width;
        height: parent.height;
    
        //Table row number + header
        contentHeight: (table.rowCount + 1) * 30;
        clip: true;
        interactive: false
    }
    

    All the best.


Log in to reply