Grid selectedKeyNames wont return id's across pages

2 posts, 0 answers
  1. Thiru
    Thiru avatar
    1 posts
    Member since:
    Jun 2019

    Posted 05 Aug 2019 Link to this post

    I'm trying to use the Kendo Grid in ASP.NET Core MVC application to do multi-select function, first column of the grid being a checkbox column. 

    My grid has 50 records spread across 5 pages. I have 2 items selected in the first page, 1 item selected in the 2nd page. I use DataBound event to pre-select rows from database. I save the data with a button click (outside the grid) using grid.selectedKeyNames() and post the data to database using a custom Ajax method.

    I get all 3 selected ID's in grid.selectedKeyNames() as long as I navigate to second page after the initial load of the grid. If I don't go to the 2nd page of the grid and try to get selectedKeyNames, it returns only selected items from the first page. I always have to go to all the pages where items are pre-selected once to get the grid working.

    Have anyone experienced this error before. Appreciate any quick workaround/solution to this problem.

    Kendo UI version: v2019.2.619


    //Here is my Razor syntax.



                                    .Columns(columns =>
                                        columns.Bound(p => p.Checked).Width(20).ClientTemplate("<input type='checkbox' #=Checked ? checked='checked' :'' # class='chkbx' />").Hidden();
                                        columns.Bound(p => p.IndustryId).Hidden();
                                        columns.Bound(p => p.IndustryName).Width(100);
                                    .Events(ev => ev
                                    .DataSource(dataSource => dataSource
                                    .Model(model => model.Id(p => p.IndustryId))
                                    .Read(read => read.Action("GetIndustryList", "xxxxxxxxxxxxx").Data("SearchData"))
                                    .NoRecords(x => x.Template("<div class='empty-grid'></div>"))


    //Trying to get the selected key names on a button click


     $('#btnSave').on('click', function () {
            var grid = $('#IndustryGrid').data('kendoGrid');


    // Function to pre-load selected rows from database

      function onDataBound(arg) {
                var grid2 = this;
                var rows = grid2.items();

                $(rows).each(function (e) {
                    var row = this;
                    var dataItem = grid2.dataItem(row);
                    if (dataItem.Checked)

  2. Georgi
    Georgi avatar
    684 posts

    Posted 07 Aug 2019 Link to this post

    Hi Thiru,

    I noticed that you have submitted a ticket with the same query. Since I have already answered your question in the ticket, I will post the answer here as well in case someone else has the same question.


    Internally the grid uses the _selectedIds property to store the ids of the selected items when persist selection is enabled as shown below:

    _selectedIds = {
      5: true,
      10: true

    Please note that the key of the field is the id of the selected item and the value is a boolean which indicates whether the item is selected. The selectedKeyNames method actually gets all the field names of the _selectedIds method and returns them as an array.

    selectedKeyNames: function() {
        var that = this,
            ids = [];
        for (var property in that._selectedIds) {
        return ids;

    Thus, you could populate the _selectedIds object within the dataBound event handler where you preselect items.


      grid._selectedIds[id] = true;

    This way the selectedKeyNames will return all previously saved selected items.

    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