[Solved] ComboBox losing height after databind

[Beth]

Hi,

I am having issues with a ComboBox loosing it's height attribute setting after data is bound to the control in an ajax call.  See below for details.

I have the following control:

@(Html.Telerik().ComboBox().Name(

"PIDId")

 .Filterable(f => f.FilterMode(AutoCompleteFilterMode.StartsWith))

 .AutoFill(true)

 .DropDownHtmlAttributes(new { style = "height:100px" })

 .BindTo(ViewBag.PidList)
.HtmlAttributes(new { style = "width: 400px;" })

 .HighlightFirstMatch(true))

You can see that I am setting the height to 100px, but when the page loads initially the combo box is empty because it waits for other controls to be set before binding to data.  When the appropriate data is set, data binding occurs in the following ajax call (I've bolded the line of interest):

        var ddVendors = $('#VendorId').data('tComboBox');
        var ddDepts = $('#DeptId').data('tComboBox');
        var ddPids = $('#PIDId').data('tComboBox');
        $.ajax({
            url: "/OrderRecordList/GetDvnData",
            data: "deptId=" + ddDepts.value() + "&vendorId=" + ddVendors.value(),
            success: function (data) {
                //populate pids dropdown
                ddPids.dataBind(data.Pids);
                ddPids.select(0);

 

                //Update edit PoVendorMins section
                MinPoQty = data.PoVminQty;
                MinPoAmt = data.PoVminAmount;
                $('#PoVendorMinId').val(data.PoVendorMinId);
                $('#SpanMinPoQty').text(data.PoVminQty);
                $('#SpanMinPoAmt').text(data.PoVminAmount);
                $('#SpanMinLocQty').text(data.LocMinUnits);
                $('#SpanMinLocAmt').text(data.LocMinAmount);
                $('#ButtonEditPoVendorMin').removeClass('disabled');
            },
            error: function (req, status, error) {
                $.fancybox.hideActivity();
                alert("Sorry! We could not process pids at this time.");
            }
        });

When this call is made and the data is populated in the control, the height attribute is no longer applied.  It gets reset back to the default (ie the height of the dropdown goes from 100px to 200px).  Is there a way to set the height back after that ajax call?

Any help you can give would be greatly appreciated.  Let me know if you need more information or code.

Thanks,
Beth

[Georgi Krustev]

Hello Beth,

Currently on rebind the height of the dropdown will be lost. In order to overcome this issue you will need to set it manually on rebind:

ddPids.dropDown.$element.height(100)

We will further investigate the problem and will try to fix it in one of the next releases.

Regards,
Georgi Krustev
the Telerik team