KendoUI MultiSelect in a Grid (part 2): Yes, we can!


In my previous post I showed how to work with KendoUI MultiSelect in a Grid. There was one last thing pending: what about if we get from the server an array of id instead of directly the text?

KendoUI MultiSelect: working with ids

Let consider that our Cities DataSource is something like this:

var CitiesDS = new kendo.data.DataSource({
    transport : {
        read : {
            url: "Cities.json"
        }
    },
    schema: {
        model: {
            id    : "id",
            fields: {
                text: {type: "string"}
            }
        }
    }
});

and the return JSON is:

[
    { "id": 1, "text": "Seattle" },
    { "id": 2, "text": "Tacoma" },
    { "id": 3, "text": "Kirkland" },
    { "id": 4, "text": "Redmond" },
    { "id": 5, "text": "London" },
    { "id": 6, "text": "Philadelphia" },
    { "id": 7, "text": "New York" },
    { "id": 8, "text": "Seattle" },
    { "id": 9, "text": "London" },
    { "id": 10, "text": "Boston" }
]

We have two questions to solve, the first is pretty simple: change editor function to use as values the id. We add dataTextField and dataValueField to kendoMultiSelect options.

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

The second question is how, while not editing, we get the list of values displayed as text and not as string. Now, there is no magic way of doing it (as we did joining text). So, let’s write a function that does the trick.

1. Start redefining the Column Cities for using as template this new function.

columns   : [
    ...
    { field: "Cities", width: 300, template: citiesDisplay, editor: citiesEditor }
]

2. Implement citiesDisplay as:

function citiesDisplay(data) {
    var res = [];
    $.each(data.Cities, function (idx, elem) {
        res.push(CitiesDS.get(elem).text);
    });
    return res.join(", ");
}

Where I create res array for containing the values as string and then use our good friend join for converting it to CSV.

Now, we get:

KendoUI MultiSelect id: error in console
KendoUI MultiSelect id: error in console

Oops! an error in console. Why?

It turns out that I have defined in the DataSource for the Grid the field Cities as a string and now we are storing it as an array of numbers.

var ds = new kendo.data.DataSource({
    transport: {
        ...
    },
    pageSize : 10,
    schema   : {
        model: {
            id    : "Id",
            fields: {
                Id       : { type: 'number' },
                FirstName: { type: 'string' },
                LastName : { type: 'string' },
                Cities   : { type: 'string' }
            }
        }
    }
});

But … array is not a valid type definition (according the documentation) … ok! do not say anything about the type.

var ds = new kendo.data.DataSource({
    transport: {
        ...
    },
    pageSize : 10,
    schema   : {
        model: {
            id    : "Id",
            fields: {
                Id       : { type: 'number' },
                FirstName: { type: 'string' },
                LastName : { type: 'string' },
                Cities   : { }
            }
        }
    }
});

Et, voilà! Mission accomplished!

KendoUI Grid using MultiSelect and storging IDs
KendoUI Grid using MultiSelect and storging IDs

Everything works again!

Advertisements

10 thoughts on “KendoUI MultiSelect in a Grid (part 2): Yes, we can!

  1. Nice tutorial. This was exactly what I need for a project I’m working on right now. One thing I’m having trouble with, however, is getting the grid data source to populate the multiselect column properly and subsequently posting the data from that column back to the controller (it’s an MVC4 project). Do you have a live demo of this on your site somewhere?

  2. I tried to use your articles to implement an example, but I don’t think I succeeded 100%.

    Here is my try: http://plnkr.co/edit/wtKUO43flNmiiQjVOQzY

    You will notice that I had to change the citiesDisplay function, because the data.Cities array contains entries like [{“id”:1,”text”:”Seattle”},{“id”:3,”text”:”Kirkland”}], not just ids. The Cities column of the grid contains similar entries. Do you know how I can make it so that it only includes the ids?

    • Not sure I understand your problem. I see that Seattle and London twice because they are actually twice in the DataSource (London is listed with ids 5 and 9 and Seattle with ids 1 and 8) so they are actually different. If you remove duplicated entries it will work.

      • Hello onobai,

        I have updated the example but still I have the same results. If you can edit the plunk or post a full example somewhere, I will be grateful.

      • Just to make things clear: I would expect the cities array to be [1, 3], not
        [{“id”:1,”text”:”Seattle”},{“id”:3,”text”:”Kirkland”}]

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