Как заполнить сетку на основе узла treeview (флажок-выбор)?

Question

Я делаю проект с использованием элементов управления Kendo UI. В левой части проекта расположены «древовидная» и правая части «кендогрид».

Здесь мое требование состоит в том, чтобы отфильтровать сетку на основе узлов дерева, и вам нужно сделать многоэкранный выбор.

Например: напр .: 10249,10248 На основании этого узла фильтруют сетку.

Вот моя скрипка: http://jsfiddle.net/RHh67/7/

Здесь испытывается код:

var tree= $("#treeview").kendoTreeView({ 
    checkboxes: { 
     checkChildren: true 
    }, 

    dataSource: [{ 
     id: 1, text: "My Project", expanded: true, spriteCssClass: "rootfolder", items: [ 
      { 
       id: 2, text: "OrderID", expanded: true, spriteCssClass: "folder", items: [ 
       { id: 3, text: "10248" }, 
       { id: 4, text: "10249" }, 
       { id: 5, text: "10250" }, 
       { id: 6, text: "10251" }, 
       { id: 7, text: "10252" } 
      ] 
     }] 
    }] 
}).data("kendoTreeView"); 

tree.dataSource.bind("change", function (e) { 
    var ds = $("#grid").data("kendoGrid").dataSource; 
    ds.filter([ 
     {"logic":"or", 
      "filters":[ 
       { 
        "field":"OrderId", 
        "operator":"eq", 
       } 
      ]} 
    ]); 
}); 

Может ли один помочь мне найти, где именно я не прав?

Answer 1

Обработчик change на tree должны сделать:

1. выбран флажков.
2. Создайте условие фильтра для отмеченных флажков.
3. Применить фильтр к источнику данных.

Что-то вроде:

$("#treeview").on("change", function (e) { 
    var selected = $('#treeview :checked').closest('li'); 
    var ds = grid.dataSource; 
    var filter = { 
     logic : "or", 
     filters: [] 
    }; 
    $.each(selected, function (idx, elem) { 
     var item = tree.dataItem(elem); 
     if (parseInt(item.text)) { 
      console.log("item.text", item.text); 
      filter.filters.push({ 
       field : "OrderID", 
       operator: "eq", 
       value : parseInt(item.text) 
      }); 
     } 
    }); 
    console.log("filter", filter); 
    ds.filter(filter); 
}); 

Запуск here