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

Multiselect with free text

5 Answers 379 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Ivailo
Top achievements
Rank 1
Ivailo asked on 07 Apr 2015, 01:01 PM

Hi,

 is there a multiselect with an option to add free text values ?

5 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 09 Apr 2015, 07:59 AM

Hello Ivailo,

I am afraid that there is no such functionality currently available. You can submit this as a feature request on UserVoice, so that it is considered for implementation in a future release.

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Luciano Kaesemodel
Top achievements
Rank 1
answered on 14 Jul 2015, 06:43 PM

Hello Kiril,

It has been implemented?

tks.
0
Kiril Nikolov
Telerik team
answered on 15 Jul 2015, 07:06 AM

Hello Luciano,

 

We still do not have this implemented. As I said you can open or vote for a feature request in our feedback portal and if it gets popular we will see it implemented.

 

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Nariman
Top achievements
Rank 1
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>
 
 
    <script src="http://code.jquery.com/jquery-1.9.1.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>

0
Georgi Krustev
Telerik team
answered on 27 Jul 2015, 10:08 AM
Hello Nariman,

I answered the forum thread you've mentioned. For those who are interest in this solution please refer to the demo posted in the thread:
Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
MultiSelect
Asked by
Ivailo
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Luciano Kaesemodel
Top achievements
Rank 1
Nariman
Top achievements
Rank 1
Georgi Krustev
Telerik team
Share this question
or