Grid selectedKeyNames wont return id's across pages

[Thiru]

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.

 

   @(Html.Kendo().Grid<Web.Models.IndustryModel>

                                ()
                                .Name("IndustryGrid")
                                .Columns(columns =>
                                {
                                    columns.Bound(p => p.Checked).Width(20).ClientTemplate("<input type='checkbox' #=Checked ? checked='checked' :'' # class='chkbx' />").Hidden();
                                    columns.Select().Width(50);
                                    columns.Bound(p => p.IndustryId).Hidden();
                                    columns.Bound(p => p.IndustryName).Width(100);
                                })
                                .AutoBind(false)
                                .Pageable()
                                .PersistSelection()
                                .Sortable()
                                .Events(ev => ev
                                .Change("onChange")
                                .DataBound("onDataBound"))
                                .DataSource(dataSource => dataSource
                                .Ajax()
                                .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');
        alert(grid.selectedKeyNames());
    });

 

// 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)
                    grid2.select(row);
            });
        }

[Georgi]

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) {
        ids.push(property);
    }
    ids.sort();
    return ids;
}

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

e.g.

savedSelectedIds.forEach(function(id){
  grid._selectedIds[id] = true;
})

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

 

Regards,
Georgi
Progress Telerik