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

HoveredCssClass no working

9 Answers 145 Views
Button
This is a migrated thread and some comments may be shown as answers.
Jocelyn
Top achievements
Rank 1
Jocelyn asked on 16 Jul 2012, 06:55 PM
Hi,

<telerik:RadButton runat="server" ID="menuBtn" AutoPostBack="false" OnClientClicked="BtnClick"
    HoveredCssClass="menuImageHover" CssClass="menuImage" PressedCssClass="menuImagePressed">
    <ContentTemplate>
        <div id="mButton" class="mainMenuButton" runat="server">
            <table border="0">
                <tr>
                    <td>
                        <img id="icon" alt="" runat="server" />
                    </td>
                    <td style="width: 100%; text-align: center">
                        <span id="text" runat="server"></span>
                    </td>
                </tr>
            </table>
        </div>
    </ContentTemplate>
</telerik:RadButton>

CSS:
.menuImageHover
{
    background-position: -150px;
}
 
.menuImagePressed
{
    background-position: -300px;
}
 
.menuImage
{
    background: url('../Images/menu_button.png') no-repeat;
    height: 70px;
    width: 150px !important;
    position: relative;
    display: block;
}

I got the image in the menuImage class, but when I hover or click on the button, nothing happens.

Did I miss something?

Thanks

9 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 18 Jul 2012, 09:28 AM
Hi Jocelyn,

The following css works as expected at my end.

CSS:
.menuImageHover
{
 background-position: -150px!important;
}
.menuImagePressed
{
 background-position: -300px!important;
}

Hope this helps.

Thanks,
Princy.
0
SDI
Top achievements
Rank 1
answered on 04 Dec 2016, 07:31 PM

I have multiple CSS depending on the different themes our clients pick.  i have icons in separate folders that will be used in the CSS for each given theme. There are a list of program types that are used in a grid - ie: Swim, Tennis, Football, etc. and they each have their own hover and standard state icons. I need to change the icons depending on which theme they have chosen, so i easily switch the CSS in the ItemCreated event. The issue is the icon does not change for "CssClass" only for "PrimaryIconCssClass". This fine, but how do i change the hover icon url? There is not a "Icon.HoverIconCssClass".

 

This decorates it fine by setting "btnSwimNor" to the CSSClass. 

myRadButton..CssClass = "btnSwimNor"

.btnSwimNor .rbDecorated{
    font-family: "Calibri" !important;
    font-weight: 700 !important;
    font-size: 13pt !important;
    text-align: right !important;
    padding-right: 10px !important;
    color: #ffffff !important;     
}

 

This sets the icon fine when setting the PrimaryIconCssClass

myRadButton..Icon.PrimaryIconCssClass = "btnSwimNor"

.btnSwimNor.rbPrimaryIcon {
    background: url('../../_helpers/swim-wht-32.png') no-repeat;
}

 

Note: i tried to put the "background" above in the first code block for the decorated but it didnt put the icon in. I had to set it using the PrimaryIconCssClass.

 

I need to set this to the hover url by using Css

{

background: url('../../Web20/swim-32.png') no-repeat;

}

 

Remember this is done in the item created event and changes the css to the button. I cant seem to get the hovered icon to be changed. The hovered IconCssClass is below, but the background does nothing.

myRadButton.HoveredCssClass = "btnSwimHov"

 

.btnSwimHov .rbDecorated {
    font-family: "Calibri" !important;
    font-weight: 700 !important;
    font-size: 14pt !important;
    text-align: right !important;
    padding-right: 10px !important; 
    color: midnightblue !important;          /*Me.m_ColorForeDark = ColorTranslator.FromHtml("#367eb1")*/
    background: url('../../Web20/swim-24.png') no-repeat;
}

 

 

Can you give me some insight to swapping out the hover icon url on the fly?

 

Thanks!

0
SDI
Top achievements
Rank 1
answered on 06 Dec 2016, 11:50 AM
Anybody out there......
0
Bozhidar
Telerik team
answered on 07 Dec 2016, 03:19 PM
Hi,

I was not able to understand what you want to achieve by using that code exactly.

You also didn't mentioned what is the used render mode.

I suppose it should be classic, but with the given configuration, I don't see where an element with class .rbDecorated is rendered.

I used your asp configuration and placed background images to the button for normal and hovered state using the following:

<head runat="server">
    <title></title>
    <style>
        span.RadButton.rbLinkButton.menuImage {
            background-image: url('normal-state.png');
            height: 60px;
            width: 187px;
            position: relative;
            background-color: transparent;
            border: 0 none;
        }
 
        span.RadButton.rbLinkButton.menuImage:hover {
            background-image: url('hovered-state.png');
            border: 0 none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server"></asp:ScriptManager>
 
        <telerik:RadButton runat="server" ID="menuBtn" AutoPostBack="false" OnClientClicked="BtnClick"
            HoveredCssClass="menuImageHover" CssClass="menuImage" PressedCssClass="menuImagePressed" RenderMode="Classic">
            <ContentTemplate>
                <div id="mButton" class="mainMenuButton" runat="server">
                    <table border="0">
                        <tr>
                            <td>
                                <img id="icon" alt="" runat="server" />
                            </td>
                            <td style="width: 100%; text-align: center">
                                <span id="text" runat="server"></span>
                            </td>
                        </tr>
                    </table>
                </div>
            </ContentTemplate>
        </telerik:RadButton>
 
    </form>
</body>
</html>

Attached are two background images that I am using for both states.

I would also suggest to upgrade to the latest controls version and use LightWeight render mode.

If you need further assistance, open a support ticket and send us a runnable code and screenshots representing what is your goal.

Regards,
Bozhidar
Telerik by Progress
Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
0
SDI
Top achievements
Rank 1
answered on 07 Dec 2016, 10:02 PM

The buttons are in a grid so its a repeater. there are multiple buttons that could a have a swim image, tennis image, football, etc., all depending on a type that is in the record with the repeater. Different clients have different themes, so i have css sheets depending on their themes. in each sheet should be pointing to a different image location per hover/normal state of the button. the radbuttons have different colors depending on the theme used so i need different images for the button. I cant put the css name in the aspx because it might be needing a different icon, so it has to be on the item created of the event.

Ex: swim type

HoveredCssClass="btnSwimHover" CssClass="btnSwim" PressedCssClass="btnSwimPressed"

Ex: tennis type

HoveredCssClass="btnTennisHover" CssClass="btnTennis" PressedCssClass="btnSwPressed"

 

I have the item creating doing fine for normal state. i cant seem to get it to change css for hover state.

 

 

<telerik:RadButton runat="server" ID="RadButtonViewGroups" Image-IsBackgroundImage="true" Height="65px" Width="125px" Text="View Programs"    
    OnClientClicking="RadButtonShowGroups" AutoPostBack="false" CommandArgument='<%# Eval("ProgramId") %>'  >
    <Icon PrimaryIconLeft="8" PrimaryIconTop="20" PrimaryIconHeight="32" PrimaryIconWidth="32"  />
</telerik:RadButton>

 

e

0
SDI
Top achievements
Rank 1
answered on 07 Dec 2016, 11:30 PM

Okay i got it. You have a bug - this is why the icon would not show.

This is the css i set on the server side item created

.btnSwim .rbDecorated {
    font-family: "Calibri" !important;
    font-weight: 700 !important;
    font-size: 13pt !important;
    text-align: right !important;
    padding-right: 10px !important;
    padding-left: 25px !important;
    color: #ffffff !important;
}
.btnSwim .rbPrimaryIcon {   
    background-image: url('../../_helpers/swim-wht-32.png') !important;
}
 
.btnSwim:hover .rbDecorated {   
    color: #191970 !important;
}
.btnSwim:hover .rbPrimaryIcon {
    background-image: url('../../Web20/swim-32.png') !important;
}

 

Here is the server side code

...
Case cMyManager.RSI_CategoryValues_tbl.eProgramType.soccer
                            RadButtonViewGroups.CssClass = "btnSoccer"
 
                        Case cMyManager.RSI_CategoryValues_tbl.eProgramType.swimming
                            RadButtonViewGroups.CssClass = "btnSwim"
 
                        Case cMyManager.RSI_CategoryValues_tbl.eProgramType.tennis
                            RadButtonViewGroups.CssClass = "btnTennis"
...

 

Now the aspx. NOTE: if i remove the property of the PrimaryIconUrl="../images/Layout/themes/_helpers/key-wht-32.png" it will never use the css icons. Once i put this in there, it used my css urls correctly. I think this is a bug.

<telerik:RadButton runat="server" ID="RadButtonViewGroups" Height="65px" Width="125px" Text="View Programs"                                                  
    OnClientClicking="RadButtonShowGroups" AutoPostBack="false" CommandArgument='<%# Eval("ProgramId") %>'  >
    <Icon PrimaryIconLeft="8" PrimaryIconTop="20" PrimaryIconHeight="32" PrimaryIconWidth="32" PrimaryIconUrl="../images/Layout/themes/_helpers/key-wht-32.png"  />
</telerik:RadButton>

 

 

 

 

0
Bozhidar
Telerik team
answered on 08 Dec 2016, 08:06 AM
Hi,

Can you confirm that you are using version 2012.2 607 or the latest version and what rendering mode - Classic or Lightweight?

If you are using a version from 2012 it is possible that in a version four years later that the bug is fixed or the common behavior is improved.

Regards,
Bozhidar
Telerik by Progress
Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
0
SDI
Top achievements
Rank 1
answered on 08 Dec 2016, 11:59 AM

The render mode is whatever the default is if its not set, which i believe is classic. The version is 2015.1.225.40. We have the newest version which has not been tested or installed yet.

 

0
Bozhidar
Telerik team
answered on 09 Dec 2016, 09:03 AM
Hello,

I have tested with the latest version, and using the following, everything works as expected:

<head runat="server">
    <title></title>
    <style>
        .btnSwim .rbDecorated {
            font-family: "Calibri" !important;
            font-weight: 700 !important;
            font-size: 13pt !important;
            text-align: right !important;
            padding-right: 10px !important;
            padding-left: 25px !important;
            color: #ffffff !important;
        }
 
        .btnSwim:hover .rbDecorated {
            color: #191970 !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server"></asp:ScriptManager>
 
 
        <telerik:RadButton runat="server" ID="RadButtonViewGroups" Height="65px" Width="125px" Text="View Programs"
            AutoPostBack="false" RenderMode="Classic" CssClass="btnSwim">
            <Icon PrimaryIconLeft="8" PrimaryIconTop="20" PrimaryIconHeight="32" PrimaryIconWidth="32" PrimaryIconUrl="search_32x32.png" PrimaryHoveredIconUrl="search_hovered_32x32.png" />
        </telerik:RadButton>
 
 
    </form>
</body>
</html>


Note, that I set the urls to the icons in the Button configuration.

For that case, attached is a small project - Button-Hovered-1.

This is a short video showing that both icons set - for normal and hovered states work properly: http://screencast.com/t/jmeP3TeHXv6

The second option, if you want to use CSS is to use the PrimaryIconCssClass property.

<head runat="server">
    <title></title>
    <style>
        .btnSwim .rbDecorated {
            font-family: "Calibri" !important;
            font-weight: 700 !important;
            font-size: 13pt !important;
            text-align: right !important;
            padding-right: 10px !important;
            padding-left: 35px !important;
            color: #ffffff !important;
        }
 
        .btnSwim:hover .rbDecorated {
            color: #191970 !important;
        }
 
        .MyIcon {
            background-image: url('search_32x32.png');
        }
 
        .btnSwim.rbHovered .MyIcon {
            background-image: url('search_hovered_32x32.png');
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager="server"></asp:ScriptManager>
        <telerik:RadButton runat="server" ID="RadButtonViewGroups" Height="65px" Width="155px" Text="View Programs"
            AutoPostBack="false" RenderMode="Classic" CssClass="btnSwim">
            <Icon PrimaryIconLeft="8" PrimaryIconTop="20" PrimaryIconHeight="32" PrimaryIconWidth="32" PrimaryIconCssClass="MyIcon" />
        </telerik:RadButton>
    </form>
</body>
</html>

Attached is sample project and a short video showing the result in the browser: http://screencast.com/t/dlL1IE21

In the above two examples it is shown that custom icons work properly in Classic mode using PrimaryIconCssClass or PrimaryIconUrl properties.

Regards,
Bozhidar
Telerik by Progress
Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
Tags
Button
Asked by
Jocelyn
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
SDI
Top achievements
Rank 1
Bozhidar
Telerik team
Share this question
or