Remove hover style from decorated radiobuttonlist control

3 posts, 1 answers
  1. Vasssek
    Vasssek avatar
    143 posts
    Member since:
    Aug 2010

    Posted 02 Feb 2011 Link to this post

    Hello,

    Could somebody help me with this issue ?

    I use decorated radiobuttonlist control. Based on some logic steps in the code behind I've disabled all radio items except selected one. What I've tried to achieve is removing hover style which is applied over selected radio button and replaced it with normal state. 

    How to override style for hover action ? What should I insert inside of the class disableHovering ?

    I use this code for iterating through radiobuttonlist collection:
    RadioButtonList rblCtrl = (RadioButtonList)ctrl;
    foreach (ListItem i in rblCtrl.Items)
    {
         if (i.Selected != true) i.Enabled = false;
         else
         {                                
             i.Attributes.Add("onmouseover", "this.className=('disableHovering');");
         }                            
    }


    For further info please check the attachment.

    I will appreciate all suggestions...


    Best regards

    Vasek
  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 03 Feb 2011 Link to this post

    Hi Vasssek,

    To remove the checked radiobutton hover style, could be easily achieved by replacing the hovered background position with the normal background position:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .RadForm_Default .rfdRadioChecked:hover
            {
                background-position: 1px -440px !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="sm1" runat="server" />
        <telerik:RadFormDecorator ID="rfd1" runat="server" DecoratedControls="All" />
        <asp:RadioButton ID="rb1" runat="server" Text="IT" Checked="true" />
        <asp:RadioButton ID="RadioButton1" runat="server" Text="Stroj" Enabled="false" />
        <asp:RadioButton ID="RadioButton2" runat="server" Text="Meradlo" Enabled="false" />
        <asp:RadioButton ID="RadioButton3" runat="server" Text="Naradie" Enabled="false" />
        <asp:RadioButton ID="RadioButton4" runat="server" Text="Ostane" Enabled="false" />
        </form>
    </body>
    </html>


    Best wishes,
    Bojo
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vasssek
    Vasssek avatar
    143 posts
    Member since:
    Aug 2010

    Posted 03 Feb 2011 Link to this post

    Hello,

    thanks for your example. In my case I had to put out first part of your css style. So, this works for me:

    .disableHovering .rfdRadioChecked:hover
    {
        background-position: 1px -440px !important;          
    }

    and this is the same for decorated asp:checkbox control:
    .disableHovering .rfdCheckboxChecked:hover
    {
        background-position: 0px -420px !important;          
    }

    Thank you and have a nice day  :))

    Vasssek
Back to Top