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

Highlight multi lines

6 Answers 131 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Laura
Top achievements
Rank 1
Laura asked on 17 Oct 2008, 05:45 PM
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>

6 Answers, 1 is accepted

Sort by
0
Laura
Top achievements
Rank 1
answered on 18 Oct 2008, 03:57 PM
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.
0
Veselin Vasilev
Telerik team
answered on 20 Oct 2008, 02:44 PM
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.
0
Laura
Top achievements
Rank 1
answered on 21 Oct 2008, 02:53 PM
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>
0
Veselin Vasilev
Telerik team
answered on 24 Oct 2008, 12:35 PM
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.
0
Laura
Top achievements
Rank 1
answered on 25 Oct 2008, 05:35 PM
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.

    0
    Alex Gyoshev
    Telerik team
    answered on 28 Oct 2008, 12:52 PM
    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.
    Tags
    ComboBox
    Asked by
    Laura
    Top achievements
    Rank 1
    Answers by
    Laura
    Top achievements
    Rank 1
    Veselin Vasilev
    Telerik team
    Alex Gyoshev
    Telerik team
    Share this question
    or