TreeList Checkbox Performance

Question

I have a TreeView with a 200+ rows.

When i click on the checkbox, it take about 1 sec to perform the check.

When i click on the header checkbox, it freeze the browser.

here is the code i used when the header checkbox change:

function toggleAll(e) {
        setTimeout(function() {
                const view = dataSource.view();
                const checked = e.target.checked;

                //$(`input[data-name=${e.target.dataset.name}]`).prop('checked', checked);
                for (let i = 0; i < view.length; i++) {
                    view[i].set(e.target.dataset.name, checked);
                }
            },
            0);
    }

This is jsfiddle url

Answer 1

I can't get your example to run for some reason("toggleAll is not defined") but the reason the performance is slow is because of the use of .set().

Everytime .set() is called, this cause the TreeList to completely rebind to the changes dataSource.

You can avoid this by changing the field value "directly" in the loop instead of using the MVVM .set() and then trigger a single rebind when you are done, i.e.:

for (let i = 0; i < view.length; i++) {
    // Does not trigger a rebind of TreeList and its dataSource.
    view[i][e.target.dataset.name] = checked;
}
// Now that the dataSource is done being mass updated, trigger a single rebind.
$("#treelist").getKendoTreeList().refresh();

Example: http://dojo.telerik.com/@Stephen/OmoNu