Kendo Grid Header template Deselect all checkbox

[Vinod]

I am building a screen where user can view assignments in the grid. User can select records and those selections will be saved in the database. The checkbox is binded to "IsPreLoad" column/property.  I also need to show how many records are selected in a separate label.

Issue:

User has selected 2 records from the list and saved it in database. When the user goes back to the Assignment listing page both the records will be displayed as selected(checkbox selected) . When user clicks on the header checkbox to select all records that functionality works as expected. But when they try to unselect the header checkbox. I can see the records getting unselected but immediately the  grid shows previous two records as selected.

I think after unselecting all the records from the grid,  the grid is again binding data from grid read action. I am not sure how to resolve this issue.

Any help is appreciated.

[Zornitsa]

Hello Vinod,

Thank you for the provided resource and explanation.

After observing the attached text file, containing your code, I noticed that you seem to be using the Telerik UI for ASP.NET MVC server-side wrappers. In that case, I will be changing the product to UI for ASP.NET MVC, so this thread would be forwarded to the respective support team that can help you with the issue you are experiencing. 

Please expect their reply in the thread shortly.

Regards,
Zornitsa
Progress Telerik

[Ivan Danchev]

Hello Vinod,

The Grid is rebound to the data returned by the GetEmployeeDataListing action, because of the highlighted lines in the checkAll function:

function checkAll(ele) {
    //debugger;
    var state = $(ele).is(':checked');
    var grid = $('#grid').data().kendoGrid;

    grid.dataSource.read();
    grid.refresh();
    var currentPage = $("#grid").data("kendoGrid").dataSource.page();

    checkedIds = {};


    for (var i = 0; i < grid.dataSource.total(); i++) {
        var dataRow = $("#grid").data("kendoGrid").dataSource.data()[i];
        var elementRow = grid.table.find(".chkbx")[i];
        if (elementRow != null) {
            var checked = elementRow.checked,
                row = $(elementRow).closest("tr"),
                dataItem = grid.dataItem(grid.tbody.find("tr").eq(i));
            //alert(checkedIds[dataItem.IsPreload]);
            checkedIds[dataItem.IsPreload] = state;

            if (state) {

                dataItem.set('IsPreload', state);
                //-select the row
                elementRow.checked = true;
                row.addClass("k-state-selected");
                dataRow.IsSelected = true;
                dataRow.IsPreload = true;
            } else {
                //-remove selection
                //debugger;

                dataItem.set('IsPreload', false);

                elementRow.checked = false;
                row.removeClass("k-state-selected");
                dataRow.IsSelected = false;
                dataRow.IsPreload = false;
            }
        }

        grid.dataSource.fetch();

        //mark for paging
        if (dataRow != null) {
            if (state) {
                dataRow.IsSelected = true;
                dataRow.IsPreload = true;
                dataItem.set('IsPreload', true);
            } else {
                dataRow.IsSelected = false;
                dataRow.IsPreload = false;
                dataItem.set('IsPreload', false);
            }
        }

    };

    grid.dataSource.pageSize(20);

}

Each one of the highlighted lines will trigger a separate request to the GetEmployeeDataListing action and will rebind the Grid.

Regards,
Ivan Danchev
Progress Telerik