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.
- 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?
- 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.