Setting the DropDownWidth on onItemsRequested

[Annie]

Hello,

We would like to make the drop down area wider in order to show the full text of the combo box items.

I have the following code:  (The combo is set to 250px width)

 

 

 

protected void LstAgency_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
    {
        LstAgency.Items.Clear();

        if (e.Context["CustomText"].ToString().Length >= 2)
        {
            data = APIHelper.GetCompanies(e.Context["CustomText"].ToString());

            ShowSmartCombo(e, LstAgency, data, "Name");
        }

        // We want to show the drop down to the width of the longest company name.
        // Use approx. 3 px per character. iLongestName * 3
        LstAgency.DropDownWidth = new Unit(800, UnitType.Pixel);
    }

But the DropDownWidth does not change. I have stepped through the code to make sure it's setting the DropDownWidth, but nothing happening.

Is it because we can't change the width of the drop down in the onItemRequested event?

Thanks,
Annie

 

[Cori]

Hello Annie,

That is correct, you can't change the control's DropDownWidth because the ItemsRequested is called using a callback, not a postback. So you'll need to change the DropDownWidth in the client-side event of ItemRequested. Like so:

function OnClientItemsRequested(sender, eventArgs)
 {
   $telerik.$(sender.get_dropDownElement()).width("800px");
 }

I hope that helps.

[Annie]

Hi Cory,

Thank you for the prompt reply.  But the code is not working fo rme.

My RadComboBox Markup:

function

 

OnClientItemsRequested(sender, e) {

 

$telerik.$(sender.get_dropDownElement()).width(

"1200px");

 

}

<

 

telerik:RadComboBox MarkFirstMatch="true" ID="LstAdvertisers" runat="server" Width="297px"

 

 

Height="200px" AllowCustomText="true" ShowToggleImage="True" ShowMoreResultsBox="false"

 

 

EnableLoadOnDemand="true"

 

 

EnableAjaxSkinRendering="true"

 

 

AutoPostBack="true"

 

 

OnClientItemsRequested="OnClientItemsRequested"

 

 

OnClientItemsRequesting="OnClientItemsRequesting"

 

 

OnItemsRequested="LstAdvertisers_ItemsRequested"

 

 

OnSelectedIndexChanged="LstAdvertisers_SelectedIndexChanged">

 

 

</telerik:RadComboBox>

I stepped through the code, and the code is executing, but the size of the drop down is not changing.
Any thoughts?

Thank you so much!

Annie

 

[Shinu]

Hello,


I found a code library regarding how to set the DropDownWidth according to content. I hope this would help you in achieving the required functionality.
Dynamic Dropdown width


-Shinu.

[Annie]

HI Shinu,

Thanks for the reply, but the link is not working.   Could you please see if you can find a working link for me?

Thank you so much,

Annie

[Annie]

I've also tried the suggestion in this post :

http://www.telerik.com/community/forums/aspnet/combobox/dynamic-width-for-combo-box.aspx

But once the items are populated from the server, the combo box is set back to the original width.

I solved the issue by overwritting the default style sheet:

 

/* OT 2310 Overwrite default style to enable the dynamic width of the drop down box */

 

 

.rcbSlide div

 

{

 

min-width: 297px !important;

 

 

max-width: 2000px !important;

 

 

width: auto !important;

 

 

white-space:nowrap;

 

}

 

.rcbWidth

 

{

 

white-space:nowrap !important;

 

 

width : 98% !important;

 

}

 

.rcbList

 

{

 

position: relative !important;

 

 

width: auto !important;

 

}

Annie

[Cori]

Here is the correct link for the Dynamic DropDownWidth code library:

http://www.telerik.com/community/code-library/aspnet-ajax/combobox/dynamic-dropdown-width.aspx