Dropdownlist with multi select

1 Answer 2363 Views
DropDownList
Arivola
Top achievements
Rank 1
Arivola asked on 18 Feb 2013, 03:01 PM
hello!!
I'm trying to create a dropdownlist mutliselect.
in fact I have two dropdownlist that I consider as a parent and the other as a child.
when I select a parent in the first dropdownlist, a list of child  appears in the other dropdownlist. You can choose several child for one parent.  For this I used checkbox ,creating a template as follows:

------
<script type="text/x-kendo-tmpl" id="myTemplate">
    #if (ID){#
       <div class="item click" data="${ID}">
        <input id ="${ID}" type="checkbox" class="click xxx_${ID}" value="${ID}" />
        <span class="checkbox">#:Name#</span>
      </div>
    #}#
</script>
--------
my dropdownlist are:
-----

 var dropdownlistChapterParent =$('#IDChapterTemplates_' + e + '').each(function () {
                                           var combobox = $(this);
                                           var dropdownlistChapterParent= combobox.kendoDropDownList({
                                                optionLabel: "            ",
                                                dataTextField: "Name",
                                                dataValueField: "ID",
                                                dataSource: {
                                                     data: Chapters
                                                 },
                                                change: function () {
                                                     var DataItem = combobox.data("kendoDropDownList").dataItem();
                                                     combobox.parent().find('#ChapterTemplateID_'+e+'').val(DataItem.ID);
                                                     parentid=DataItem.ID;
                                                     $.ajax({
                                                        type: 'GET',
                                                        template: kendo.template($("#myTemplate").html()),
                                                        url: '@Url.Action("GetChapterTemplatefils","Reports")',
                                                        data: { chaptertypeid: parentid },
                                                        success: function (response) {
                                                         
                                                           $('#IDchapterTemplatefils_'+str1+'').data('kendoDropDownList').dataSource.data(response);
                                                        }
                                                      });
                    
                                                 }

                                            }).data("kendoDropDownList");
                                            dropdownlistChapterParent.select(function(DataItem) {
                                              return DataItem.ID == value.TemplateID;
                                            });
                                       });

                                       var dropdownlistChapterChild=$('#IDchapterTemplatefils_' + e + '').each(function () {
                                             var combobox = $(this);
                                             combobox.kendoDropDownList({

                                                 optionLabel: "            ",
                                                 dataTextField: "Name",
                                                 dataValueField: "ID",
                                                 template: kendo.template($("#myTemplate").html()),
                                                 dataSource: {

                                                     transport: {
                                                         read: {

                                                             url: '@Url.Action("GetChapterTemplatefils","Reports")?chaptertypeid=' + value.TemplateID

                                                         }
                                                     },
                                                     schema: {
                                                         model: {
                                                             ID: "ID",
                                                             Name: "NAME"
                                                         }
                                                     }
                                                 },
                                                 change: function () {
                                                     var DataItem = combobox.data("kendoDropDownList").dataItem();
                                                     combobox.parent().parent().find('#ChapterTemplatefilsID_' + e + '').val(DataItem.ID);
                                                 }
                
                                             });
                                         }).data("kendoDropDownList");
-----------------------
-----------
for example, if I am having parent1 and child11 child12 child13 like child (for  parent1). I select clihd11 and i save. After i I am considering an edition. Normally child11 must be checked. I check child12. I have now child11 child12 .
my questions are:
1-
var child=value.ChapterChild;
 alert("Press  ok!");

  var h  = 0;
   if (child.length>= 1) {
          for(h=0;h<child.length;h++){
                                                
                 $('.xxx_'+child[h]).attr('checked','checked');
               }
  }
I can not remove "alert("Press  ok!");" because  when I click "edit" child11 is not checked?????????

2- when I checked child11 and child12 and if I get the values ​​that are checked, I  have child11 child11 child12. That's false beacause I 'll have child11 child12.
II get the value of checkbox as follows:
---
 var checkboxes = $("#IDchapterTemplatefils_" + j + "-list .click:checked");
                     var values = [];
                   
                     console.log(checkboxes);
                     $(checkboxes).each(function(i, elt){
                         values.push($(elt).val());

                     });
----
and  when I debug my project with firebug. I have  two #IDchapterTemplatefils_1-list as id .

thank you  for  help

1 Answer, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 20 Feb 2013, 08:10 AM
Hello Arivola,

 
The DropDownList widget is not designed to support multi selection. Check this jsFiddle demo, which shows an attempt to create multi select dropdownlist. Please note that this demo was created by comunity as a custom solution, which we do not support.

As a side note, MultiSelect widget is scheduled for the next official release of Kendo UI and I will suggest you wait for it.

Regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Ashley
Top achievements
Rank 1
commented on 22 Feb 2013, 04:28 PM

Do you have an idea on how close are you to releasing the Multi-Select control (I assume as part of Kendo Mvc 2013 Q1)?  would it be possible to get a pre-release version?

Thanks
Georgi Krustev
Telerik team
commented on 25 Feb 2013, 08:32 AM

Hello Ashley,

 
The Beta release of Q1 2013 Kendo UI is due the end of February. I will suggest download the Beta bits and give them a try.

Regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Daniel Gidman
Top achievements
Rank 1
commented on 17 Oct 2013, 03:46 PM

the dropdown list in the fiddler has some issues, I've updated it with some fixes and more options.  Heres the fiddle for it.  http://jsfiddle.net/sfxN4/
Bhupendra
Top achievements
Rank 1
commented on 15 Apr 2014, 11:41 AM

So is multiselect dropdown now officially part of kendo UI?
Georgi Krustev
Telerik team
commented on 15 Apr 2014, 12:36 PM

Hello Bhupendra,

Yes, MultiSelect widget is part of Kendo UI since Q1 2013 release. You can find more information about it here.

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Bharat
Top achievements
Rank 1
commented on 16 May 2014, 07:37 PM

Hi Georgi,
   We have recently bought Kendo. We are using Cascading DropDownList. What is the best way to use it to select multiple values. I want to do like...user can select one or more values from parent. Based on the selection from parent, child dropdown list will be filled.

Thanks
Bharat
Bharat
Top achievements
Rank 1
commented on 16 May 2014, 09:35 PM

Thanks Georgi,

   Do you have example of cascading multiselect widget...where values selected from parent are used to fill the child multiselect.

Georgi Krustev
Telerik team
commented on 19 May 2014, 11:03 AM

Hello Bharat,

Kendo MultiSelect widget does not have built-in cascading option, but it can be easily implemented using its data source. Check this demo, which shows how to accomplish this.

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Steve
Top achievements
Rank 1
commented on 03 Mar 2020, 12:45 AM

This looks good, but I am getting following errors in kendo.all.js:

Unhandled exception at line 29, column 7455 in http://localhost:61937/Scripts/kendo/2017.3.913/kendo.all.min.js
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'get'

Unhandled exception at line 42, column 3123 in http://localhost:61937/Scripts/kendo/2017.3.913/kendo.all.min.js
0x800a138f - JavaScript runtime error: Unable to get property 'done' of undefined or null reference

I am using Kendo 2017.3.913.

 

 

Aleksandar
Telerik team
commented on 04 Mar 2020, 02:22 PM

Hello Steven,

I would suggest upgrading to the latest version of Kendo UI, as there might have been a related bug, that is already fixed. With the latest version of Kendo UI, the demo from the How-to article on Cascading MultiSelects works as expected.

Regards,
Aleksandar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Steve
Top achievements
Rank 1
commented on 04 Mar 2020, 11:58 PM

I was actually referring to the non-supported, "jsfiddle" option mentioned above, that has checkboxes.

I have decided to use the Telerik multiselect component instead.

I have not had good luck upgrading projects to newer versions of Telerik Kendo, so I tend to avoid doing that unless I'm making a new major release of an application.

Tags
DropDownList
Asked by
Arivola
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Share this question
or