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

Multiselect with free text

5 Answers 1037 Views

MultiSelect

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

5 Answers, 1 is accepted

answered on 23 Jul 2015, 07:28 PM

Hi Ivailo and Kiril,

You might be interested in my solution below which does exactly what you are looking for, however it's working with all the previous version of Kendo Builds except "Kendo 2015 Q2". I have already reported the bug under another post in this forum and waiting for reply.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Kendo UI Snippet</title>

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

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

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

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

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

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/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.1.429/js/kendo.all.min.js"></script>

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

<script src="http://cdn.kendostatic.com/2015.1.429/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>