Multiselect with checkbox.

[ALESSIO]

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)

[Neli]

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

[Dilip]

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.

 

[Dilip]

In addition , I want selected items to be displayed as well, like as shown in image

[Dilip]

Also, I want to display checked items in dropdown in similar fashion (refer image)

[Dilip]

Sorry, due to some issue image was not attached

[Ivan Danchev]

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

[Dilip]

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.

 

 

[Ivan Danchev]

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

[John]

I use

[John]

I used your modified example. Works great and just what I was looking for. Thank you.

[Britto]

I need a Kendo Multiselect dropdown with select all checkbox and also with checkbox in each dropdownlist... can u provide me any working  link for that

[Ivan Danchev]

Hello,

Here's a dojo example that demonstrates how a checkbox can be displayed in each item, by using a template: https://dojo.telerik.com/oPakUgok

As for a checkbox that checks/unchecks all items, such functionality is not implemented in the MultiSelect out-of-the-box and achieving it would require a custom solution. See the following article, which shows how all items can be selected/deselected by clicking on two buttons outside the MultiSelect. Consider using a similar logic for this requirement.

Regards,
Ivan Danchev
Progress Telerik

[Britto]

Thank you for your Answer. I have copied the same code in ASP.NET MVC 5 Application. I have also used the scripts used int the tutorials. But the style is not applied correctly. Also it works very slowy. How to rectify that?Pls help me.

[Britto]

Hi All.....

I have found some sample codes in internet for using Select All Check Box in Kendo Multiselect. Check the links below......

I hope these links will help someone for implementing multiselect with Select All Option.

1. https://dojo.telerik.com/IWeXUtos/2

2. https://dojo.telerik.com/UpAFIdEx

3.https://dojo.telerik.com/AGAZonev

4. https://www.c-sharpcorner.com/article/implement-dropdown-multiselect-using-kendo-ui-multi-select-in-asp-net-mvc5/

5. https://demos.telerik.com/kendo-ui/grid/filter-multi-checkboxes

6. https://dojo.telerik.com/orOfikAC

7. https://dojo.telerik.com/oPakUgok

8. https://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/selection/select-deselect-all-items?_ga=2.18171376.834575480.1587874582-302334077.1576491433

 

[Britto]

I have found this stack over flow link for kendo multiselect with select all checkbox:

https://stackoverflow.com/questions/40524347/kendo-ui-multi-select-drop-down-with-filter-and-select-all-options

[Joabe]

Thanks!