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

Grid: send selected items from all pages to the controller

2 Answers 101 Views
This is a migrated thread and some comments may be shown as answers.
Noah
Top achievements
Rank 1
Noah asked on 07 Nov 2019, 11:50 AM

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.})

2 Answers, 1 is accepted

Sort by
0
Noah
Top achievements
Rank 1
answered on 07 Nov 2019, 12:38 PM

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!

0
Tsvetomir
Telerik team
answered on 11 Nov 2019, 08:11 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Noah
Top achievements
Rank 1
Answers by
Noah
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or