Add items to Kendo Multiselect with jQuery

Question

I'd soo appreciate if someone could help.

I have Kendo Multiselect with no datasource initially:

@Html.Kendo().MultiSelectFor(model => model.Contract.ACCOUNT_NO).DataTextField("IBAN").DataValueField("IBAN")

And a function that appends items to this select:

    function getCustomerAccount(iban) {
            var ms = $("#Contract_ACCOUNT_NO").data('kendoMultiSelect');
            ms.dataSource.insert(0, { IBAN: iban, IBAN: iban }); //first insert to the dataSource

             //then insert to the textBox as selected item
            $("#Contract_ACCOUNT_NO_taglist").append("<li class='k-button' unselectable = 'on'><span unselectable='on'>" + iban + "</span><span unselectable='on' class='k-icon k-delete'>delete</span></li>"); 

            //next set inserted element prop to 'selected' (without this the Model does not accept selected items)
            $("#Contract_ACCOUNT_NO option[value=" + iban + "]").prop('selected', true);
        }

The problem is in setting prop of item to selected, it sets this property only to the last selected item. Why the props of previous items does not stay selected?

The second issue is when I delete last selected item, its selected property stays true.

My approach is to bind items I insert to the textBox directly to the dataSource of MultiSelect.

Petur Subev Petur Subev · Accepted Answer · 2014-08-08T07:07:46

Do not do such manual insertions - after adding the item to the dataSource, then use the value method of the MultiSelect to actually update the value.

e.g.

var oldValue =  multiselect.value().slice(); //create new array 
res.push(33); //add some more or new value    
multiselect.value(res)

Add items to Kendo Multiselect with jQuery

1 Answers