This is a migrated thread and some comments may be shown as answers.

Bug in Adding new items to Multiselect using API in "Kendo 2015 Q2" build

3 Answers 356 Views

MultiSelect

This is a migrated thread and some comments may be shown as answers.

Nariman asked on 23 Jul 2015, 07:20 PM

Hi Please see my sample code Here (http://dojo.telerik.com/UViSA).

In this sample code, I'm trying to add new item to Multiselect by typing any word followed by "," (comma) into the Multiselect textbox. It works well in all the previous builds (2015 Q1, Q1 SP1 and Q1 SP2) but it doesn't work with "Kendo 2015 Q2"!

To reproduce the problem:

1. Run the above example with (Kendo 2015 Q1 SP2).

2. in Multiselect textbox, enter "test" and press "," (comma)

3. You can see the world "test" is added to the Multiselect items and also automatically is selected and displayed.

4. Now change to the (Kendo 2015 Q2) and repeat the above steps 1 and 2, you will see that although, the word "test" is added to the list but:
a) it cannot be selected automatically anymore.
b) the word "test," is no longer cleared automatically in the multiselect textbox
c) basically this.value("test"); is not doing its job anymore!

I would appreciate your support to review and let me know:

1. What's wrong that my code is not working with "2015 Q2"?

2. If there is a better way of doing the code.

Thank you.

My sample code is pasted below as well:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>

<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>

<script src="http://cdn.kendostatic.com/2015.2.624/js/jszip.min.js"></script>

</head>

<body>

<select id="multiselect"></select>

<script>

var data = [{TagText: "Albania", id: "Albania"},

{TagText: "America", id: "America"}];

var _savedOld = "";

function multiselect_change(e) {

var previous = _savedOld

var current = this.value();

var diff = [];

if (previous) {

//check for removed selected items

diff = $(previous).not(current).get();

if (diff.length > 0){

alert("Removed Item = "+diff);

}else{

//check for new selected items

diff = $(current).not(previous).get();

if (diff.length > 0){

alert("New Item = "+diff);

}

this.refresh();

}

_savedOld = current.slice(0);

}

function multiselect_filtering(e) {

//get filter descriptor

var filter = e.filter;

if (filter.value.indexOf(",") > 0){

var newtag = filter.value.replace(",","");

var values = this.value().slice();

this.dataSource.filter({});

//e.preventDefault();

this.dataSource.add({ id: newtag, TagText: newtag });

var add = [newtag];

if (values.length > 0) {

var merge = $.merge(add,values);

this.value($.unique(merge));

}else{

this.value(add);

}

this.trigger("change");

this.dataSource.refresh();

}

$("#multiselect").kendoMultiSelect({

dataTextField: "TagText",

dataValueField: "id",

filter: "contains",

dataSource: data

});

var multiselect = $("#multiselect").data("kendoMultiSelect");

multiselect.bind("filtering", multiselect_filtering);

multiselect.bind("change", multiselect_change);

_savedOld = multiselect.value();

</script>

</body>

</html>

Bug in Adding new items to Multiselect using API in "Kendo 2015 Q2" build

3 Answers, 1 is accepted