Cellule de filtre de la grille Kendo UI contenant un tableau

Question

Je veux filtrer une colonne spécifique sur une grille Kendo Grid qui contient un tableau.

La configuration de la grille est la suivante

 var resultsGrid = this.kendoGrid({
        dataSource:{
            data:[],
            pageSize:20
        },
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        filterable: {
            extra: false,
            operators: {
                string: {
                    startswith: "Starts with",
                    eq: "Is equal to",
                    neq: "Is not equal to"
                }
            }
        },
        pageable: {
            pageSizes: true,
            buttonCount: 5
        },
        scrollable: false,
        columns: resultsColumns
    }).data("kendoGrid");
    return resultsGrid;

La configuration des colonnes est la suivante

var resultsColumns = [
    {field: "keys", filterable: true, headerTemplate: function(){return Ec.translatedLabel("authorityEntryCode");}, template: '#for(var i = 0; i < keys.length; i++){# #=keys[i].name# =  #=keys[i].value# <br> #}#'},
    {field: "state", filterable: true, headerTemplate: function(){return Ec.translatedLabel("state");}},
    {field: "startDate", filterable: false, headerTemplate: function(){return Ec.translatedLabel("startDate");}},
    {command: initGridCommands(), headerTemplate: function(){return Ec.translatedLabel("actions");}}
];

et je veux filtrer la colonne avec les clés de champ

Le champ keys est un tableau d'objets qui contient le nom et la valeur et je veux filtrer avec la valeur.

Par exemple Exemple de grille

Ainsi, lorsque l'utilisateur ajoute a1 comme dans la capture d'écran, la première ligne est filtrée.

Si vous avez une réponse à cette question, cela m'aiderait beaucoup, merci.

Answer 1

Malheureusement, je pense que c'est assez difficile à réaliser. La procédure générale consisterait à lier le événement filterMenuInit Pour ce faire, il vous suffit de supprimer le contenu de la fenêtre contextuelle de filtrage par défaut à l'aide de votre propre formulaire, puis d'effectuer le filtrage manuellement sur les champs spécifiques que vous souhaitez. Je n'ai pas connaissance d'un moyen intégré d'effectuer un filtrage sur un champ de type tableau. Une version hacky permettant de ne filtrer que ce qui est nécessaire pourrait faire l'affaire :

filterMenuInit: function(e) {
          if (e.field == "keys") {
            var filterButton = e.container.find("button[type=submit]");
            var clearButton = e.container.find("button[type=reset]");
            var dataSource = jQuery("#grid").data("kendoGrid").dataSource;

            //Get rid of default filter button...
            filterButton.remove();

            clearButton.parent().prepend("<button type='button' class='k-button k-primary'>Filter</button>");

            var filterText = e.container.find(".k-textbox");
            filterButton = e.container.find("button[type=button]");

            filterButton.click(function(e) {
               e.preventDefault();

               dataSource.filter([
                {
                    field: 'keys',
                    operator: function (items, filterValue) {
                      for(var i = 0; i < items.length; i++) {
                        if(items[i].value == filterText.val()) {
                          return true;
                        }
                      }
                      return false;
                    },
                    value: filterText.val()
                }
            ]);
            });

            clearButton.click(function() {
                dataSource.filter([]); //clear filters...
            });
          }
        },

Ce code est rapide et sale, je vous encourage donc à lire la documentation concernant la fonction événement filterMenuInit y filtrage des sources de données pour trouver une solution plus propre. Voici également un extrait.