Kendo grid's dataBound event gets fired on each page change & sort

Question

i am using MVC kendo grid and I am trying to add select all/deselect check box to the header. I have javascript which does the logic of selecting & deselecting all the individual check boxes. I also want to select/deselect the header check box based on check boxes in the rows. Since during grid initialization grid rows are unknown, we cannot attach click event to the individual check boxes in the rows. we have to do that after data is bound to the grid. I also wanted to maintain the state of the check boxes when user navigate through pages or do sorting. ( because of this paging & sorting is done on client side. Server operation is set to false) The javascript is working correctly. I’m calling this javascript in dataBound event of the grid as suggested here by telerik support. However dataBound event is getting fired on each page change and sort. As per the documentation here it should get fired when widget is bound to dataSource. So I tried dataSource’s requestEnd event, but requestEnd event is also getting fired on each page change & sort. AGAIN, as per the documentation here it should only get fire when remote service request is finished.

So which event should I use to call the javascript so that javascript only gets executed only once or is there anyother way to do it.

$(function () {
    $gridElement = $("#grid");
    var kendoGrid = $gridElement.data("kendoGrid");
    var dataSource = kendoGrid.dataSource;

    kendoGrid.bind("dataBound", function (e) {          
          configureSelectCheckBoxes($gridElement)
     }
  })

   $("#btnSearch").click(function () {
        kendoGrid.dataSource.read();
        kendoGrid.refresh();
        kendoGrid.dataSource.page(1);
    })


    function configureSelectCheckBoxes(grid) {
        // attach click event to select all check box
        grid.find("thead input:checkbox").click(
            function () {
                grid.find("td input:checkbox").prop("checked", $(this).prop("checked"));
        });

        // attach click event to individual check box
         grid.find("tbody input:checkbox").click(function () {
                  var checkedCount = grid.find("td input:checkbox:checked").length;
                  var totalCount = grid.find("td input:checkbox").length;
                  grid.find("th input:checkbox").prop("checked", checkedCount === totalCount);
           }
    );
}

})

 @(Html.Kendo().Grid<MVCPOC.Models.MyModel>()
        .Name("grid")
        .Columns(col =>
        {
            col.Bound(p => p.ModelID)
                .ClientTemplate("<input class='chkbox' type='checkbox' value='#=ModelID#' />")
                .HeaderTemplate("<input type='checkbox' id='selectAll' />")
                .Width(30)
                .Sortable(false)
                .Filterable(false);                
            col.Bound(p => p.StateProvinceCode);                
            col.Bound(p => p.EmailAddress);
        })
        .AutoBind(false)
        .Pageable()
        .Sortable()
        .Scrollable(x => x.Height(300))
        .HtmlAttributes(new { style = "height:500px" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .PageSize(20)
            .Read(read => read
                .Action("GetData", "Grid")))

    )

It should actually work. have you tried specified the event in the widget code? .Event(e=>e.OnDataBound("configureSelectCheckBoxes")) — Vanice
@Vanice I haven't tried that, i keep any javascript separated from cshtml view. so i'm attaching the databound event in .js file after widget initialization. — LP13
You may consider it for readability. I like seeing all events when I look at the widget code. The actual code can be in a .js file itself. Can you provide a fiddle or demo project? — Vanice

Harshad Vekariya Harshad Vekariya · Accepted Answer · 2016-03-31T13:06:28

What i understand from your problem is that, you need to stop data bound event on sort. If i understand it correct then following trick will be useful for you.

You just need to check sort() of data source like below (Its JS Solution to show Trick only):

dataBound: function (e) {
    if (e.sender.dataSource.sort() == undefined) {
           // It indicates that grid is loaded first time, no sort trigger is fired.
    }
}

Note: if you have set default column for sort then you need to add condition accordingly to check sort of that column, as there condition may not be true.

Kendo grid's dataBound event gets fired on each page change & sort

1 Answers