Render Modes
RadGrid has four render modes that change the HTML and CSS rendered by the control: Classic, Lightweight, Mobile, and Auto. Configure them through the RenderMode property.
Available render modes
-
Classic — The legacy rendering mode and the default value of the property. It uses tables and background images from sprites to create the layout, including rounded corners and shadows.
-
Lightweight — Supported since Q1 2015, this mode emphasizes semantic HTML and CSS3. It reduces the markup and image sprites used by the control and removes table elements from the layout, which decreases skin complexity.
-
Mobile — Supported since the Q3 2014 beta release, this mode adapts the grid for mobile screen sizes and provides larger touch zones.
-
Auto — Automatically selects a render mode for a smartphone, tablet, or desktop based on the device and browser. See Automatic render mode for details.
Important notes about render mode
In Lightweight render mode, RadGrid uses font icons instead of images. The ButtonType property provides the FontIconButton option, and edit command buttons generated by AutoGenerateEditColumn differ from those in Classic mode. Cast the control to ElasticButton instead of LinkButton when accessing these buttons:
using Telerik.Web.UI;
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
if (e.Item is GridDataItem)
{
GridDataItem item = (GridDataItem)e.Item;
ElasticButton button = (ElasticButton)item["AutoGeneratedEditColumn"].Controls[0];
button.ToolTip = "Edit Order " + item.GetDataKeyValue("OrderID");
}
}RadGrid and its child controls, as well as other Telerik UI for ASP.NET AJAX controls that use render modes, support only one render mode per page. All such controls must use the same RenderMode on a given page, including controls in user controls and master pages.
Automatic render mode
For Auto detection to work, reference the Telerik.Web.Device.Detection.dll assembly in your project. RadGrid selects Classic, Lightweight, or Mobile according to the browser and device and falls back when the preferred mode is unavailable.
See the Render Modes List for the controls that support alternative render modes.
The precedence is as follows:
- On a mobile browser, controls try Mobile, then Lightweight, and finally Classic.
- On a desktop browser, controls try Lightweight and then Classic.
- If a control supports neither Mobile nor Lightweight, it uses Classic.
The Lightweight render mode is the preferred mode for new development because it produces responsive HTML that is easier to customize. New controls, skins, features, and browser support may target Lightweight first. The Classic render mode remains supported and stable.
The RenderMode enumeration also includes Native, but it is meaningful only for controls with a native HTML equivalent, such as RadComboBox. RadGrid does not have a native equivalent, so Native is not supported or has the same effect as Classic.
Set the render mode
There are two ways to configure the rendering mode of the controls:
- Set the RenderMode property in markup or in code-behind through the Telerik.Web.UI.RenderMode enumeration. The following example sets it in markup:
<telerik:RadGrid ID="RadGrid1" runat="server" RenderMode="Lightweight">
</telerik:RadGrid>- Set a global value in
web.config. This value affects the entire application unless a control instance specifies a concrete value:
<appSettings>
<add key="Telerik.Web.UI.Grid.RenderMode" value="Lightweight" />
</appSettings>