Dropdownlist with multi select

13 posts, 0 answers
  1. Arivola
    Arivola avatar
    1 posts
    Member since:
    Jan 2013

    Posted 18 Feb 2013 Link to this post

    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
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 20 Feb 2013 Link to this post

    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!
  3. Ashley
    Ashley avatar
    2 posts
    Member since:
    Sep 2012

    Posted 22 Feb 2013 Link to this post

    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
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 25 Feb 2013 Link to this post

    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!
  5. Daniel Gidman
    Daniel Gidman avatar
    1 posts
    Member since:
    Feb 2010

    Posted 17 Oct 2013 Link to this post

    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/
  6. Bhupendra
    Bhupendra avatar
    21 posts
    Member since:
    Jul 2012

    Posted 15 Apr 2014 in reply to Georgi Krustev Link to this post

    So is multiselect dropdown now officially part of kendo UI?
  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 15 Apr 2014 Link to this post

    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!
     
  8. Bharat
    Bharat avatar
    5 posts
    Member since:
    Apr 2014

    Posted 16 May 2014 in reply to Georgi Krustev Link to this post

    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
  9. Bharat
    Bharat avatar
    5 posts
    Member since:
    Apr 2014

    Posted 16 May 2014 in reply to Georgi Krustev Link to this post

    Thanks Georgi,

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

  10. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 19 May 2014 Link to this post

    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!
     
  11. Steve
    Steve avatar
    4 posts
    Member since:
    Sep 2015

    Posted 02 Mar in reply to Daniel Gidman Link to this post

    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.

     

     

  12. Aleksandar
    Admin
    Aleksandar avatar
    117 posts

    Posted 04 Mar Link to this post

    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.
  13. Steve
    Steve avatar
    4 posts
    Member since:
    Sep 2015

    Posted 04 Mar in reply to Aleksandar Link to this post

    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.

Back to Top