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):
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):
- a grid displays data spread over several pages
- rows are selected on page 1
- page is changed to another page without selecting any row and back to page 1
- the previously selected rows should still be selected
Use case 2:
Regards
Sven
- a grid displays data spread over several pages
- rows are selected on page 1
- page is changed to another page
- a single row is selected without pressing shift or ctrl
- page is changed back to page 1
- now the previously selected row from page on should be deselected
Use case 3:
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.- a grid displays data spread over several pages
- rows are selected on page 1
- page is changed to another page
- a single row is selected with pressing ctrl (to select an additional row)
- page is changed back to page 1
- now the previously selected row from page on should still be selected
Regards
Sven