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

Keeping row selection when changing the page

1 Answer 864 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sven
Top achievements
Rank 1
Sven asked on 05 Jul 2013, 07:25 AM
Hello,

I am using Grids with the pageable option. I would like to keep the selected rows when the page is changed. The standard Grid behavior is, that the selection is not kept. But I already found an approach to store the row selection in the Change event and to restore it in the DataBound event.

global var:
    var selIdsAgentsInService = {};

In change event:
            // store selected rows of AgentsInService grid in selIdsAgentsInService array
            var ids = selIdsAgentsInService[gAgentsInService.dataSource.page()] = [];
            gAgentsInService.select().each(function () {
                dataItem = gAgentsInService.dataItem($(this));
                ids.push($(this).data().uid);
            });

In DataBound event:
        // restore selection
        var selected = $();
        var ids = selIdsAgentsInService[gAgentsInService.dataSource.page()] || [];
        for (var idx = 0, length = ids.length; idx < length; idx++) {
            selected = selected.add(gAgentsInService.table.find("tr[data-uid=" + ids[idx] + "]"));
            gAgentsInService.select(selected);
        }


This is still not exactly doing what I want, and therefore I am looking for a solution to handle the following use cases:

Use case 1 (which is working with my approach):
  1. a grid displays data spread over several pages
  2. rows are selected on page 1
  3. page is changed to another page without selecting any row and back to page 1
  4. the previously selected rows should still be selected
Use case 2:
  1. a grid displays data spread over several pages
  2. rows are selected on page 1
  3. page is changed to another page
  4. a single row is selected without pressing shift or ctrl
  5. page is changed back to page 1
  6. now the previously selected row from page on should be deselected
Use case 3:
  1. a grid displays data spread over several pages
  2. rows are selected on page 1
  3. page is changed to another page
  4. a single row is selected with pressing ctrl (to select an additional row)
  5. page is changed back to page 1
  6. now the previously selected row from page on should still be selected
Anyone having a solution for that? So I would like to support selecting additional rows by pressing ctrl and keeping the selection through all pages. Currently pressing or not pressing ctrl does not make difference in a Change event.

Regards
Sven

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 08 Jul 2013, 01:07 PM
Hi Sven,

The described functionality is unfortunately not supported. The Grid's change event does not provide information whether the user has selected a new row, or used Ctrl / Shift to select additional rows. In order to achieve the desired inter-page-selection behavior, you will need to implement it completely manually by attaching click handlers to the Grid table rows in the widget's dataBound event, adding and removing the k-state-selected CSS class manually, and preserving the saved rows in some array.

Regards,
Dimo
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
Sven
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or