This is a migrated thread and some comments may be shown as answers.

Highlighting Template Item on MultiColumn

2 Answers 63 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Jeff Reinhardt
Top achievements
Rank 1
Jeff Reinhardt asked on 17 Aug 2010, 02:44 PM
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 Answers, 1 is accepted

Sort by
0
Kalina
Telerik team
answered on 20 Aug 2010, 10:50 AM
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
0
Jeff Reinhardt
Top achievements
Rank 1
answered on 20 Aug 2010, 06:17 PM
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;

 

}

 

Tags
ComboBox
Asked by
Jeff Reinhardt
Top achievements
Rank 1
Answers by
Kalina
Telerik team
Jeff Reinhardt
Top achievements
Rank 1
Share this question
or