View Full Version : Implementing a selection

25th January 2011, 21:52

i have some rectangles organized in rows and columns in a Qml Grid.
But I dont have an idea how to realize a selection (including multi selection) like in QTableView.

Can anyone give me an hint about how to implement such an issue?

I am using Qml together with c++.
Qt 4.7.1


26th January 2011, 07:37
As far as i know, pure qml doesn't support multiselection in data views. you have to write your own qml extension in c++ with this functionality

26th January 2011, 10:39
Ok I think I have to explain a little bit more.

I am not using a GridView in Qml. I would like to use a normal Grid due to the fact that I have a fixed number of rows and columns.

I know that I need to implement the selection on my own, but thats the problem. I have no idea how to implement it.

Does someone know an open source project where such a selection is implemented so that I can have a look at it?

27th January 2011, 19:35
Actually I am testing some possible implementations.

import Qt 4.7

Rectangle {
id: main
width: 1100
height: 900

MouseArea {
id: area
anchors.fill: parent
hoverEnabled: true
onPressed: {
hoverEnabled = true;
console.debug("x: " + mouse.x + "y: " + mouse.y);
test.x = mouse.x;
test.y = mouse.y;
test.width = 1;
test.height = 1;
test.visible = true;
onReleased: {
test.visible = false;
hoverEnabled = false;
console.debug("x: " + mouse.x + "y: " + mouse.y)

onMousePositionChanged: {
test.width = mouse.x - test.x;
test.height = mouse.y - test.y;

Rectangle {
id: test
color: "blue"
opacity: 0.5
visible: false

When I press and move the mouse, a rectangle should be shown in this area. If I move the mouse to the right bottom, the rectangle is displayed correctly. But if I move the mouse to the left top it works not correctly.

test.width = mouse.x - test.x;
test.height = mouse.y - test.y;

This code calculates negative values in this case. It looks like negative values could not be assigned to test.widht and test.heigth.
But if I do the following:

Rectangle {
x: 50; y: 50;
width: -10; height: -10
color: "red"

It works with negative values.
Has anyone an idea?