Ensemble pré-défini de la valeur pour le filtre en Kendo UI Grille

Je veux mettre un définis par l'utilisateur recherche une valeur dans un filtre sur un kendo de la grille. Dès que l'utilisateur ouvre le filtre, la valeur sera placé dans la zone de recherche. Tout conseil serait grandement apprécié.

C'est la même question à Ensemble de filtre par défaut pour le Kendo UI Grille sauf que je suis en utilisant angular js et je veux une chaîne définie par l'utilisateur valeur de filtre:

C'est la manière dont je construis mon réseau. Je suis à l'aide d'angular js pour créer un div avec des attributs personnalisés. La plupart des attributs remarquables sont sg-grid (le kendo grille elle-même), sg-filterable (défini à true pour indiquer que cette grille devrait être filtrables) et sg-predefine-filter (également définie sur true pour indiquer que cette grille du filtre doit avoir une chaîne de caractères entrés dans la zone de recherche lorsque l'on ouvre):

Balisage

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

De script (simplifié de démo ici)

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'
                   }
                }                                                 
             }
          }

       }   
   };                   
]);

Voici une image de la console de log:

Ensemble pré-défini de la valeur pour le filtre en Kendo UI Grille

Le résultat. Comme vous pouvez le voir, ma valeur est ajoutée comme une autre option de filtre. Je ne veux pas de cela, je veux qu'il soit dans la zone de saisie de la valeur que!

Ensemble pré-défini de la valeur pour le filtre en Kendo UI Grille

OriginalL'auteur Tone | 2013-11-28

Enfin trouvé un kendo forum question qui m'ont mis dans la bonne direction!

La solution est de ne pas ajouter de l'ensemble de pré-filtre de la valeur lors de la construction de la grille, mais le faire une fois que la grille a fini de construire à l'aide de la kendoGrid.source de données.l'objet de filtre:

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

OriginalL'auteur Tone

4

Vous devez spécifier le filter option sur la source de données de la grille.
```
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"
    }]
});
```
Cela devrait faire l'affaire.

Juste un commentaire: je pense que ceux [] dans filter ne sont pas nécessaires. Au moins, ils ne sont pas dans la documentation (docs.telerik.com/kendo-ui/api/javascript/data/...).

OriginalL'auteur Nerrve

Vous devez vous connecter pour publier un commentaire.