KendoUI MultiSelect in a Grid: Yes, we can!

In Spring 2013 (see Release Note) KendoUI introduced a new widget: MultiSelect. Similar to a Drop Down List but this time you see all selected options as some sort of buttons with an (x) for deleting it and a Drop Down List for adding new items.

Kendo UI MultiSelect widget

But as well as it happens with dates or booleans, you do not have a Kendo UI out-of-the-box support of input fields of this type, in a Kendo UI Grid. If you want to use a MultiSelect, DatePicker, AutoComplete, CheckBox,… you need to write and editor function.

KendoUI: MultiSelect

Using MultiSelect widget for an input field is pretty simple, you just need to define an HTML select and invoke the kendoMultiSelect initialization with little more than a DataSource that is an array of valid options.

<select id="select"></select>

$("#select").kendoMultiSelect({
    dataSource: [
        "Africa",
        "Europe",
        "Asia",
        "North America",
        "South America",
        "Antarctica",
        "Australia"
    ]
});

And if we display what it stores, we can see that is is an array of strings.

KendoUI MultiSelect value

 

KendoUI: MultiSelect, saving ids

But in the previous case the DataSource is just an array of strings but you might have both text: what you want to show; and value what you want to store. You configure which field is used for text in dataTextField and which for value with dataValueField

If so, you define the DataSource as:

$("#select").kendoMultiSelect({
    dataTextField : "text",
    dataValueField: "id",
    dataSource    : [
        { text: "Africa", id: 1 },
        { text: "Europe", id: 2 },
        { text: "Asia", id: 3 },
        { text: "North America", id: 4 },
        { text: "South America", id: 5 },
        { text: "Antarctica", id: 6 },
        { text: "Australia", id: 7 }
    ]
});

Now, when we display the values, we get:

KendoUI MultiSelect values when explicitly set text and value fields.

 

KendoUI Grid with MultiSelect field

Now, it is time for using this MultiSelect in a Grid with the considerations above.

KendoUI Grid displaying MultiSelect cell

1. We have seen that values are stored in an array in KendoUI MultiSelect, so we cannot directly show them in a Grid cell or it will be displayed as an array.

Kendo UI MultiSelect value displayed in a Grid cell

2. This is actually easy to solve, we use a template in the column definition that serialize MultiSelect value to a string separated by commas using join method.

columns   : [
    ...
    { field: "Cities", width: 300, template: "#= Cities.join(', ') #" }
]

Kendo UI MultiSelect value displayed in a Grid cell separated by commas

 

KendoUI Grid editing MultiSelect cell

Now, we have to inform KendoUI Grid how we want a multi-value cell to be edited: edit using a MultiSelect; and we do this using editor attribute in the column definition.

columns   : [
    ...
    { field: "Cities", width: 300, template: "#= Cities.join(', ') #", editor: citiesEditor }
]

The only remaining thing is define citiesEditor that is pretty simple:

function citiesEditor(container, options) {
    $("<select multiple='multiple' data-bind='value : Cities'/>")
            .appendTo(container)
            .kendoMultiSelect({
                dataSource: CitiesDS
            });
}

Generate an HTML select with option multiple and bind it to field Cities doing data-bind=’value : Cities’. Now our Grid while editing the list of Cities looks like:

KendoUI MultiSelect value formatted using template

So, it turned out not to be so difficult. Although that is still pending the case when we want to save the id instead of the text. This will be covered in the second part of this post.