This is a migrated thread and some comments may be shown as answers.

Grid drag and drop selection behavior and touch devices

1 Answer 279 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Hans
Top achievements
Rank 1
Hans asked on 17 Sep 2013, 11:33 AM
I'm using the Web kendo grid with the options: pageable, scrollable, filterable and sortable all set to true and selectable set to multiple, row (see below)
 I've extended the grid with a checkbox selection column (through some event handling) which all works like a charm and improves the usability for touch devices by allot.

On desktop (mouse input) all works very nice. But on touch devices the instinct of people is to "Swipe to scroll" to browse through the grid. But since selectable is set to multiple, row (which i believes causes this behavior) this is no longer possible. A selection of displayed rows is made during a Swipe causing users to be forced to use the scrollbar (Very bad usability)

Is there a way to keep the multiple row selection option but without drag/swipe selection (through Ctrl/Shift clicks) so "Swipe to scroll" remains possible

grid = new kendo.ui.Grid(
                gridContainer,
                {
                    columns: columns,
                    dataSource: dataSource,
                    selectable: "multiple, row",
                    pageable: true,
                    scrollable: true,
                    filterable: true,
                    sortable: true,
                    change: function () {
                       // some code regarding selection column
                    },
                    dataBound: function() {
                        // some code regarding selection column
                    }
                }
            );

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 19 Sep 2013, 08:52 AM
Hi Hans,

Thank you for contacting us.
This is a known behavior - multiselection's marquee box is displayed when the user drags with a finger on the screen. I am afraid that currently we cannot offer a solution out of the box. The possible workarounds are:
  • turn off the default selection and handle it manually. All you need to do is toggle the "k-state-selected" class of the corresponding row element. On mobile devices it is best to do that on the change of a checkbox. We have a code library that demonstrates how to implement checkbox selection. You can download it from here.

  • alternative solution is to turn off the Grid scrolling and use only paging.

Please accept my apology for the inconvenience caused.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Hans
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or