在Kendo UI Grid中为过滤器设置预定义值

Question

我想在剑道网格上的过滤器中设置用户定义的搜索值。用户打开过滤器后，该值将被放入搜索框中。任何建议都将不胜感激。

这是与Set default filter for Kendo UI Grid类似的问题，除了我正在使用角度js并且我想要一个用户定义的字符串过滤器值：

这就是我构建网格的方式。我正在使用角度js来创建具有自定义属性的div。最值得注意的属性是sg-grid（剑道网格本身），sg-filterable（设置为true表示此网格应该是可过滤的）和sg-predefine-filter（也设置为true表示此grid的过滤器在打开时应该在搜索框中输入一个字符串）：

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

这应该可以解决问题。