剣道のグリッドでフィルターの定義済みの値を設定する

Question

剣道グリッドのフィルターにユーザー定義の検索値を設定したいとします。ユーザーがフィルタを開くと、その値が検索ボックスに表示されます。アドバイスをいただければ幸いです。

これは私が角度のJSを使用していることを除いてSet default filter for Kendo UI Gridに類似質問があり、私は、ユーザー定義の文字列のフィルタ値をしたい：

これは私が私のグリッドを構築する方法です。私は角度jsを使用してカスタム属性を持つdivを作成しています。最も注目すべき属性はsg-grid（剣道グリッド自体）、sg-filterable（このグリッドをフィルタリング可能にするにはtrueに設定）、sg-predefine-filter（このグリッドのフィルタはそれは）開きます

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' 
           } 
          }             
         } 
         } 
   
        } 
       };     
   ]); 
   

を

結果：0

ここコンソールログの画像です。ご覧のとおり、私の値は別のフィルターオプションとして追加されています。私はこれを望んでいない、私は値として入力ボックスにしたい！

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" 
    }] 
}); 

これはトリックを行う必要があります。