Kendo UI grid with multi-values

Question

I want to add a kendo-ui-grid to my page which should contain a column with multi-values.

Imagine the follow data:

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

The tag column is actual an array of tags.

At the end of the day I would like to be able to filter for all records that contain a tag of sql.

Is this even possible using kendo-ui?

DontVoteMeDown DontVoteMeDown · Accepted Answer · 2016-07-27T18:33:39

Try this grid setup:

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.

As you can see, I have to use an external custom filter field. That is because the default built-in column filters of the grid can't filter an array, neither the dataSource's filter() method.

So, in the template, I made kendo to create a new property in each dataSource item, called tagsString, which I set the result of tags.join(", "), the same as displayed in the Tags column. With that property set, I can filter using filter() method, setting the field as tagsString.

Kendo UI grid with multi-values

1 Answers