Multi-Select with Checkboxes Plugin

Thread is closed for posting
57 posts, 1 answers
  1. Kasey
    Kasey avatar
    9 posts
    Member since:
    Apr 2012

    Posted 04 Dec 2012 Link to this post

    I hacked together a Kendo plugin that uses the drop down UI (and associated styling), does multi select using checkboxes, and is bindable against a Kendo MVVM view model. A multiselect drop-down is a huge gap in the Kendo Web toolkit, so I figured it might be useful to others as well.

    Fiddle is here: http://jsfiddle.net/bDvkQ/

    The reason for using check boxes is so that the user may select many items in one pass. The default behavior of other types of multi-select drop-downs (e.g. Chosen) requires 2*n clicks for n selections; one click to open the drop down, and a second click to make a selection, then the popup closes again. This is fine for infrequently used forms, but when the user hits the same form dozens of times a day, minimizing user clicks is important. This drop-down requires n+2 clicks for n selections.

    This could benefit from Select All and Clear actions as well, but I ran out of time. Feel free to hack on this further to suit your needs. As-is, no warranties, and all that.

    Kasey
  2. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 05 Dec 2012 Link to this post

    Hello Kasey,

     
    Thank you for the sharing. The implementation looks very well and the widget can be very helpful for those who need multi-select component. I updated your Telerik points, because of the sharing.

    As a side note, I just want to mention that the "multi-select" widget is planned for the next (Q1 2013) release of KendoUI.

    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. Kendo UI is VS 2017 Ready
  4. Kasey
    Kasey avatar
    9 posts
    Member since:
    Apr 2012

    Posted 05 Dec 2012 Link to this post

    Thanks for the points!

    I'd much rather have the official Kendo control, and I'll be looking forward to its release.

    :-)
  5. Kevin
    Kevin avatar
    1 posts
    Member since:
    Jun 2010

    Posted 19 Dec 2012 Link to this post

    Whoops, posted this to the wrong thread.  Can you delete this post..?
  6. Sumith Jayasuriya
    Sumith Jayasuriya avatar
    25 posts
    Member since:
    Jan 2010

    Posted 19 Dec 2012 Link to this post

    How or where can I add an optionLabel for this workaround? 

    Thanks
  7. Kasey
    Kasey avatar
    9 posts
    Member since:
    Apr 2012

    Posted 19 Dec 2012 Link to this post

    Here is a fork with the option label.

    http://jsfiddle.net/xgVpX/

    However, there are still a lot of things missing from this example.

    • Select/Clear All buttons
    • Clicking text should also toggle the text box
    • Auto-resize when data-bound (still a mystery why the drop-down list does not do this)
    • Change icon to differentiate between this and a normal drop-down
    • Accessor should return an observable array, otherwise Kendo framework converts array with single value to (non-array) plain value in bound view model
    • value function should set checkbox values even when input array is empty (equivalent to clearing all checkboxes)
    • when value is changed (through value function or popup close event), this should trigger the change event on kendo control (to update MVVM model) and it's original element (in case any other event listeners are attached to the input element)
  8. Sumith Jayasuriya
    Sumith Jayasuriya avatar
    25 posts
    Member since:
    Jan 2010

    Posted 19 Dec 2012 Link to this post

    Kasey,

    Thanks for the quick reply it worked, but the only issue I have is that the optionLabel is being added to the list of selection options.  Is there a way to not include it in the selectlist?

    Other than that great work around!
  9. Kasey
    Kasey avatar
    9 posts
    Member since:
    Apr 2012

    Posted 19 Dec 2012 Link to this post

    Ok, the drop-down list makes a new LI element for the option label, which is not desired for multi-select. Try this instead.

    http://jsfiddle.net/MNqaT/

    I can't really devote any more time to this, so good luck with future changes.

    Kasey
  10. Sumith Jayasuriya
    Sumith Jayasuriya avatar
    25 posts
    Member since:
    Jan 2010

    Posted 19 Dec 2012 Link to this post

    Kasey,

    Works perfect.  Thanks for taking the time, but like you I'm hoping Telerik comes out with this functionality soon.  I would think its a very common scenario.

    Thanks again!
  11. Ron DeFreitas
    Ron DeFreitas avatar
    26 posts
    Member since:
    Apr 2010

    Posted 02 Feb 2013 Link to this post

    Found something useful missing from this example, and that setting the value of the underlying input field for those using form submission.

    This version includes the fix:
    http://jsfiddle.net/MNqaT/19/

  12. Tim Harker
    Tim Harker avatar
    12 posts
    Member since:
    Jul 2009

    Posted 19 Feb 2013 Link to this post

    Georgi Krustev (Telerik team) -

    When is the official release happening for Q1 2013?  Do you have a date?

    Thanks!
  13. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 20 Feb 2013 Link to this post

    Hello guys,

    The official release is slated for the second half of March, while a public Beta release (including the new Kendo UI Web widgets) is due in the middle of next week. I encourage you to try it out and share your feedback with us, which will help us polish the multi-select widget for the formal release in March.

    Best regards,
    Sebastian
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Ron DeFreitas
    Ron DeFreitas avatar
    26 posts
    Member since:
    Apr 2010

    Posted 25 Feb 2013 Link to this post

    Hi Sebastian.

    Where will the Beta be announced?
  15. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 25 Feb 2013 Link to this post

    The Beta will be announced by the end of the day tomorrow, Ron.

    Best regards,
    Sebastian
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  16. Ron DeFreitas
    Ron DeFreitas avatar
    26 posts
    Member since:
    Apr 2010

    Posted 25 Feb 2013 Link to this post

    Thanks for the update Sebastian.

    I'm looking forward to trying it out.
  17. Robert
    Robert avatar
    35 posts
    Member since:
    Feb 2012

    Posted 26 Feb 2013 Link to this post

    I have not looked at the beta being released but I had however created my own extension.
    It is based on my own requirments and built on 2012.3.1114  which I know needs a tweak for the latest version of 2012.3.1315.
    This has taken quite some time to implement and I hope that the Telerik devs can take some of the ideas forward as I would love to have simlar functionality built into the new multi-select for Kendo.  Meaning I can then delete mine :)

    http://jsfiddle.net/draunkin/kfQDg/14/

    Let me know what you think or any questions you have
  18. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 28 Feb 2013 Link to this post

    Hello Robert,

     
    Thank you for your input and for the jsFiddle demo. We decided to take a different approach where selected values are shown as tags. Thus the end user is able to see what is selected and modified it with ease. Hence the widget will not use checkboxes as the suggested demo. The MultiSelect widget uses <select multiple> element and it also allows to filter the list.

    Kind 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!
  19. Ron DeFreitas
    Ron DeFreitas avatar
    26 posts
    Member since:
    Apr 2010

    Posted 28 Feb 2013 Link to this post

    Georgi,

    I'm really happy with the implementation direction you guys went with.

    There is, however, one issue I noticed in the download...   when constructing the float wrapper div, the BETA download uses the class floatWrap instead of k-floatwrap

    This occurs in both the kendo.all.min.js and the kendo.multiselect.min.js
  20. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 28 Feb 2013 Link to this post

    Hello Ron,

     
    I am glad to hear that you are happy with the chosen direction.

    This is a known issue, which we addressed and the widget will use the correct css class for the official release of Kendo UI. Thank you for the involvement.

    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!
  21. fretje
    fretje avatar
    10 posts
    Member since:
    Dec 2012

    Posted 31 May 2013 Link to this post

    I made 2 more changes to the last version from Ron DeFreitas:

    1.  You can now select a checkbox by clicking on the label as well.
    2.  The control now works on a <select multiple="multiple"> to be consistent with the official kendo ui multiselect.
    Here's the fiddle.

    I still think there's a need here for a control like this, as the official multiselect doesn't play very well on mobile (for one thing). Because you can also type something in the control, the keyboard on mobile comes in front of the select list so you can't easily select anything anymore (try it and you'll understand what I mean).
    Also what Kasey said in the first post: this control with checkboxes works faster as you only have to click n+2 times in stead of 2*n times in the official one.

    I hope telerik will include this as well in the official release one day, either as a separate control, or as an option on the existing multiselect.

  22. fretje
    fretje avatar
    10 posts
    Member since:
    Dec 2012

    Posted 11 Jun 2013 Link to this post

    I updated to the latest version of KendoUI (2013.1.514) but now there's a bug in my latest update of the multiselectbox.
    I have a multiselectbox on a form with an optionlabel specified. When the form is posted back, the first option is sent back as selected option for that input, in stead of an empty value.

    I'm not sure on how to solve this. Anybody has some more insight. This would be greatly appreciated!
  23. Kasey
    Kasey avatar
    9 posts
    Member since:
    Apr 2012

    Posted 11 Jun 2013 Link to this post

    @fretje,

    I also tried to upgrade, but ran into different problems. In my particular case, I figured out that the binding code was changed in a way that breaks this drop-down-list-based multi-select control. Specifically, I was trying to set a view model value to an array of simple ids like [1,2,3] bound to my control. But the new code expects an object array like [{Id: 1}, {Id: 2}, {Id: 3}] and throws. However, it works fine if you set the Kendo multi-select control to an array of simple values. So, it's pretty annoying that they broke this for me but allow it to work in their widget.

    I ultimately had to abandon the upgrade until such time that a 1-pass multi-selection is added to the framework, either with checkboxes or Ctrl-clicking multiple items in one pass. This is a requirement for my users which the new Kendo widget does not meet, and therefore I can't use it.

    Kasey
  24. fretje
    fretje avatar
    10 posts
    Member since:
    Dec 2012

    Posted 12 Jun 2013 Link to this post

    Okay, I found a solution. I'm not sure if it's the right way to do this, but my problem is gone.

    After some research I found that the value of the select was wrongly set to the first item of the list after the widget was databound, so when catching that event and setting the value again there, the problem was solved.

    I added the following code right after the init of the dropdownlist in the MultiSelectBox widget:

        me.bind('dataBound', function() {
            me.element.val(me.value());
        });

    Regards,

    fretje
  25. Kasey
    Kasey avatar
    9 posts
    Member since:
    Apr 2012

    Posted 12 Jun 2013 Link to this post

    @fretje,

    That looks like it might solve my issue too. Thanks.

    Kasey
  26. Dave
    Dave avatar
    17 posts
    Member since:
    Jan 2009

    Posted 09 Aug 2013 Link to this post

    Is it possible to have more than one on a page?

    I have the following markup and code and only the first item in the markup is initialized, I can switch the order in the html and the other will show.

    <div id="ViewModelModel" class='dealer-filter'>
        <select id="oemFilterItems"  multiple="multiple" data-role="multiselectbox" data-option-label="OEM..." data-text-field="Name" data-value-field="ID" data-bind="source: oemFilterItemSource, value: oemFilterItems" />
        <select id="networkFilterItems"  multiple="multiple" data-role="multiselectbox" data-option-label="Network..." data-text-field="Text" data-value-field="Value" data-bind="source: networkFilterItemSource, value: networkFilterItems" />
    </div>
    01.<script>
    02.    var viewModel = kendo.observable({
    03.        networkFilterItems: [],
    04.        networkFilterItemSource: new kendo.data.DataSource({
    05.            data: [
    06.                { Value: 1, Text: "Facebook" },
    07.                { Value: 2, Text: "Twitter" },
    08.                { Value: 3, Text: "Google" },
    09.                { Value: 4, Text: "Blooger" }
    10.            ]
    11.        }),
    12.        oemFilterItems: [],
    13.        oemFilterItemSource: new kendo.data.DataSource({
    14.            transport: { read: { url: "/Reputation/Reputation/OEMListFiltered", dataType: "json" } },
    15.            schema: { data: "Data" }
    16.        })
    17.    });
    18.     
    19.    $(function () {
    20. 
    21.        kendo.bind($("#ViewModelModel"), viewModel);
    22.    });
    23.</script>
  27. Jason Mobley
    Jason Mobley avatar
    6 posts
    Member since:
    Nov 2009

    Posted 03 Oct 2013 Link to this post

    Hi Robert,

    I really like this implementation, it best represents the functionality I've been looking for with built-in Select All functionality and a count of selected items. Implemented as-is I've experienced a couple of issues and I wondered if you could provide any insight into these. First in the latest version of kendo (all) I get the following error: Uncaught TypeError: Object [object Object] has no method '_valueOnFetch'. This seems to happen in the kendo framework itself where it interprets the nodes as numbers and not as li items. The second error, which doesn't throw any kind of exception is that after selecting all/deselect all the checkboxes no longer show checked. The values are selected correctly, but it appears a toggle count may be off by 1. The one difference between my implementation and your JSFiddle example is that my control is loaded dynamically via AJAX. I was wondering if you had encountered either of these issues or could offer some insight as to why they might be happening. Also if you have any recent enhancements I'd love to see them.

    Thanks
    Jason
  28. Robert
    Robert avatar
    35 posts
    Member since:
    Feb 2012

    Posted 04 Oct 2013 Link to this post

    Hi Jason Mobley,

    Thank you for your feedback, appreciate knowing it suits your needs.
    This jsfiddle and my custom extension runs on Kendo 2012.3.1114.  It has not yet been updated to the latest version and I realise when I tested an upgrade that there are breaking changes.  I do intend to spend time to do it as I am running behind on running the latest kendo which is something I'd like to change.  However it has not been my priority to date.  I'll take a quick look at the points you've made. If they prove to take too long to fix I will be parking it until I have time.

    Cheers,
    Rob.
  29. Robert
    Robert avatar
    35 posts
    Member since:
    Feb 2012

    Posted 21 Oct 2013 Link to this post

    Hi Jason,

    This jsFiddle uses the new version of kendo. I have not tested this extensively, but everything I've seen so far indicates is works as per the previous version I submitted.

    http://jsfiddle.net/draunkin/8caNL/2/

    Cheers,
    Rob.
  30. Jason Mobley
    Jason Mobley avatar
    6 posts
    Member since:
    Nov 2009

    Posted 21 Oct 2013 Link to this post

    Rob,

    This is working perfectly. This extension is going to be a big help for our project. Thanks again for your help and insight!

    Regards
    Jason
  31. Landon
    Landon avatar
    66 posts
    Member since:
    Nov 2010

    Posted 28 Oct 2013 Link to this post

    Hi Rob,

    This is probably a bit of a long-shot, but would you happen to have an example of how to apply this extension to a Razor/CSHTML Kendo Multiselect box?

    I'm trying duplicate the functionality of the old RadControls Multiselect and your implementation would work perfectly.

    Thanks,
    Landon
Back to Top
Kendo UI is VS 2017 Ready