Kendo UI MultiSelect with CheckBox

8 posts, 0 answers
  1. Krishnasamy
    Krishnasamy avatar
    2 posts
    Member since:
    Jun 2014

    Posted 17 Jul 2014 Link to this post

    I'm Using Kendo UI MVC.I need a MultiSelect with checkbox for each item to allow me select multiple of items.I need same layout for existing kendo UI multiselect.

    Could you please share me the sample example?
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 18 Jul 2014 Link to this post

    Hello Krishnasamy,

    Kendo UI MultiSelect is designed to create a tag on selection and hide the corresponding list item. Because of this behavior, there is no feasible way to add checkbox into list items and check/uncheck them. Will setting the autoClose option to false cover your requirement? Thus when user selects items, the popup will stay opened.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Krishnasamy
    Krishnasamy avatar
    2 posts
    Member since:
    Jun 2014

    Posted 30 Jul 2014 in reply to Georgi Krustev Link to this post

    Hi Georgi,

       Thanks for your valuable information.As per client requirement MultiSelect with checkbox for each item to allow them to select multiple of items.Is there any other way to achieve this functionality.

    Thanks,
    Krishna.K
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 31 Jul 2014 Link to this post

    Hello Krishnasamy,

    As I mentioned MultiSelect with autoClose: false option will allow multiple selection without closing the popup. Adding checkboxes to the widget would not be possible.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Piyush
    Piyush avatar
    1 posts
    Member since:
    Nov 2015

    Posted 15 Feb in reply to Krishnasamy Link to this post

    Thanks Georgi and Krishnasamy,

    Thanks for sharing this ,it is really helpful.Auto-close is working for me .
    Looks like i am able to achieve all using multiselect single tag mode, just have one more requirement here.
    Is it possible to toggle between selected span and search box,Telerik provide us selected and search both at a time but i need to toggle.
    Means when user is typing he should get entire space and once he done then he should get list of selected items.

  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 16 Feb Link to this post

    Hello Piyush,

    I answered to the support thread opened on the same subject. I would like to ask you to keep the discussion in only one thread to avoid duplication. Thank you in advance.

    Here is a quote of the answer:

    The MultiSelect widget is designed to display a single tag or multiple tags all the time. The purpose of this behavior is to show the selected items all the time.

    I am afraid that the required behavior is not supported and that there is no feasible workaround that would be able to suggest.


    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. Calvin
    Calvin avatar
    42 posts
    Member since:
    Jul 2011

    Posted 08 Jul Link to this post

    It would be very useful (to me) if the Kendo MultiSelect widget supported the notion of checkboxes on each item and also optionally on each tag with optional header checkboxes for both all items and all tags. Perhaps this can be done with templates already. But when I tried it a couple years ago, I couldn't get it to work.

     

    The PrimeNG MultiSelect widget (http://www.primefaces.org/primeng/#/multiselect) has checkboxes on each item and a checkbox in the header to select or unselect all items. (Ideally the header checkbox should select only already-fetched records when server-side filtering is enabled.) But it doesn't also have checkboxes on the tags or a tag-header checkbox.

     

    The Wijmo 5 MultiSelect widget (http://demos.wijmo.com/5/Angular2/Explorer/Explorer/#/input/multiselect) has checkboxes on the items but not in the item header or in the tags or tag header.

     

    The advantage of checkboxes in the tags is that the previously selected item can remain visible even while it's not checked/selected/applied/enabled ... whatever the semantics. Because the tags remain visible, they're very easy to re-select. The header tags make it much easier to select all, all-but-one (or a few), or none (un-select all), invert selection, etc. when there are many items to select.

     

  9. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 13 Jul Link to this post

    Hello Calvin,

    The 'checkbox' template is supported by the MultiSelect widget since Q1 2015. The required functionality is demonstrated in this how-to demo:

    http://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/checkbox-item-template
    http://dojo.telerik.com/@ggkrustev/uMUJa (AngularJS)
     
    (note that this is a custom implementation that be 'tweaked' in some cases to handle the specific business case)

    The tag template also can be used to output 'checkbox' input:

    http://dojo.telerik.com/@ggkrustev/aNEcO

    As to the "select all" functionality, I would suggest you check the approach implemented in this how-to demo:

    http://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/select-all-values-with-one-selection

    I hope this address all the issues mentioned in your last message.

    Regards,
    Georgi Krustev
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready