Grid: send selected items from all pages to the controller

[Noah]

Hello,

I have the following grid:          

 

01.@(Html.Kendo()
02.      .Grid<FVM>()
03.      .Name("grid")
04.      .NoRecords("No records to show")
05.      .PersistSelection(true)
06.      .Columns(column =>
07.      {
08.          column.Select().Width(50);
09.          column.Bound(p => p.ID).Title("View").Width(50);/*.Hidden(true)*/;
10.          column.Bound(p => p.Mnemonic).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " })/*.Hidden(true)*/;
11.          column.Bound(p => p.Name).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " })/*.Hidden(true)*/;
12.          column.Bound(p => p.Country).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " })/*.Hidden(true)*/;
13.          column.Bound(p => p.State).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " })/*.Hidden(true)*/;
14.          column.Bound(p => p.City).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " })/*.Hidden(true)*/;
15.          column.Bound(p => p.Region).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " })/*.Hidden(true)*/;
16.          column.Bound(p => p.District).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " })/*.Hidden(true)*/;
17.          column.Bound(p => p.Address).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " }).Hidden(true);
18.          column.Bound(p => p.Latitude).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " }).Hidden(true);
19.          column.Bound(p => p.Longitude).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " }).Hidden(true);
20.      })
21.      .Sortable()
22.      .Filterable()
23.      .Pageable()
24.      .Reorderable(r => r.Columns(true))
25.      .ColumnMenu()
26.      .DataSource(dataSource => dataSource
27.        .Ajax()
28.        .PageSize(10)
29.        .Model(m => m.Id(p => p.ID))
30.        //.ServerOperation(false)
31.        .Read(read => read.Action("FacilityProfile", "Facilities", new { Area = "AccountSettings" }))
32. ))

 

When you press a button, the items that you have selected will be sent to the controller. Also, on filter the selected items persist. My problem is that if you have items from more than one page selected only the items from the current page will be sent to the controller. Is there a way to fix this? Thanks!

 

Here is the button:

1.@(Html.Kendo().Button()
2.      .Name("SaveButton")
3.      .Content("Save")
4.      .Icon("save")
5.      .HtmlAttributes(new { type = "button" })
6.      .Events(e => e.Click("SaveMyFacilities")))

 

And Here is how I'm getting the selected rows:

1.var grid = $("#grid").data("kendoGrid");
2.var selectedRows = grid.select();
3.var list = new Array;
4.selectedRows.each(function (index, row) {
5.    var selectedItems = grid.dataItem(row);
6.    list.push(selectedItems.ID);
7.})

[Noah]

Here is the answer for those wondering:

1.var grid = $("#grid").data("kendoGrid");
2.var selectedRows = grid.selectedKeyNames();
3.stringlist = selectedRows.toString();
4.save = true;

 

selectedKeyNames will retrieve the selected items from all pages. I then convert that to a string for my needs.

I can't find any other instances of this being done this way in MVC. Hope it helps!

[Tsvetomir]

Hi Noah,

Thank you for sharing the solution that has worked out for you.

In general, when the server operations of the Kendo UI Grid are enabled, the select() method has access only to the selected items on the current page. The items on the other pages are not available on the client-side, so there is no way to access them.

On the other hand, there is an internal collection that holds the IDs of all selected items. It could be accessed via the selectedKeyNames() method. More information could be found here:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/selectedkeynames

I hope that you find those clarifications helpful.

 

Best regards,
Tsvetomir
Progress Telerik