Set RadListBox Max Height

2 posts, 0 answers
  1. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 25 Apr 2011 Link to this post

    Hello,

    As do many, I use a RadListBox inside of a RadComboBox's ItemTemplate to implement multiple selections.

    One thing I want to provide is a maximum height of the RadListBox, similar to a RadComboBox.

    Purpose:
    For site-wide consistency, at max the RadListBox can be 170px high.  If there are fewer rows than fill up the space, then the height should be automatic.

    I'm not setting a height on the RadComboBox and/or RadListBox so that they render in their unaltered size.  In the RadComboBox OnClientOpened event, I capture the size of the rcbSlide, which is the only element that I see that holds the actual height of the dropdown when it's expanded.  If the value is greater than 170px then we need to limit the height by resizing the RadListBox and the rcbSlide.  (I tried OnClientOpening, but the height hasn't been set at that point...)

    Here is the JavaScript that I have so far.   At this point it's setting the height of the dropdown, but the overflow scrollbars do not appear on the RadListBox as I'd expect...

    function multiSelect_RadComboBox_Opened(sender) {
        var height = sender.get_dropDownElement().parentElement.style.height;
        if (height.length > 0) {
            height = height.substring(0, height.length - 2);
            if (height > 170) {
                sender.get_dropDownElement().parentElement.style.height = '170px';
                var items = sender.get_items();
                items.getItem(0).findControl('rlbItems').get_element().style.height = '170px';
            }
        }
    }

    Thoughts??
    Thanks!
    Thad



  2. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 25 Apr 2011 Link to this post

    Dang,

    I hate it when I figure things out right after posting.  I suppose this is because writing a post makes me think from all angles so I don't sound too ignorant!  :)

    Anyway, here is the JavaScript that works for me - documented for the archives.  I basically just had to target the inner div with class rlbGroup to and reset the overflow property to auto after resizing it in order for the div to be clued in that I was interested in seeing the scroll bars. 

    function multiSelect_RadComboBox_Opened(sender) {
        /// <summary>When a RadComboBox is opened, limit the dropdownheight to 170px.</summary>
     
        // will return a string like 123px
        var height = sender.get_dropDownElement().parentNode.style.height;
     
        if (height.length > 0) {
     
            // remove the px
            height = height.substring(0, height.length - 2);
     
            if (height > 170) {
                // Find the RadListBox inside of the RadComboBox ItemTemplate
                var rlbGroup = sender.get_items().getItem(0).findControl('rlbItems').get_element().children[0];
     
                // Set the height and overflow styles on the inner div with class rlbGroup
                rlbGroup.style.height = '170px';
                rlbGroup.style.overflow = 'auto';
            }
        }
    }

    I've added a screen shot showing it working. Happy times!
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top