Multiselect with checkbox.

9 posts, 0 answers
  1. ALESSIO
    ALESSIO avatar
    1 posts
    Member since:
    Mar 2018

    Posted 20 Jun 2018 Link to this post

    Good morning I have to realize multiselect with checkbox.
    The final result will be very similar to this:
    http://embed.plnkr.co/OVPTCV/
    This example, however, is very old and I noticed that with the 2018 version of kendo it does not work perfectly.
    It is possible to have the same result using the version of kendo 2018 which seems to me to use different approaches. (eg tagtemplate)

  2. Neli
    Admin
    Neli avatar
    221 posts

    Posted 21 Jun 2018 Link to this post

    Hi Alessio,

    I have replied in the other thread on the same topic. For convenience I will paste both of my replies here as well. I would suggest you to continue the conversation in a single thread. 

    First reply is below:
    On the following link you will find a How-To article which describes an approach of creating MultiSelect with checkboxes. As you will see in the article, the itemTemplate configuration is used for adding checkbox to each item. 
    itemTemplate: "#:data.text# <input type='checkbox'/>",

    I would suggest you also to take a look at the following Forum thread where similar issue is discussed and more examples are provided.


    Second reply is below:

    To achieve the desired appearance in the tagTemplate you could check the count of the selected items. In case it is one item, you could display its text, otherwise you could show the count of the items:
    <script id="tagTemplate" type="text/x-kendo-template"> 
         #if(data.values.length == 1){ #
           <span> #: data.values[0]# </span>
         # } else{ #
          <span> #: data.values.length # items are selected </span>
          # } #
    </script>
    Here is the modified Dojo example


    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. D
    D avatar
    6 posts
    Member since:
    Aug 2016

    Posted 12 Feb in reply to Neli Link to this post

    I am following your solution, but I want an option to select "All" items as well.

    Also I do not want a close button to clear selection, a descent dropdown with checkbox functionality(as seen in image).

    Please guide me.

     

  4. D
    D avatar
    6 posts
    Member since:
    Aug 2016

    Posted 12 Feb in reply to D Link to this post

    In addition , I want selected items to be displayed as well, like as shown in image
  5. D
    D avatar
    6 posts
    Member since:
    Aug 2016

    Posted 12 Feb in reply to D Link to this post

    Also, I want to display checked items in dropdown in similar fashion (refer image)
  6. D
    D avatar
    6 posts
    Member since:
    Aug 2016

    Posted 12 Feb in reply to D Link to this post

    Sorry, due to some issue image was not attached
  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1722 posts

    Posted 14 Feb Link to this post

    Hello,

    You can use the MultiSelect's select event to check whether the "All" item is selected and then select all items using the API. See the following dojo for example.

    If you don't want the clear button to be displayed you can hide it with CSS:
    .k-multiselect-wrap>.k-i-close {
      display: none !important;
    }

    As for displaying the selected items separated by comma in the MultiSelect's input, the widget cannot be configured to show the selected items this way. It supports two tag modes: "single" and "multiple": you can find them demonstrated in this demo.

    Regards,
    Ivan Danchev
    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.
  8. D
    D avatar
    6 posts
    Member since:
    Aug 2016

    Posted 19 Feb in reply to Ivan Danchev Link to this post

    Thanks for your reply but this was not I was looking for.

    I want a dropdown with items having checkbox. When item is checked (not selected), dropdwon value should be changed as CSV of values/text.

    I have achieved this but having issues in checking items when I upgraded my Kendo version to 2019. Please look at this dojo

    I have used a custom plugin.

    Can you help me in this, because it was working fine since long and after upgrade, this stopped working.

    I don't want to change UI beahviour.

     

     

  9. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1722 posts

    Posted 20 Feb Link to this post

    Hello,

    By design the DropDownList does not support multiple selection, thus achieving such behavior requires implementing a custom approach. Please, have in mind that custom plugins are not supported since they override built-in functionality that may or may not change in subsequent Kendo UI versions. It appears this is the case with the plugin you have implemented. A change or a number of changes to the source code in between the older version you were using and the latest official version have caused conflicts with the custom functionality you have implemented (a js exception is thrown on page load). That being said, you could consider:
    1. A different implementation of the ​multiple selection in the DropDownList. See the following example posted by a community member, which allows the text of multiple checked items to be displayed as widget value and it works in the latest official Kendo UI version.
    2. Implementing checkboxes in the MultiSelect widget instead of the DropDownList: example. However, note that the MultiSelect displays the selected items in tags and these items cannot be separated with comma. If needed the "x" button that removes a selected item can be hidden, so the difference in appearance with the DropDownList will be that the items are placed in tags, this also does not allow to highlight and copy their text.

    Regards,
    Ivan Danchev
    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.
Back to Top