Multiselect with checkbox.

2 Answers 3237 Views
MultiSelect
ALESSIO
Top achievements
Rank 1
ALESSIO asked on 20 Jun 2018, 08:55 AM
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 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 21 Jun 2018, 03:37 PM
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.
Dilip
Top achievements
Rank 1
commented on 12 Feb 2019, 02:16 PM

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
Top achievements
Rank 1
commented on 12 Feb 2019, 02:18 PM

In addition , I want selected items to be displayed as well, like as shown in image
Dilip
Top achievements
Rank 1
commented on 12 Feb 2019, 02:19 PM

Also, I want to display checked items in dropdown in similar fashion (refer image)
Dilip
Top achievements
Rank 1
commented on 12 Feb 2019, 02:20 PM

Sorry, due to some issue image was not attached
Ivan Danchev
Telerik team
commented on 14 Feb 2019, 12:52 PM

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.
Dilip
Top achievements
Rank 1
commented on 19 Feb 2019, 07:36 AM

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
Telerik team
commented on 20 Feb 2019, 03:59 PM

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.
John
Top achievements
Rank 1
commented on 04 Apr 2020, 03:05 PM

I use
John
Top achievements
Rank 1
commented on 04 Apr 2020, 03:06 PM

I used your modified example. Works great and just what I was looking for. Thank you.
Britto
Top achievements
Rank 1
commented on 21 Apr 2020, 01:34 PM

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
Telerik team
commented on 23 Apr 2020, 12:37 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Britto
Top achievements
Rank 1
commented on 23 Apr 2020, 01:37 PM

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.
0
Britto
Top achievements
Rank 1
answered on 26 Apr 2020, 04:32 AM

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
Top achievements
Rank 1
commented on 26 Apr 2020, 06:05 AM

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
Top achievements
Rank 1
commented on 17 Jun 2020, 08:19 PM

Thanks!
Tags
MultiSelect
Asked by
ALESSIO
Top achievements
Rank 1
Answers by
Neli
Telerik team
Britto
Top achievements
Rank 1
Share this question
or