Highlight multi lines

[Laura]

I have a radcombo box as a template column in a radgrid. I have 2 columns in my combo box a name and a description. The description can be multiple lines. When the user hovers over a row, only the top line of the selected row is highlighted. I want the whole selected row to be highlighted. I tried adding a syle for hover, but cant get the 2 colors to match.
<style type="text/css">  
    .rcbHovered {  
        background-color:  Yellow !important;  
    }  
   </style>

 Here is my code for the combobox:
<telerik:RadComboBox  ID="package"  Width="220px"  runat="server"  OnSelectedIndexChanged="RadComboBoxSelectedIndexChanged"
                                MarkFirstMatch="True"  AllowCustomText="True" DataSourceID="ContentCentralPackages"   EmptyMessage="Select a package"
                              ExpandAnimation-Type="None"  CollapseAnimation-Type="None" AutoPostBack="true" AppendDataBoundItems="false"
                                DataTextField="package_name" DataValueField="package_cd" DropDownWidth="650px"
                               Skin="Office2007"  SelectedValue='<%# Bind("package_cd") %>'  
                                EnableVirtualScrolling="True" HighlightTemplatedItems="True">
                             <ExpandAnimation Type="None" />
                             <CollapseAnimation Duration="200" Type="None" />
                             
                          <HeaderTemplate>
                           <table style="width: 620px; text-align: left">
                            <tr>
                                <td style="width: 170px;">
                                    Package Name
                                </td>
                                <td style="width: 450px;" >
                                    Description
                                </td>
                               
                            </tr>
                          </table>
                        </HeaderTemplate>
                    <ItemTemplate>
                        <table style="width: 620px; text-align: left">
                            <tr>
                                <td style="width: 170px;" valign="top">
                                    <%# DataBinder.Eval(Container.DataItem, "package_name") %>
                                </td>
                                <td style="width: 450px;">
                                    <%# DataBinder.Eval(Container.DataItem, "descriptions") %>
                                </td>
                                
                            </tr>
                        </table>
                    </ItemTemplate>
            
                          </telerik:RadComboBox>

[Laura]

I was able to change the skin, and now it highlights the whole row. Only problem is that the blue of my page (Office2007) is different than the blue of my combobox (WebBlue). The skin Office2007 only highlights the first line in the row, and WebBlue highlights the whole row and also puts in horizontal break links which I was also looking for.

[Veselin Vasilev]

Hello Laura,

You can check our online demo. The first column (Company Name) has records that are multiline. The hover works fine in Office2007 skin as well. Please try it and let us know if you have additional questions.

All the best,
Veselin Vasilev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Laura]

All I did was change the skin in the below code from WebBlue to Office2007, and the highlighted item only highlights to the first line of the selected item when there is multiple lines in an item. What could make the difference?

<telerik:RadComboBox  ID="package"  Width="220px"  runat="server"        OnSelectedIndexChanged="RadComboBoxSelectedIndexChanged"
MarkFirstMatch="True"  AllowCustomText="True" DataSourceID="ContentCentralPackages"   EmptyMessage="Select a package"  ExpandAnimation-Type="None"  CollapseAnimation-Type="None" AutoPostBack="true" AppendDataBoundItems="false"  OnClientSelectedIndexChanging="setnewprice"                             DataTextField="package_name" DataValueField="package_cd" DropDownWidth="650px"  OnClientKeyPressing="setnewprice"             Skin="WebBlue"  SelectedValue='<%# Bind("package_cd") %>'
 EnableVirtualScrolling="True" HighlightTemplatedItems="True">
<ExpandAnimation Type="None" />
<CollapseAnimation Duration="200" Type="None" />
                             
                             
                          <HeaderTemplate>
                           <table style="width: 620px; text-align: left">
                            <tr>
                                <td style="width: 170px;">
                                    Package Name
                                </td>
                                <td style="width: 450px;" >
                                    Description
                                </td>
                                <td style="width: 0px;" >
                                    
                                </td>
                               
                            </tr>
                          </table>
                        </HeaderTemplate>
                    <ItemTemplate>
                        <table style="width: 620px; text-align: left">
                            <tr>
                                <td style="width: 170px;" valign="top">
                                    <%# DataBinder.Eval(Container.DataItem, "package_name") %>
                                </td>
                                <td style="width: 450px;">
                                    <%# DataBinder.Eval(Container.DataItem, "descriptions") %>
                                </td>
                               
                                
                            </tr>
                        </table>
                    </ItemTemplate>
            
                          </telerik:RadComboBox>

[Veselin Vasilev]

Hello Laura,

I have created a small sample project. Please download it and give it a try. I have modified the standard hovered image of the Office2007 skin a little and used it in my test page.

Greetings,
Veselin Vasilev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Laura]

Thank you for this sample. When I don't use your sample, and the highlighted background is only the top line, the highlight is gradient. On your example, the color is plain orange. How can I make the highlight the way it is in the office2007 skin which is gradient?

Also, I saw this in the Q2 release notes about combobox:
The portion I highlighted in red below states:

Office2007 skin drop-down backgrounds no longer expand when item text wraps.

Does this mean that it is working as I have described, in that the background DOES NOT expand when text wraps, as in my case where the text goes on for multiple lines?

RadComboBox

What’s New:

1. Implemented OnClientTextChange event

What’s Fixed:

1. SelectedValue and get_value() properties of RadComboBox do not return the right value when combo is disabled on client side. This is now fixed.
2. Changing the selection of the dropdown no longer throws an error: "Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus"
3. Fixed memory leaks in IE.
4. JavaScript error when the combobox is disabled and its text is selected is now fixed.
5. Fixed a case when DataBind() throws an exception “Selection out of range”.
6. SelectedIndexChanged event no longer fires every time on postback if the first item is without Value and MarkFirstMatch= true
7. RadComboBox's input now has the correct width under Safari when its container has white-space:nowrap.
8. Office2007 skin drop-down backgrounds no longer expand when item text wraps.

[Alex Gyoshev]

Hi Laura,

Use the image attached to this post.

The embedded image supports up to 5 lines of text, which we thought was sufficient. We are sorry for the inconvenience.

Best wishes,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.