Add to kendoMultiSelect

Question

With the new kendo multiselect how would I add options to the list and make them selected?

For instance if I have a dropdown containing: 1,2,3 and I wanted to add 4 and 5 how do I do that? Do I have to destroy the multiselect, add the options and then reinit the multiselect?

Answer 1

Given the following multiselect definition:

var data =
        [
            { text: "Africa", value: "1" },
            { text: "Europe", value: "2" },
            { text: "Asia", value: "3" },
            { text: "North America", value: "4" },
            { text: "South America", value: "5" },
            { text: "Antarctica", value: "6" },
            { text: "Australia", value: "7" }
        ];

var multi = $("#select").kendoMultiSelect({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data
}).data("kendoMultiSelect");

You can use:

var values = multi.value();

For getting the list of values.

And for setting the value to South America (element with value 5) and "Asia" (element with value 3) use:

multi.value(["5", "3"])

If you want to add values to whatever it has then you need a little trick:

var multi = $("#select").kendoMultiSelect({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data,
    value: ["1", "2", "3"]
}).data("kendoMultiSelect");

// Adding value 4 and 5 to current content
var values = multi.value().slice();
$.merge(values, ["4", "5"]);
multi.value(values);

Warning: If values 4 and 5 were already selected you will end up having them duplicated.

Answer 2

Just want to add some information about how to actually add new values to the multi-select.

As OnaBai points out, the code to add an item to the multi-select is

$("#SDropDown").data("kendoMultiSelect").dataSource.add({ Text: x, Value: y });

given the .cshtml

@(Html.Kendo()
    .MultiSelect()
    .Name("SDropDown")
    .AutoBind(true)
    .Placeholder("Select s...")
    .DataTextField("Text")
    .DataValueField("Value")
)

In order to add an item as entered in the multi-select hook the change event for the text input. Since this isn't uniquely identified, I use XPath to get the <input> element. This is hooked in document.ready (in .cshtml, so escape @):

$(document).ready(function () {
    var node = document.evaluate('//select[@@id="SDropDown"]/../div[contains(@@class,"k-multiselect")]/input', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    if (node)
    {
        node.onkeypress = SChanged;
    }
}

function SChanged(e)
{
    // only append on enter
    if (kendo.keys.ENTER == e.keyCode)
    {
        // updates multi-select data source
        AddToOrganizations(this.value);

        var multi = $("#SDropDown").data("kendoMultiSelect");

        multi.dataSource.filter({}); //clear applied filter before setting value

        // keep all currently selected items and append the user entered text
        // (does not check for duplicates)
        // Also, the new values can only be selected after the data source has
        // been updated.
        var values = multi.value().slice();
        $.merge(values, [this.value]);
        multi.value(values);
    }
}