Set pre-defined value for filter in Kendo UI Grid

Question

I want to set a user-defined search value in a filter on a kendo grid. As soon as the user opens the filter, the value will be placed into the search box. Any advice would be much appreciated.

This is similar question to Set default filter for Kendo UI Grid except that I'm using angular js and I want a user-defined string filter value:

This is how I build my grid. I'm using angular js to create a div with custom attributes. The most notable attributes are sg-grid (the kendo grid itself), sg-filterable (set to true to indicate that this grid should be filterable) and sg-predefine-filter (also set to true to indicate that this grid's filter should have a string entered into the search box when it opens):

1. Markup

   <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. Scripting (simplified to demo here)

   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. Here is an image of the console log:

The outcome. As you can see, my value is added as another filter option. I don't want this, I want it to be in the input box as a value!

Solution 1

Finally found a kendo forum question that set me in the right direction!

The solution is not to add the pre-set filter value while constructing the grid but to do it once the grid has finished building using the kendoGrid.dataSource.filter object:

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

Solution 2

You should specify the filter option on the datasource of the grid.

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

This should do the trick.