It's my understanding that if I'm using Classic RenderMode, I should get the Sprite Icons on the pushbutton, if I use LightWeight rendering I should get the Kendo css images, with that being said, this took some digging to get it to this simple of an example, with the RadButton ID="btnRadButton" the icons will show the sprite image and the css image for both Classic and LightWeight rendering. If you take the RadButton ID="btnRadButton" off the page, or set visible="false", you'll get the css images only.
Using 2020.1.114.45 Upgraded to 2020.1.219.45 same issue with the latest version
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Test._Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptCombine="True">
</telerik:RadScriptManager>
<telerik:RadButton ID="btnRadButton" runat="server" Text="My Button" RenderMode="Classic"
AutoPostBack="false" >
</telerik:RadButton>
<h1>Classic</h1>
<telerik:RadPushButton ID="btnOK" runat="server" Text="OK Classic" RenderMode="Classic" >
<Icon CssClass="rbOk" Top="6px" />
</telerik:RadPushButton>
<telerik:RadPushButton ID="btnSearch" runat="server" Text="Search Classic" RenderMode="Classic">
<Icon CssClass="rbSearch" Top="6px" />
</telerik:RadPushButton>
<telerik:RadPushButton ID="btnCancel" runat="server" Text="Cancel Classic" RenderMode="Classic">
<Icon CssClass="rbCancel" Top="6px" />
</telerik:RadPushButton>
<h1>Lightweight</h1>
<telerik:RadPushButton ID="RadPushButton1" runat="server" Text="OK Classic" RenderMode="Lightweight" >
<Icon CssClass="rbOk" Top="6px" />
</telerik:RadPushButton>
<telerik:RadPushButton ID="RadPushButton2" runat="server" Text="Search Classic" RenderMode="Lightweight">
<Icon CssClass="rbSearch" Top="6px" />
</telerik:RadPushButton>
<telerik:RadPushButton ID="RadPushButton3" runat="server" Text="Cancel Classic" RenderMode="Lightweight">
<Icon CssClass="rbCancel" Top="6px" />
</telerik:RadPushButton>
</form>
</body>
</html>
5 Answers, 1 is accepted
Hi Roger,
The mixture of different render modes is not supported - you can find this information listed in the Skins Troubleshooting section:
There are mixed Render Modes of the controls on the page. For example, a RadButton on the master page has RenderMode="Classic" and a RadButton on a user control has RenderMode="Lightweight". All controls of the same type and their child controls must have the same render mode. The following KB article can help with identifying and debugging the "mixed render mode" issue: Determine the render mode of all Telerik controls and catch mixed render mode issues.
Please set all RenderMode properties to Lightweight or do not use RadPushBotton since it does not offer Classic render mode. The control is released after the discontinuation of the Classic render mode in Q3 2015.
Best
Regards,
Rumen
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Far enough on mixed render modes. However, the issue still exist
Run the below as is, it will show the sprite icons and the css icons on the pushbutton controls. Then modify to remove the RadButton control or set visible="false", and you get just the css icons, NOT the sprite icons as desired.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="FantasticField2._Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptCombine="True">
</telerik:RadScriptManager>
<telerik:RadButton ID="btnRadButton" runat="server" Text="My Button" RenderMode="Classic"
AutoPostBack="false" >
</telerik:RadButton>
<h1>Classic</h1>
<telerik:RadPushButton ID="btnOK" runat="server" Text="OK Classic" RenderMode="Classic" >
<Icon CssClass="rbOk" Top="6px" />
</telerik:RadPushButton>
<telerik:RadPushButton ID="btnSearch" runat="server" Text="Search Classic" RenderMode="Classic">
<Icon CssClass="rbSearch" Top="6px" />
</telerik:RadPushButton>
<telerik:RadPushButton ID="btnCancel" runat="server" Text="Cancel Classic" RenderMode="Classic">
<Icon CssClass="rbCancel" Top="6px" />
</telerik:RadPushButton>
</form>
</body>
</html>
Hi Roger,
Please allow me to explain once again, RadPushButton does not offer RenderMode="Classic" so it always loads the image font icons on the page. That's why if you want to use it with RadButton on the same page you have two options to avoid the problem:
- use both controls with RenderMode="Lightweight"
- or stick to RenderMode="Classic" but replace RadPushButton instances with RadButton.
Regards,
Rumen
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
To stop the image sprite import on the page, all Telerik controls should have lightweight rendering:
<telerik:RadButton ID="btnRadButton" runat="server" Text="My Button" RenderMode="Lightweight"
AutoPostBack="false" >
</telerik:RadButton>
<h1>Classic</h1>
<telerik:RadPushButton ID="btnOK" runat="server" Text="OK Classic" RenderMode="Lightweight" >
<Icon CssClass="rbOk" Top="6px" />
</telerik:RadPushButton>
<telerik:RadPushButton ID="btnSearch" runat="server" Text="Search Classic" RenderMode="Lightweight">
<Icon CssClass="rbSearch" Top="6px" />
</telerik:RadPushButton>
<telerik:RadPushButton ID="btnCancel" runat="server" Text="Cancel Classic" RenderMode="Lightweight">
<Icon CssClass="rbCancel" Top="6px" />Otherwise, we hit the mix render mode issue.
If you want to stick to classic rendering and image sprites, then please remove the RadPushButtons since they will always mix the render mode and import font icons on the page and break the appearance of RadButton (when set to RenderMde="Classic").
Regards,
Rumen
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.