Kendo UI Gitter mit Multi-Werte

Question

Ich möchte ein Kendo-UI-Gitter zu meiner Seite hinzufügen, die eine Spalte mit Multi-Werte enthalten sollte.

die Folgedaten Stellen Sie sich vor:

| Name | Tag     | 
|--------|---------------------| 
| John | C#, JavaScript, PHP | 
| Oliver | UI, SQL    | 
| Mark | SQL, Windows Server | 

Die tag Spalte ist ein Array von Tags tatsächlichen.

Am Ende des Tages möchte ich in der Lage sein, für alle Datensätze zu filtern, die ein Tag sql enthalten.

Ist dies mit kendo-ui überhaupt möglich?

Answer 1

dieses Raster Setup Versuchen:

var grid = $("#grid").kendoGrid({ 
    dataSource: { 
    data: [ 
     { name: "John", tags: ["C#", "JavaScript", "PHP"] }, 
     { name: "Oliver", tags: ["UI", "SQL"] }, 
     { name: "Mark", tags: ["SQL", "Windows Server"] }] 
    }, 
    columns: [{ 
     field: "name", 
     title: "Name" 
    }, { 
     template: "# var t=tags.join(', '); data.tagsString=t; # #=t #", 
     title: "Tags", 
     field: "tags" 
    }] 
}).data("kendoGrid"); 

$("#filter").on("keydown", function() { 
    grid.dataSource.filter({ 
     field: "tagsString", 
     operator: "contains", 
     value: $(this).val() 
    }); 
}); 

Demo.

Wie Sie sehen können, muss ich ein externes benutzerdefiniertes Filterfeld verwenden. Dies liegt daran, dass die standardmäßigen integrierten Spaltenfilter des Gitters kein Array filtern können, weder die Methode der Datenquelle filter().

in der Vorlage also machte ich Kendo eine neue Eigenschaft in jedem Datasource Element zu erstellen, die so genannte tagsString, die ich das Ergebnis von tags.join(", "), genau so wie in den Stichworte Spalte angezeigt. Mit dieser Eigenschaft kann ich unter Verwendung der Methode filter() filtern und field als tagsString einstellen.