Render Modes
This article demonstrates the different render modes that RadListBox control offers. They are exposed via the RenderMode property that can have two possible values - Classic or Lightweight. The goal behind this functionality is to stay in line with the latest trends in the web development and make maximum use of CSS3/HTML5 features. This functionality was introduced in the Q1 2014 version.
Classic - this is the default value of the RenderMode property which preserves the rendering that has been used before without changes.
Lightweight - this render mode emphasizes on semantic HTML and CSS3. This means that the table elements are replaced with div elements and the image gradients with of CSS gradients. Thus, the amount of data that the client browser should request is sensibly decreased. This also reduces the number of image sprites the control uses and the overall size and complexity of each skin, including custom ones.
Auto - this mode makes each control choose the appropriate rendering mode according to the used browser - Classic or Lightweight.
Setting the Render Mode
There are two ways to set the RenderMode for RadListBox:
- When the RenderMode property is set in the markup you can type in a string, when set in the code-behind it takes a member of the
Telerik.Web.UI.RenderModeenum. For example:
<telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBox1"></telerik:RadListBox>
A global setting in the web.config file that will affect the entire application, unless a concrete value is specified for RadListBox instance:
Change render mode for all RadListBoxes in your application:
<appSettings>
<add key="Telerik.Web.UI.ListBox.RenderMode" value="lightweight" />
</appSettings>
- Change render mode for all controls in your application:
<appSettings>
<add key="Telerik.Web.UI.RenderMode" value="lightweight" />
</appSettings>