Back to Devexpress

Native Mode

aspnet-11893-common-concepts-performance-optimization-native-mode.md

latest6.4 KB
Original Source

Native Mode

  • May 28, 2025
  • 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

ControlPropertyCorresponding Native HTML Element
ASPxButtonASPxButton.Nativeinput type=button element or input type=submit element
ASPxCheckBoxASPxCheckBox.Nativeinput type=checkbox element
ASPxCheckBoxListASPxCheckListBase.Nativea table containing input type=checkbox elements
ASPxComboBoxASPxComboBox.Nativeselect element
ASPxListBoxASPxListBox.Nativeselect element
ASPxMemoASPxMemo.Nativetextarea element
ASPxRadioButtonASPxCheckBox.Nativeinput type=radio element
ASPxRadioButtonListASPxCheckListBase.Nativea table containing input type=radio elements
ASPxTextBoxASPxTextBox.Nativeinput type=text element
ASPxUploadControlASPxUploadControl.Nativeinput 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.

csharp
//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

|

See Also

Online Demo: Common Features - Native Mode