在Kendo UI Grid中設置過濾器的預定義值

Question

我想在Kendo網格上的過濾器中設置用戶定義的搜索值。只要用戶打開過濾器，該值將被放置在搜索框中。任何意見將不勝感激。

這是類似問題Set default filter for Kendo UI Grid除了我採用了棱角分明的JS，我想一個用戶定義的字符串過濾器值：

這是我建立我的網格。我正在使用角js創建一個具有自定義屬性的div。最顯着的屬性是sg-grid（kendo網格本身），sg-filterable（設置爲true表示該網格應該可過濾）和sg-predefine-filter（也設置爲true，表示此網格的過濾器應該在搜索框中輸入字符串時它打開）：

1. 標記

   <div sg-grid sg-data="api/grid/accounts" 
   sg-columns="accountId,name,pricingFrequency,shortName,status" 
   sg-filterable="true" 
   sg-predefine-filter-value="true"      
   </div> 
   

2. 腳本（簡化爲這裏演示）

   angular.module('sgComponents').directive('sgGrid', [   
       return { 
        restrict: 'AE', 
        scope: { filterable: @sgFilterable, predefineFilterValue: @sgPredefineFilterValue}, 
        template: '<div class="sg-grid">\ 
           <div class="pager-bar">\ 
            <div></div>\ // THE KENDO GRID 
           </div>\         
          </div>', 
        link: function(scope, element, attrs) { 
        buildGrid(); 
        function buildGrid() { 
         var grid = element.find(':nth-child(2)'); // 2nd DIV IN THE TEMPLATE 
         var gridOptions = buildGridOptions(scope, attrs, grid); 
         grid.kendoGrid(gridOptions); // build the grid 
         }; 
         /** 
         Builds the options for the grid 
         */ 
         function buildGridOptions(scope, attrs, grid) { 
         if (scope.filterable === 'true') { 
          opts.filterable = {}; 
          opts.filterable.operators = {}; 
          opts.filterable.operators.string = {} 
          if (scope.predefineFilterValue === 'true') { // set a pre-defined value if true 
           opts.filterable.operators.string = { 
            eq: 'Is equal to', value:'Test' 
           } 
          } else { // just show the filter option 
           opts.filterable.operators.string = { 
            eq: 'Is equal to' 
           } 
          }             
         } 
         } 
   
        } 
       };     
   ]); 
   

3. 這裏是控制檯日誌的圖像：

結果。正如你所看到的，我的價值被添加爲另一個過濾器選項。我不想要這個，我希望它作爲一個值在輸入框中！

Answer 1

終於找到了kendo forum question這讓我在正確的方向！

的解決方案是不添加預先設定的過濾器的價值，同時構建電網，但這樣做一次電網已完成使用kendoGrid.dataSource.filter對象建築：

angular.module('sgComponents').directive('sgGrid', [   
    return { 
     restrict: 'AE', 
     scope: { filterable: @sgFilterable, predefineFilterValue: @sgPredefineFilterValue}, 
     template: '<div class="sg-grid">\ 
       <div class="pager-bar">\ 
        <div></div>\ // THE KENDO GRID 
       </div>\         
      </div>', 
     link: function(scope, element, attrs) { 
     buildGrid(); 
     function buildGrid() { 
      //code same as in original question 
      grid.kendoGrid(gridOptions); // build the grid 
     }; 
     /* 
      * Builds the options for the grid 
      */ 
     function buildGridOptions(scope, attrs, grid) {    
      //code same as in original question 
     } 

     /* 
      * the grid has finished building so 
      * now get hold of it and pre-set the 
      * filter value. 
      * The values (the field to filter, the type of filter and the value) 
      * are hard-coded here but ultimately would 
      * come from a JSON object on the scope, constructed 
      * using values from the model 
     */ 
     kendoGrid = gridElem.data('kendoGrid'); // the grid 

     //If the attribute to pre-set a filter value is true...    
     if (scope.predefineFilterValue === 'true') {    
      var ds = kendoGrid.dataSource; // the datasource object has a filter object 
      ds.filter([ 
      { 
       "logic":"or", // could be 'and' 
       "filters":[{ 
        "field":"accountId", // the column you want to filter 
        "operator":"eq", // the type of filter 
        "value":105 // the value, hard-coded for testing 
       }] 
      } 
     } 
     } 
    }       
]); 

Answer 2

，則應指定網格數據源上的filter選項。

var dataSource = new kendo.data.DataSource({ 
    data: [ 
     { name: "Jane Doe", age: 30 }, 
     { name: "John Doe", age: 33 } 
    ], 
    filter : [{ 
     field: "name", operator: "eq", value: "John Doe" 
    }] 
}); 

這應該可以做到。