在行篩選器中使用Multiselect，kendo ui網格

Question

下面是一個集成多選與kendo ui篩選器行的示例。 http://dojo.telerik.com/eriMA

<div id="grid"></div>   
<script> 
      $("#grid").kendoGrid({ 
      autoBind:true, 
       columns: [ 
       { 
        field: "color", 
        filterable: { 
         cell: { 
          template: function (args) { 
           // create a MultiselectList of unique values (colors) 
           args.element.kendoMultiSelect({ 
            dataSource: args.dataSource, 
            dataTextField: "color", 
            dataValueField: "color", 
            valuePrimitive: true, 
           // tagMode: true 
           });        
          }, 
          showOperators: false 
         } 
        } 
       }, 
       { field: "age" } ], 
      filterable: { mode: "row" }, 
      dataSource: { data: [ { color: "#ff0000", age: 30 }, { color: "#000000", age: 33 }], requestStart: onRequestStart }}); 

     function onRequestStart(e){ 
     var filter = e.sender.filter(); 
      if (filter && filter.filters && filter.filters.length > 0) { 
       var filter1 = filter.filters; 
       for (var i = 0; i < filter1.length; i++) { 
        if (filter1[i].field == "color" && filter1[i].value) { 
         var colorList = filter1[i].value.split(","); 
         if (colorList.length > 0) { 
          var newFilter = { logic: "or", filters: [] }; 
          for (var k = 0; k < colorList.length; k++) { 
           newFilter.filters.push({ field: "color", operator: "eq", value: colorList[k] }); 
          } 
          filter1 = filter1.splice(i, 1, newFilter); 
          e.preventDefault(); 
          e.sender.filter(filter); 
         } 
        } 
       } 
      } 
     } 
    </script> 

現在，我想設置網格默認過濾器。爲此，我創建了另一個樣本。 http://dojo.telerik.com/eriMA/2 但不幸的是，如果網格dataSource數據最初是空的，那麼multiselect值將被重置爲第一個值。但是，數據正確過濾。有人可以幫助克服這個限制。

Answer 1

我已經確定，在dataBound事件之後，如果dataSource是emtpy，過濾器單元會以某種方式被清除。所以我使用超時設置值。 這裏是更新源代碼的鏈接。 http://dojo.telerik.com/eriMA/7

<div id="grid"></div> 
<script> 
    var colorMulti = null; 
    var grid = $("#grid").kendoGrid({ 
     autoBind:false, 
      columns: [ 
      { 
       field: "ShipCity", 
       filterable: { 
        cell: { 
         template: function (args) { 
          // create a MultiselectList of unique values (colors) 
          colorMulti =args.element.kendoMultiSelect({ 
           dataSource: {data : ["Lyon","Graz","Bern"]}, 
           valuePrimitive: true, 
          // tagMode: true 
          }).data("kendoMultiSelect");        
         }, 
         showOperators: false 
        } 
       } 
      }, 
      { field: "OrderID" } ], 
     filterable: { mode: "row" }, 
     dataSource: { 
          type: "odata", 
          transport: { 
           read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" 
          }, 
          schema: { 
           model: { 
            fields: { 
             OrderID: { type: "number" }, 
             Freight: { type: "number" }, 
             ShipName: { type: "string" }, 
             OrderDate: { type: "date" }, 
             ShipCity: { type: "string" } 
            } 
           } 
          }, 
          pageSize: 20, 
              requestStart:onRequestStart 
         }, 
     dataBound: onDataBound 
     }).data("kendoGrid"); 

    function onRequestStart(e){ 
    var filter = e.sender.filter(); 
     if (filter && filter.filters && filter.filters.length > 0) { 
      var filter1 = filter.filters; 
      for (var i = 0; i < filter1.length; i++) { 
       if (filter1[i].field == "ShipCity" && filter1[i].value) { 
        var colorList = filter1[i].value.split(","); 
        if (colorList.length > 0) { 
         var newFilter = { logic: "or", filters: [] }; 
         for (var k = 0; k < colorList.length; k++) { 
          newFilter.filters.push({ field: "ShipCity", operator: "eq", value: colorList[k] }); 
         } 
         filter1 = filter1.splice(i, 1, newFilter); 
         e.preventDefault(); 
         e.sender.filter(filter); 
        } 
       } 
      } 
     } 
    } 
    function onDataBound(e){ 
    var multiSelectValue = []; 
     var filter = grid.dataSource.filter(); 
     if (filter && filter.filters && filter.filters.length > 0) { 
      var filter1 = filter.filters; 
      for (var i = 0; i < filter1.length; i++) { 
       if (filter1[i].field == "ShipCity" && filter1[i].value) { 
        multiSelectValue.push(filter1[i].value); 

       } else if (filter1[i].filters && filter1[i].filters.length > 0 && filter1[i].logic == "or") { 
        var filter2 = filter1[i].filters; 
        var multiSelectValue = []; 
        for (var j = 0; j < filter2.length; j++) { 
         if (filter2[j].field == "ShipCity") { 
          multiSelectValue.push(filter2[j].value); 
         } 
        } 
       } 
      } 
     } 
     setTimeout(function() { colorMulti.value(multiSelectValue) }); 
    } 
    $(document).ready(function() {  
     grid.dataSource.filter({ "filters": [{ "operator": "eq", "value": "Lyon,Graz,Bern", "field": "ShipCity" }], "logic": "and" }); 
    }); 
</script>