Selectable elements - don't trigger when you drag the mouse a little

[John]

I've noticed when I setup a grid that is selectable and I drag a little the row doesn't get selected.

My grid has this defined:

selectable: "row",

When I click a row, and drag a little the row doesn't get selected; the cell does get selected.

[Dimiter Madjarov]

Hello John,

When you click and drag the mouse, the mousedown event is getting fired and the Grid selection is changing on mouse click. You could override this behavior by binding to the mousedown event and perform the selection manually.

In the current scenario the cell is just getting focused and not selected. You could check this with the following script, which is returning an empty array.
E.g.

var grid = $("#Grid").data("kendoGrid");
var selection = grid.select();

 

Kind regards,
Dimiter Madjarov
the Telerik team

[John]

It seems like it's a bug that doing a minor mouse drag causes the row to not be selected.  I would expect that the even is on mousedown, not on mouse up; but it seems like Kendo is using mouse up.

[Dimiter Madjarov]

Hi John,


Another option would be to enable multiple selection, which will cause the Grid to select items after dragging. This is demonstrated in the following Demo. If the current scenario requires just a single row to be selected, you could perform the selection on mouse down.
E.g.

$("#Grid").on("mousedown", "tr", function () {
    var grid = $("#Grid").data("kendoGrid");
    grid.select(this);
});

 

Regards,
Dimiter Madjarov
the Telerik team

[John]

By doing that, I move away from Kendo's "selectable" configuration.

[Dimiter Madjarov]

Hello John,


If the approaches from my previous post does not fit your needs, you could post your suggestion to the Kendo User Voice portal. If it gets popular among the community, we will consider to implement it in the future releases of Kendo UI.

Wish you a great day!

 

Kind regards,
Dimiter Madjarov
the Telerik team

[HTC]

Hi Dimiter,
I think it should be an issue, this issue was not exist in older kendo UI version.
Please see my sample code in JSFiddle,

Using kendo v2012.1.515: http://jsfiddle.net/QBESY/67/ (issue doesn't exist)
Using kendo v2013.2.918: http://jsfiddle.net/QBESY/66/ (issue exists)

Could you please treat it as an issue? Otherwise, all of our projects using kendo grid need to apply this alternative solution.
Thanks

[Dimiter Madjarov]

Hello guys,


Now you could set an option to specify the tolerance in pixels, which will be acceptable, when there is a mouse drag, when selecting the row. By default it is set to zero. It should be set after the widget is initialized.
E.g.

function dataBound(e) {
    this.selectable.userEvents.threshold = 10;
}

I wish you all a great day!

Regards,
Dimiter Madjarov
Telerik

[HTC]

Hi Dimiter,
yes, that's what we needed.
The threshold configuration is work very well now.
Many thanks for your quick feedback.

[AO]

Hi Dimitri, 

Is there a way we can implement this generically? 

[Dimiter Madjarov]

Hi Allamagan,


At the moment there is no generic way for setting the threshold property and it is not part of the widget configuration. There is a separate Selectable object instance for each Grid on the page and the property should be set individually, since by default it is set to 0.

Regards,
Dimiter Madjarov
Telerik