Geek Answers Handbook

KendoMultiSelect: allows you to enter values ​​in addition to selecting from the drop-down list

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

The user can either select a value from the drop-down list or enter a new value. If a new value is entered, the multi selector will display it as if it were selected from a list (the same appearance).

My attempt to implement this in this jsfiddle . First, I allow the user to enter a new value (pressing the enter key), then add it to the data source and finally add it to the selected values. The problem is that the multi-selector object behaves strangely: if you first select a value and then enter a new value, the previous selected values ​​will disappear. If you play with this choice and enter values, you will see additional strange behavior.

This is HTML:

<select id="seltags" />

and this is 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?

+4
source share
2 answers

, , / . select .

. .

+1

Kendo MultiSelect. , . http://demos.telerik.com/kendo-ui/multiselect/index

-1

More articles:


All Articles