Setting the DropDownWidth on onItemsRequested

7 posts, 0 answers
  1. Annie
    Annie avatar
    12 posts
    Member since:
    Jul 2010

    Posted 07 Oct 2010 Link to this post

    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

     

  2. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 07 Oct 2010 Link to this post

    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.
  3. Annie
    Annie avatar
    12 posts
    Member since:
    Jul 2010

    Posted 07 Oct 2010 Link to this post

    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

     

  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Oct 2010 Link to this post

    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.
  5. Annie
    Annie avatar
    12 posts
    Member since:
    Jul 2010

    Posted 08 Oct 2010 Link to this post

    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
  6. Annie
    Annie avatar
    12 posts
    Member since:
    Jul 2010

    Posted 08 Oct 2010 Link to this post

    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
  7. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 12 Oct 2010 Link to this post

    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
Back to Top