Vertical Scrolling and Control Over Height

[Kevin]

I was fiddling around with the demo and discovered one can set a fixed height on the div containing the selected list items and set overflow to auto to enable vertical scrolling.  This allows rudimentary control over the height of the selections area.

Trouble is, the new item selection drops down when the scrollbar on the containing div is clicked.  Also the div does not scroll down to the last selected item as items are selected.  If we could use the scrollbar without the item selection dropping down and have the div auto-scroll down to the last selected item we'd have a solution!

It'd be awesome to have an example or two controlling demonstrating this, or a similar solution to control how the MultiSelect grows in height.

[Kevin]

I've found that using max-height and overflow:hidden on the UL gives a lot of control over this. 

By using focusin and focusout on the containing div, I can detect when to expand / shrink the UL via max-height.

The next challenge is to animate the max-height changes and not open the dropdown until the UL has achieved its full max-height.  There must be a way to intercept events that cause the dropdown to open and cancel those events so I can programmatically open the dropdown after the max-height expand animation has finished.

[Dimo]

Hi Kevin,

The logic of preventing the dropdown from opening is tricky - how will you distinguish between the case when the user wants to go through the already selected items and the case when the dropdown should open?

Animation of the widget's size can be achieved with standard jQuery methods.

What we may implement in the future is to support automatic scrolling to the focused item in the <ul> when using keyboard navigation.

Regards,
Dimo
the Telerik team

[Kevin]

Successfully customized the MultiSelect to do what I want.  The important code is added directly to the end of the MultiSelect init function, right before kendo notify:

$(that.wrapper).focusin(function(e) {
                nextMultiSelectZIndex++;
                $(that.wrapper).css('z-index',nextMultiSelectZIndex);
                $(that.wrapper).children().eq(0).css('z-index',nextMultiSelectZIndex);
                $(that.wrapper).css('max-height','400px');
                $(that.wrapper).children().eq(0).css('max-height','400px');
                $(that.wrapper).css('width','350px');
                $(that.tagList).animate( { 'max-height':'400px' }, 400, function () {
                    that.options.openable = true;
                    if (!that.options.preventOpenOnDelete)
                        that.open();
                });
            });

            $(that.wrapper).focusout(function() {
                that.options.openable = false;
                $(that.tagList).animate( { 'max-height':'32px' }, 400, function() {
                    $(that.wrapper).css('width','150px');
                    $(that.wrapper).css('z-index','0');
                    $(that.wrapper).css('max-height','33px');
                    $(that.wrapper).children().eq(0).css('z-index','0');
                    $(that.wrapper).children().eq(0).css('max-height','33px');
                });
            });

Combined with some CSS to set absolute positioning to the wrappers and set overflow:hidden on the tag list, and custom options for controlling when the widget can open (used to cancel default open on mousedown when focused) you can successfully expand/shrink the MultiSelect and have it overlay other elements when it is expanded. 

Works great!   Thanks for creating such an awesome widget, it was very simple to customize!

[Dimo]

Hello Kevin,

I am glad that you have managed to customize the widget to suit your needs and thank you for the positive feedback.

By the way, you can move all inline styles to two external CSS rules and apply the styles via custom CSS class set to the widget wrapper.

Greetings,
Dimo
the Telerik team