CODEWITHSUNDEEP
jquerykendo-ui
ps0604
ps0604

Reputation: 1081

kendoMultiSelect: allow to enter values in addition to selecting from the dropdown list

I'm trying to implement with kendoMultiSelect something similar to this jQuery plugin.

The user may either select a value from the dropdown list, or enter a new value. If the new value is entered, the multiselect will display it as if it were selected from the list (same look and feel).

My attempt to implement this is in this jsfiddle. First, I allow the user to enter a new value (hitting the enter key), then I add it to the data source and finally I add it to the selected values. The problem is that the multiselect object is behaving strangely: if you first select a value, and then enter a new value, the previous selected values disappear. If you play with it selecting and entering values you'll see additional strange behavior.

This is the HTML:

<select id="seltags" />

and this is the Javascript:

var data = [
    { text: "Africa" },
    { text: "Europe" },
    { text: "Asia" },
    { text: "Australia" }
];

multi = $("#seltags").kendoMultiSelect({
    dataTextField: "text",
    dataValueField: "text",
    placeholder: "Select or enter tags",
    dataSource: data
}).data("kendoMultiSelect");


$('.k-input').keydown ( function(e) {
    var code = e.keyCode || e.which;
    if (code == 13) {  // user pressed enter
        var entered = $('.k-input').val();
        multi.dataSource.add({ text: entered });
        var selected = multi.value();
        console.log("before: "+selected);
        selected.push(entered);
        console.log("after: "+selected);
        multi.value(selected);
    }
});

Any ideas?

Upvotes: 4

Views: 3021

Answers (2)

Dion D.
Dion D.

Reputation: 2596

Multiselect using a data source so you could play a little bit with event databound while you are doing add/remove item. And last you need to modify its select event for cleanup the data source.

Here is my implementation. Hope its help.

Upvotes: 2

Ashish
Ashish

Reputation: 77

Kendo has MultiSelect feature available now. please take a look on it. http://demos.telerik.com/kendo-ui/multiselect/index

Upvotes: -1

Related Questions