[Solved] Cannot set Dropdown height from clientside.

[Jason]

I am populating a Combobox via an AJAX post method using the DataBind method, and I discovered some strange behaviour - the dropdownlist height is not re-setting after the DataBind. This only occurs under certain scenarios, described below.

The ComboBox is declared in my view as follows - I am binding to a simple SelectList that has only one item in it ("Select Project..."):

@(Html.Telerik()

.ComboBox()

.Name("ddlLocations")

.Effects(fx => fx.Toggle())

.BindTo(Model.PlaceHolderList)

.SelectedIndex(0)
      .Enable(false)

.HtmlAttributes(new { style = "vertical-align:middle; width:100%" })             

)

I have a javascript function that fires on change of another ComboBox, which executes the following code:

// Load Locations

var locationsCombo = $("#ddlLocations").data('tComboBox');

 

$.post

(

    '@Url.Action("GetProjectLocations", "Timesheet")',

    {

        projectID: selectedProjectID

    },

    function (data) {

        locationsCombo.dataBind(data);

        locationsCombo.select(0);
          

            if (selectedProjectID != null && selectedProjectID > 0) {
                  locationsCombo.enable();
                  $('#OpenddlLocationsDropDown').removeClass('t-state-disabled').removeAttr('disabled');
                  $('#CloseddlLocationsDropDown').removeClass('t-state-disabled').removeAttr('disabled');
              }
              else {
                  locationsCombo.disable();
                  $('#OpenddlLocationsDropDown').addClass('t-state-disabled').attr('disabled', 'disabled');
                  $('#CloseddlLocationsDropDown').addClass('t-state-disabled').attr('disabled', 'disabled');
              }

    },

    "json"

);

This works for the most part, but if the first ajax update populates the Locations Combo with a shorter or longer list of items then the second update, the list height will not be set properly. This is shown in the screenshots below.

I have discovered via Firebug that the problem is in the height style element of the dropdown div - the height is set to 100% (See below). If I modify the style in Firebug to remove the height element from the style entirely, the list displays properly.

<div class="t-popup t-group" style="display: block; overflow: auto; width: 388px; height: 100%;">

I tried adding a clientside event to the view for the OnOpen event of the ComboBox - see below:

.ClientEvents(events => events.OnOpen("LocationsOpen"))

///////////////////////////////

function LocationsOpen(e) {
    $("#ddlLocations").data('tComboBox').dropDown.$element.css('height', '');
}

And by stepping through the code in Firebug and inspecting the elements, I can see that this code does remove the height element, *but*, once the code goes into the Telerik javascript files, the "height:100%" element gets inserted right back in.

I have tried the solution proposed in the combobox-losing-height-after-databind thread with no success  - setting the height in the callback function does nothing (it still gets over-written with "height:100%"), clearing the height element does nothing.

I have ensured that the ComboBox has more than 10 elements in it, as per the comments in the can-i-change-the-width-of-the-dropdown-list thread, with no behaviour change.

I can set a specific pixel value for the height of the dropdown in the OnOpen event, but having to calculate the list height clientside at runtime seems like it is not the best solution.

I have tried using the built-in "CascadeTo" functionality, which works great, except that I have to cascade one combobox to four others, and I have not been able to get this to work with cascading to any more than one ComboBox. Perhaps there is a way to do this, which may solve all my problems, but the fact that the height element gets set to 100% all the time seems like it may be an issue to me.

Please provide some suggestions on how to resolve or work around this issue.

Thanks,
Jason

[Dimo]

Hello Jason,

You can change the dropdown height client-side, however, you need to modify the height style of the parent of the element you have been looking at.

// will make the dropdown 100px high
$("#ComboBox").data("tComboBox").dropDown.$element.parent().height(100)

// will make the dropdown expand as much as needed to show all items without a scrollbar
$("#ComboBox").data("tComboBox").dropDown.$element.parent().height("")

Kind regards,
Dimo
the Telerik team

[Jason]

Thanks Dimo - that worked great! One more question - is it possible to use the built-in CascadeTo functionality to more than one ComboBox? For example, having three or four ComboBoxes reload their data on selection of an item in one ComboBox? If so, could you provide an example of the syntax?

Thanks again,
Jason

[Dimo]

Hello Jason,

CascadeTo works with only one related ComboBox.

Greetings,
Dimo
the Telerik team