hover style for template

2 posts, 0 answers
  1. Nir
    Nir avatar
    14 posts
    Member since:
    Dec 2006

    Posted 30 Nov 2008 Link to this post

    Hi,

    I am trying to set a "hover" style to a templated menu (asp:checkbox) using the latest version of RAD controls.
    Here is a section of my menu:
     <telerik:RadMenuItem Text="Options" runat="server"
        <Items> 
            <telerik:RadMenuItem runat="server"
                <ItemTemplate> 
                   <asp:CheckBox ID="askatstartup" runat="server" Text="Ask to Auto-configure at startup" /> 
                </ItemTemplate> 
            </telerik:RadMenuItem> 
            <telerik:RadMenuItem runat="server"
                <ItemTemplate> 
                   <asp:CheckBox ID="sortedtree" runat="server" Text="Show sorted tree" /> 
                </ItemTemplate> 
            </telerik:RadMenuItem> 
        </Items> 
        <GroupSettings Width="250" /> 
    </telerik:RadMenuItem> 
    I use server side code to set the checkbox state and add a client side onclick method:
    RadMenuItem oOptions = oRadMenu.FindItemByText("Options"); 
     
    // put the value on the checkbox and add an event 
    CheckBox oCheck = (CheckBox)oOptions.Items[0].FindControl("askatstartup"); 
    oCheck.InputAttributes.Add("onClick""OptionsCheckBoxClicked('askatstartup', this.checked);"); 
    oCheck.Attributes.Add("onMouseOver""this.style.background = '#dfdfdf';"); 
    oCheck.Attributes.Add("onMouseOut""this.style.background = '#fff';"); 
    I also added client side methods to create a "hover" effect same as the skin I use (Gray).

    The result is that only the check box label gets the effect, the rest of the menu stays the same (white).
    Is there a way to do this using CSS or javascript for the entire menu item?

    I added to my page the following code to create the effect if FireFox (for some reason it did not do it by itself...):
    .rmVertical .rmItem .rmLink:hover { 
        background:#dfdfdf !important; 
        color#6b6b6b !important; 
    }}
    If there is a solution of this type it would be best or even better something like HighlightTemplatedItems in RadComboBox.

    Thanks,
    Nir.

  2. Nir
    Nir avatar
    14 posts
    Member since:
    Dec 2006

    Posted 01 Dec 2008 Link to this post

    I was very close to the solution - the change should be done on the parent node:

    oCheck.Attributes.Add("onMouseOver""this.parentNode.style.background = '#dfdfdf';"); 
    oCheck.Attributes.Add("onMouseOut""this.parentNode.style.background = '#fff';"); 

    I think you (telerik) should add such a property for the menu like the combobox has.

    Thanks.
Back to Top