Kendo Grid Header template Deselect all checkbox

2 Answers 30 Views
Grid
Vinod
Top achievements
Rank 1
Vinod asked on 30 Nov 2023, 09:52 PM

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.

2 Answers, 1 is accepted

Sort by
0
Zornitsa
Telerik team
answered on 05 Dec 2023, 03:04 PM

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 wrappersIn 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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
0
Ivan Danchev
Telerik team
answered on 06 Dec 2023, 10:05 AM

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

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.

Tags
Grid
Asked by
Vinod
Top achievements
Rank 1
Answers by
Zornitsa
Telerik team
Ivan Danchev
Telerik team
Share this question
or