RadColorPicker has different render modes that can change the actual HTML markup that is rendered. They are exposed via the RenderMode property that can have four possible values - Classic, Lightweight, Mobile and Auto. This functionality was introduced in the Q3 2015 version.
The possible options are:
Classic—this mode is the rendering that has been used before. It remains without changes and it is the default value of the property.
Lightweight - the control is elastic and CSS is used to generate colors and palettes instead of images. This mode is available as of Q3 2015.
Mobile—this mode is currently not supported. If you set it, the mode will fall back automatically to Lightweight.
Auto—this mode makes each control choose the appropriate rendering mode according to the used browser—Classic or Lightweight.
RadColorPicker, as well as the other Telerik controls that utilize render modes, supports only one type of render mode per page. This includes mode being set for a standalone instance(s), and a programmatically created instance(s). All such controls must have the same RenderMode on a given page.This also includes instances from user controls and master pages.
Certain configurations of RadColorPicker use RadSlider controls internally, so all their instances must have the same render mode. Sliders that are children of a ColorPicker will inherit the RenderMode of the ColorPicker.
There are two ways to configure the rendering mode of the controls:
The RenderMode property in the markup or in the code-behind that can be used for a particular instance:
<telerik:RadColorPicker ID="RadColorPicker1" runat="server" RenderMode="Lightweight"> </telerik:RadColorPicker>
RadColorPicker1.RenderMode = Telerik.Web.UI.RenderMode.Lightweight;
RadColorPicker1.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:
<appSettings> <add key="Telerik.Web.UI.ColorPicker.RenderMode" value="Lightweight" /> </appSettings>