Native Mode

• Jun 28, 2021
• 3 minutes to read

DevExpress controls use a custom layout that includes standard HTML elements such as <TABLE>, <DIV> and <SPAN>. This allows you to customize control appearance by applying a specific style to an editor’s composite elements.

In some cases, you may need to display controls as native HTML form elements, if performance is more important than appearance. Native mode allows you to display DevExpress controls with similar HTML elements as native elements, which reduces a control’s render size and improves overall performance.

Use the control’s Native property to enable native mode. Note that this property is only provided by controls that can be rendered as standard HTML elements, as listed in the table below:

Controls with Native Mode Support

Control	Property	Corresponding Native HTML Element
ASPxButton	ASPxButton.Native	input type=button element or input type=submit element
ASPxCheckBox	ASPxCheckBox.Native	input type=checkbox element
ASPxCheckBoxList	ASPxCheckListBase.Native	a table containing input type=checkbox elements
ASPxComboBox	ASPxComboBox.Native	select element
ASPxListBox	ASPxListBox.Native	select element
ASPxMemo	ASPxMemo.Native	textarea element
ASPxRadioButton	ASPxCheckBox.Native	input type=radio element
ASPxRadioButtonList	ASPxCheckListBase.Native	a table containing input type=radio elements
ASPxTextBox	ASPxTextBox.Native	input type=text element
ASPxUploadControl	ASPxUploadControl.Native	input type=file element

Theming in Native Mode

Note that DevExpress themes do not work properly in native mode because a theme requires elements that are removed when you activate this mode. The result is that when native HTML mode is enabled, a control’s appearance depends on how a client browser interprets and displays the corresponding HTML element.

Example

The example below demonstrates an ASP.NET markup and the resulting HTML code of ASPxComboBoxes in native and nonnative modes.

The ASPxComboBox1 control is in nonnative mode and renders as a table element. The ‘Office2010Silver’ theme, which is applied to the page, specifies styles for table elements. Thereby, the editor is themed.

The ASPxComboBox2 control is rendered in native mode as a select element. In this case, required elements (i.e., tables) are removed when you turn on native mode, so theming won’t work.

The image below shows the result.

C#

//Apply the Office2010Silver theme to the page
protected void Page_PreInit(object sender, EventArgs e) {
     DevExpress.Web.ASPxWebControl.GlobalTheme = "Office2010Silver";
}

XML

Resulting HTML

<table cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-collapse:collapse;" id="ASPxComboBox1" class="dxeButtonEditSys dxeButtonEdit_Office2010Silver">
…
</table>

…

<select onchange="aspxETextChanged('ASPxComboBox2')" onblur="aspxELostFocus('ASPxComboBox2')" onfocus="aspxEGotFocus('ASPxComboBox2')" size="1" name="ASPxComboBox2" id="ASPxComboBox2" class="dxeButtonEditSys">
</select>

ASPX

<dx:ASPxComboBox ID="ASPxComboBox1" runat="server" ValueType="System.String">
</dx:ASPxComboBox>

<dx:ASPxComboBox ID="ASPxComboBox2" runat="server" Native="True" ValueType="System.String">
</dx:ASPxComboBox>

Differences in functionality

Some DevExpress control features are not supported in native mode – as shown in the table below.

Controls	Feature that is not supported in native mode
ASPxButton	Radio button functionality
ASPxCheckBox, ASPxCheckBoxList	Indeterminate check box state
ASPxComboBox	On-Demand Item Loading (Callback Mode) Filtering Multiple columns
ASPxListBox	On-demand item loading (Callback Mode) CheckColumn selection mode
ASPxMemo, ASPxTextBox	Null text
ASPxUploadControl	Advanced upload mode, Clear file selection button Null text