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.

     

       @(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);
                });
            }

  2. Georgi
    Admin
    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) {
            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
    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