Select All is taking too much time

[Ira]

Hello All,

I have a gird with several columns, whose data source is a json(RepProjectData) with more than 500 records. with 7 checkboxes in each row.

I need to implement select all feature. In this when a user checks the checkbox on header then all the below checkboxes(in same column) must get selected.

 headerTemplate: "<span class='title-vertical'><input type='checkbox' class='chkheaderBC'> Business Case</span>",

 template: function (e) {
                if (e.RepBusinessCase == true) {
                    return dirtyField(e, 'RepBusinessCase') + '<input type="checkbox" checked class="chkbxBusinessCase1" />';
                }
                else {
                    return dirtyField(e, 'RepBusinessCase') + '<input type="checkbox" class="chkbxBusinessCase1" />';
                }
            }

 

For this, I have written below code on data bound

   $('.chkheaderBC').change(function (e) {

                   checkAll(e, "RepBusinessCase")

  });

chekAll function-

 function checkAll(e, FieldName) {
        displayLoading();
        var checked = e.target.checked;
        var currentGrid = $("#gridGenerateDocument").data("kendoGrid");
        var data = currentGrid.dataSource.view();
        var rowCnt = RepProjectData.length;   
            for (var i = 0; i < data.length; i++) {
                data[i].set(FieldName, checked);
            }
    }

This code is working and solve the purpose when there are <100 records. But when there are >200 records then it is taking longer than expected. Is there any other way to perform this action with minimum time?

Thanks in Advance :)

 

[Nikolay]

Hello Ira,

Using the set() method refreshes the Grid and since you are calling it multiple times for all Grid data items this slows down the performance.

I would recommend avoiding the set() and instead, update the property and call the refresh() method only once after all properties have been updated. For example:

 function checkAll(e, FieldName) {
        displayLoading();
        var checked = e.target.checked;
        var currentGrid = $("#gridGenerateDocument").data("kendoGrid");
        var data = currentGrid.dataSource.view();
        var rowCnt = RepProjectData.length;   
            for (var i = 0; i < data.length; i++) {
               data[i].FieldName = checked;
            }
        currentGrid.refresh();
    }

Please try this and let me know if it helps with the performance situation.

Regards,
Nikolay
Progress Telerik