Highlighting Template Item on MultiColumn

3 posts, 0 answers
  1. Jeff Reinhardt
    Jeff Reinhardt avatar
    56 posts
    Member since:
    Oct 2009

    Posted 17 Aug 2010 Link to this post

    I have a multi-column combobox showing 3 items in the dropdown.  When going to select an item the highlight bar is very thin, bounces around a lot and rarely ends up on the item to be clicked/selected. See attached image.

    <telerik:RadComboBox ID="radcmbProduct" runat="server" Width="400px" Height="200px" AllowCustomText="false" EmptyMessage="Select a Product" EnableLoadOnDemand="True" ShowMoreResultsBox="true" DropDownWidth="600px" EnableVirtualScrolling="true" HighlightTemplatedItems="true" MarkFirstMatch="true" NoWrap="true" OnItemsRequested="radcmbProduct_ItemsRequested" OnItemDataBound="radcmbProduct_ItemDataBound">
          <HeaderTemplate>
               <ul>
                  <li class="col1">Title</li>
                  <li class="col2">System</li>
                  <li class="col3">Price</li>
                </ul>
          </HeaderTemplate>
          <ItemTemplate>
                <ul>
                   <li class="col1">
                       <%# DataBinder.Eval(Container.DataItem, "Title") %></li>
                   <li class="col2">
                       <%# DataBinder.Eval(Container.DataItem, "GameSystemName") %></li>
                   <li class="col3">
                       <%# DataBinder.Eval(Container.DataItem, "DisplayPrice")%></li>
                </ul>
           </ItemTemplate>
    </telerik:RadComboBox>
  2. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 20 Aug 2010 Link to this post

    Hi Jeff Reinhardt,

    I suppose that this issue is related with some custom CSS styles that you use in your page.

    I used your RadComboBox definition and the styles used in this online demo to create a sample for you.
    On my side the templated items are highlighted properly - could you please download the sample and give it a try?
    If the issue persists - could you please paste here the CSS styles that you use?

    Kind regards,
    Kalina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Jeff Reinhardt
    Jeff Reinhardt avatar
    56 posts
    Member since:
    Oct 2009

    Posted 20 Aug 2010 Link to this post

    Not sure why, but it is working now.  The only thing I changed wwas the line-height from 20 to 14 and added the ul CSS style below.

    Here are the only styles I had affecting the combo (needed col1 to be wider than the other two):

    .col1

    {

     

    float: left;

     

     

     

    width: 400px;

     

     

     

    margin: 0;

     

     

     

    padding: 0 5px 0 0;

     

     

     

    line-height: 14px;

     

    }

     

     

    .col2, .col3

     

     

    {

     

    float: left;

     

     

     

    width: 50px;

     

     

     

    margin: 0;

     

     

     

    padding: 0 5px 0 0;

     

     

     

    line-height: 14px;

     

    }

     

    I did not have the one below that you had in your sample and that may have been part of the reason


    .rcbHeader

     

    ul, .rcbFooter ul, .rcbItem ul, .rcbHovered ul, .rcbDisabled ul

     

     

    {

     

    width: 100%;

     

     

     

    display: inline-block;

     

     

     

    margin: 0;

     

     

     

    padding: 0;

     

     

     

    list-style-type: none;

     

    }

     

Back to Top