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

HoveredCssClass no working

9 Answers 208 Views

Button

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

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

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!

answered on 07 Dec 2016, 03:19 PM

normal-state.png

hovered-state.png

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:

<html xmlns="http://www.w3.org/1999/xhtml">

<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.

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

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>

answered on 09 Dec 2016, 09:03 AM

ButtonHovered-1.zip

ButtonHovered-2.zip

Hello,

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

<html xmlns="http://www.w3.org/1999/xhtml">

<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.

<html xmlns="http://www.w3.org/1999/xhtml">

<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.