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
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 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 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
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
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
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.

Advertisements

12 thoughts on “KendoUI MultiSelect in a Grid: Yes, we can!

  1. Wow this is exactly the functionality I am look for, but unfortunately the limited code examples has left me guessing how to do this. 😦

  2. Very nice – thanks.

    I however am stuck on this:

    columns : [

    { field: “Cities”, width: 300, template: “#= Cities.join(‘, ‘) #”, editor: citiesEditor }
    ]

    I’m getting an error: “Uncaught TypeError: Object has no method ‘join’ ”

    I’m not sure what I’m doing wrong, any help would be greatly appreciated!

    Lisa

    • As far as I know this is not supported by KendoUI since you cannot define custom filter functions. So you should do some programming for filtering values and probably you will have some trade offs as if you want to select multiple cities in the same record or records with any of the cities selected. Also questions as what to do if you search for Orleans, should it show just Orleans or also New Orleans.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s