Trying to change the MultiSelect template & functionality

[Jim]

Hello All,

I am working on customizing the MultiSelect to function a little differently for a slightly older (less Facebook savvy) crowd. I am trying to duplicate the functionality of the following jQuery plugin:
http://www.erichynds.com/examples/jquery-multiselect/examples.htm

Note, the check all / uncheck all is not necessary... I basically want to show the list of check-boxes next to each item, giving a visual indication that items can be toggled on and off.

Adding the check-boxes is a simple task accomplished via templates, and keeping the list open is easy with autoClose: false... but I have a few problems...

1. When an item is selected, it is removed from the list.  I can't find any documentation on how to prevent this
2. Once issue 1 is taken care of, I need to check the check-box and make a second click of the list item deselect said item.  I assume some function bound to the select event will be needed to accomplish this, but I'm not that far along yet.
3. Once 1 & 2 are complete, I will need to pre-select the checkboxes.  I am likely going to jump to an MVVM model for this functionality, but I was trying to keep this simple until I had a proof of concept that the Kendo controls could do what I need.

Here is where I'm at so far:
http://jsbin.com/reluti/2/edit?html,js,output

Doe anyone have any insight on the two issues above?

Thanks,
James Carpenter

[Jim]

Okay... after running down this path for a while... I have come to find that using actual checkboxes and labels is a TERRIBLE idea... don't do this.

I went down the path of reading the source code for the multi-select, only to find that I was "locked" out of all the methods I need. (they are all private, so I don't want to call, modify, or mess with them in any way to maintain future compatibility)

What I did discover is that the items in the list are all still there but hidden... so I can just show them in the change and open events.

I also discovered how the MultiSelect uses its dataSource and the index of the item in the list in the internal _select event... so I was able to do the same in my select event handler to make the click work like a toggle rather than "add to selected list" only. (see example code in jsbin below)

Long story short... I am much closer than I was, and I think I not doing anything too awful in my code thus far.  However, I still need to accomplish the objectives stated above... so I have moved to a visual model for the checkboxes, using the k-i-tick icon or a fake k-i-blank class declared in the page.
http://jsbin.com/reluti/3/edit?html,js,output

Remaining Problems:

1. The list scrolls to top on click... I assume that this is caused by the re-rendering of the list with each selection.  Can I stop this from happening or do I have to write code to "save scroll position" ... which will look flakey?
2. I still need to be able to preselect the options... again... I just haven't make it that far yet, but I know the code I have will only work if you click the items in the list... as all my code is in the select event handler.

Thoughts on the above? 
Anything I could do to make this cleaner?  I don't love the "unhide" the list items.. as I am basically fighting with the control.

Thanks

[Georgi Krustev]

Hello James,

I would like to clarify some MultiSelect design decisions:

1. The MultiSelect widget is designed to hide selected elements. Based on the length of the visible items, widget updates popup height. This is one of the thing that you cannot prevent as it will require to rewrite some hidden methods.
2. The multiselect will scroll the list to the first visible item, because the selected items will be hidden on select.
   
   

Point (1) cannot be overcome without core rewriting (overwriting some private methods).
Point (2) also cannot be changed and will require to manually scroll back to the last selected item. You can use a private method to accomplish this task, but I strongly suggest use a custom scroll function as private methods can change in future. The side effect of the aforementioned approach is the "list jumping". When the user checks an item the list will jump to first item and then will scroll the selected item. Here is the updated jsBin demo using the private method. I hope this explanation shades some light on your first problem.
Regarding the second one, I suppose that you need to update the tick style when the user deletes/backspace or set value manually. Well, in theory, you will need to loop all rendered items and based on the widget value to check/uncheck the selected/deleted items.

Please note that supporting a custom functionality or widget modification falls out of the standard support service. If you need a further assistance on this, I will suggest you contact our premium support services.

Regards,
Georgi Krustev
Telerik

[Jim]

Thank you for the clarification.  I quickly realized that I was going against the paradigm of the multiSelect, even though the final functionality is identical.

My initial though was to get a little feedback on how I was accomplishing my objective, but I realize that I should have posted this on StackOverflow.

Realizing that I would have to touch a few internal methods/variables as well as create a few of my own, I have switched my approach to creating an extension.  I am attempting to keep this as compatible with the stock multiSelect control as possible.  I am even calling the _select method on selection and just undoing the hide and visibility count decrement.  Hopefully this approach will withstand the test of time as functionality is added to the internal methods.

For anyone who stumbles upon this thread, looking for similar functionality... head on over to GitHub

Here is a demo of this basically working.  I will continue to update the extension as I find bugs in production.
http://jsfiddle.net/jc4rp3nt3r/2E3xR/4/

Thanks,
James Carpenter

[Avinash]

Thanks a ton Jim.....Great..That's what I was looking for..You saved my day...

[Keith]

This looks great.

Would you know how to get this working with AngularJS?

[Jim]

Honestly, I haven't ventured into Angular.js & kendo, sorry.  I don't really know what the difference would be, but I wrote this as a stand-alone addin... so you actually initialize a "kendoMultiSelectCheckBox" rather than a "kendoMultiSelect" (see http://jsfiddle.net/jc4rp3nt3r/2E3xR/4/)

Hopefully, you can just add the library and call the alternate method the same way you would the standard multiselect.

If not, and you get this working... I do have this library on GitHub:
https://github.com/jc4rp3nt3r/kendoMultiSelectCheckBox

So feel free to fork the repo and submit a pull request if you need to modify the plugin.

[Keith]

Thank you Jim.  I figured it out.  

To create a custom widget (i.e, what you did by extending multiSelect)  and make it available with angular's scope you have create a basic directive instead of using kendo-multi-select.  Well, kendo-multiselectcheckbox actually worked but I couldn't work with the data within $scope, at least not until I created a basic directive.

Thank you again, you did a great job.

[Jim]

Awesome, thanks for posting your solution!

I'm hoping to have time to explore the new angular functionality in the near future.