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

Classic and LightWeight Rendering of Icons

5 Answers 146 Views
PushButton
This is a migrated thread and some comments may be shown as answers.
RBarnes
Top achievements
Rank 1
RBarnes asked on 06 May 2020, 03:57 PM

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

Sort by
0
Rumen
Telerik team
answered on 07 May 2020, 09:38 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
RBarnes
Top achievements
Rank 1
answered on 07 May 2020, 12:11 PM

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>

 

 

0
Rumen
Telerik team
answered on 07 May 2020, 12:17 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
RBarnes
Top achievements
Rank 1
answered on 07 May 2020, 12:21 PM
RadPushButton doesn't "always" load the image fonts, it does without a radbutton on the page as you say.  However, if you add a radbutton on the page it loads both the image icons and the css icons.  Look at my images in my previous post.  So there is still an issue.
0
Rumen
Telerik team
answered on 07 May 2020, 02:19 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
PushButton
Asked by
RBarnes
Top achievements
Rank 1
Answers by
Rumen
Telerik team
RBarnes
Top achievements
Rank 1
Share this question
or