[Solved] Selected Item Alignment Problem

[Robert]

When I use a template for my dropdown I get a right-alignment on the selected item.

The dropdown is a width of 158px but the dropdown width is 300px to show 2 columns per my template. If I choose an item it will only show "xt wrapping...  but why??" instead of "This is a problem with te"

Anyone know whats going on here?


      <telerik:RadComboBox DataTextField="NAME" DataValueField="ORGANIZATION_ID" ID="cboLeadComp" runat="server" CollapseDelay="100" DropDownWidth="300px" Font-Size="Small"
        HighlightTemplatedItems="True" MarkFirstMatch="True" TabIndex="7" ToolTip="Lead Component"
        Width="158px" EnableLoadOnDemand="True">
        <Items>
          <telerik:RadComboBoxItem Text="This is a problem with text wrapping...  but why??" />
          <telerik:RadComboBoxItem Text="This is a probfas with text wrapping...  but why??" />
        
        </Items>       
        <ItemTemplate>
          <table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
            <tr style="height: 5px">
              <td style="width: 50px; height: 5px;text-align:left">
              <%#DataBinder.Eval(Container.DataItem, "Name")%>
              </td> 
              <td nowrap style="height: 5px;text-align:left">
              <%#DataBinder.Eval(Container.DataItem, "Description")%>
              </td>                       
            </tr>
          </table>
        </ItemTemplate>
        <HeaderTemplate>
          <table style="width: 100%">
            <tr>
              <td style="width: 50px; height: 5px; font-weight: bold;text-align:left">
                Name</td>
              <td style="height: 5px; font-weight: bold;text-align:left">
                Description</td>
            </tr>
          </table>
        </HeaderTemplate>
      </telerik:RadComboBox>

[Yana]

Hi Robert,

Please subscribe to OnClientDropDownClosed event and set the cursor position in its handler like this:

function dropDownClosed(sender, args) {
    var input = sender.get_inputDomElement();
    var range = input.createTextRange();
    range.move('character', 0);
    range.select();
}

Regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Robert]

Thanks Yana...

That seems to work for me.

Robert

[John Fairbanks]

I need to do exactly this, but I am creating the RadComboBox programatically like so:

 

Telerik.Web.UI.RadComboBox ddl = new Telerik.Web.UI.RadComboBox()
{
  ID = "myCombo",
  AllowCustomText = false,
  ShowDropDownOnTextboxClick = true,
  CollapseDelay = 0,
  ExpandDelay = 0,
  MarkFirstMatch = true,
  SortCaseSensitive = false
};

how can I set up this java script modification you suggest in this case?

 

 

 

 

[Yana]

Hello John,

You can subscribe to the client-side event in code-behind like this:

Telerik.Web.UI.RadComboBox ddl = new Telerik.Web.UI.RadComboBox()
{
    ID = "myCombo",
    AllowCustomText = false,
    ShowDropDownOnTextboxClick = true,
    CollapseDelay = 0,
    ExpandDelay = 0,
    MarkFirstMatch = true,
    SortCaseSensitive = false,
    OnClientDropDownClosed = "dropDownClosed"
};

Greetings,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.