New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Render Modes

RadToggleButton supports only Lightweight render mode. Generally it is exposed via the RenderMode property that can have five possible values - Classic, Lightweight, Native, Mobile and Auto.

The possible options are:

  • Lightweight—this is the default mode and it emphasizes on semantic HTML and CSS3 which makes the control easy to customize (including custom skins creation).

  • Classic, Native, Mobile—these modes are not supported. If you set them, the mode will fall back automatically to Lightweight.

  • Auto—this mode makes each control choose the appropriate rendering mode according to the used browser.

RadToggleButton, as well as the other controls included in the Telerik® UI for ASP.NET AJAX suite that utilize render modes, support only one type of render mode per page. This includes mode being set for a standalone RadToggleButton. All such controls must have the same RenderMode on a given page.This also includes instances from user controls and master pages.

RadButton, RadCheckBox, RadImageButton, RadLinkButton, RadPushButton and RadToggleButton share the same rendering and stylesheets, so all their instances on the same page must have RenderMode=Lightweight because this is the only mode supported by all of these controls. If you experience problems with distorted appearance see the Distorted Appearance article.

Setting Render Mode

There are two ways to configure the rendering mode of the RadToggleButton:

  • The RenderMode property in the markup or in the code-behind can be used for a particular instance:

    ASP.NET

    <telerik:RadToggleButton ID="RadToggleButton1" runat="server" RenderMode="Lightweight">
        <ToggleStates>
            <telerik:ButtonToggleState Text="State 1"/>
            <telerik:ButtonToggleState Text="State 2" /> 
        </ToggleStates>
    </telerik:RadToggleButton>
    

    C#

    RadToggleButton1.RenderMode = Telerik.Web.UI.RenderMode.Lightweight;
    

    VB

    RadToggleButton1.RenderMode = Telerik.Web.UI.RenderMode.Lightweight
    
  • A global setting in the web.config file that will affect the entire application, unless a concrete value is specified for a given control instance:

    web.config

    <appSettings>
        <add key="Telerik.Web.UI.ToggleButton.RenderMode" value="Lightweight" />
    </appSettings>
    

See Also

In this article