Imposta il valore predefinito per il filtro nella griglia dell'interfaccia utente Kendo

Question

Desidero impostare un valore di ricerca definito dall'utente in un filtro su una griglia di kendo. Non appena l'utente apre il filtro, il valore verrà inserito nella casella di ricerca. Qualsiasi consiglio sarebbe molto apprezzato.

Questo è simile domanda a Set default filter for Kendo UI Grid tranne che sto usando js angolari e voglio un valore di filtro stringa definita dall'utente:

Questo è come io costruisco la mia griglia. Sto usando angular js per creare un div con attributi personalizzati. Gli attributi più importanti sono sg-grid (la griglia di kendo stessa), sg-filterable (impostata su true per indicare che questa griglia deve essere filtrata) e sg-predefine-filter (impostata anche su true per indicare che il filtro di questa griglia deve avere una stringa immessa nella casella di ricerca quando si apre):

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 (semplificato per demo qui)

   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. Ecco un'immagine del log della console:

L'esito. Come puoi vedere, il mio valore viene aggiunto come un'altra opzione di filtro. Non voglio questo, voglio che sia nella casella di input come valore!

Answer 1

finalmente trovato un kendo forum question che mi ha impostato nella direzione giusta!

La soluzione non è quella di aggiungere il valore pre-impostare il filtro, mentre la costruzione della griglia, ma per farlo una volta che la griglia è finito di costruire utilizzando l'oggetto 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

È necessario specificare il filter opzione sull'origine dati della griglia.

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

Questo dovrebbe fare il trucco.