Grid: send selected items from all pages to the controller

3 posts, 0 answers
  1. Noah
    Noah avatar
    3 posts
    Member since:
    May 2019

    Posted 07 Nov 2019 Link to this post

    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. Noah
    Noah avatar
    3 posts
    Member since:
    May 2019

    Posted 07 Nov 2019 in reply to Noah Link to this post

    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!

  3. Tsvetomir
    Admin
    Tsvetomir avatar
    757 posts

    Posted 11 Nov 2019 Link to this post

    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.
Back to Top