Remove hover style from decorated radiobuttonlist control

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

    Posted 02 Feb 2011 Link to this post


    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;
             i.Attributes.Add("onmouseover", "this.className=('disableHovering');");

    For further info please check the attachment.

    I will appreciate all suggestions...

    Best regards

  2. Answer
    Bozhidar avatar
    693 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" "">
    <head runat="server">
        <style type="text/css">
            .RadForm_Default .rfdRadioChecked:hover
                background-position: 1px -440px !important;
        <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" />

    Best wishes,
    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. Vasssek
    Vasssek avatar
    186 posts
    Member since:
    Aug 2010

    Posted 03 Feb 2011 Link to this post


    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  :))

Back to Top