TreeListチェックボックスのパフォーマンス

Question

私は200以上の行を持つTreeViewを持っています。

チェックボックスをオンにすると、チェックを実行するのに約1秒かかります。

ヘッダチェックボックスをクリックすると、ブラウザがフリーズします。ここ

は私が使用したコードであるとき、ヘッダーチェックボックスの変更：

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

私はいくつかの理由で実行するようにあなたの例を得ることができない（「toggleAllが定義されていません」）パフォーマンスが遅い理由は、.set（）を使用しているためです。

毎回.set（）が呼び出されると、TreeListが変更のdataSourceに完全に再バインドされます。あなたはすなわち、（代わりにMVVMの.SETを使用してのループで「直接」フィールドの値を変更することでこの問題を回避）して、作業が完了したときに、単一の再バインドをトリガすることができます

：

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(); 

例： http://dojo.telerik.com/@Stephen/OmoNu