Disable TableView scrolling

[GoodGuy]

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

[J.Hilk]

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

[GoodGuy]

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

[J.Hilk]

Ah, @GoodGuy I see,

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

[Pradeep P N]

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.

[GoodGuy]

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 : "";
						}
					}
				}
			}
		}
	}
}

[Pradeep P N]

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 {}.

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

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