Kendo UI-Gitterfilterzelle, die ein Array enthält

Question

Ich möchte eine bestimmte Spalte in einem Kendo-Grid, das ein Array enthält, filtern.

Die Gitterkonfiguration

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; 

Die Spalten-Konfiguration

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

und ich möchte Filtersäule mit den Feldtasten

Die Feldschlüssel ist ein Array von Objekt ist, das enthält Name und Wert und ich möchte mit dem Wert filtern.

Zum Beispiel Example of the Grid

So, wenn der Benutzer fügt a1 wie in der Abbildung die erste Zeile gefiltert werden.

Bitte, wenn Sie eine Antwort darauf haben, wird es mir viel helfen, danke.

Answer 1

Leider ist das meiner Meinung nach ziemlich schwierig. Der allgemeine Prozess würde eine Bindung an die filterMenuInit event erfordern, den Inhalt des Standardfilter-Popups mit Ihrem eigenen Formular entfernen und dann die Filterung für die spezifischen Felder, die Sie möchten, manuell durchführen. Ich bin mir nicht bewusst, dass eine Filterung für ein Array-Feld integriert ist. Eine Hacky-Version überschrieben, was erforderlich ist könnte so sein:

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... 
      }); 
      } 
     }, 

Dieser Code ist schnell und schmutzig, so würde ich Sie ermutigen, die Dokumentation zu lesen, die filterMenuInit event und data source filtering über eine sauberere Lösung zu kommen. Here is a snippet as well.