All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Templates for DevExpress Components

  • 4 minutes to read

CodeRush allows you to create popular DevExpress components for Blazor. For example, type xdg and press Tab (or Space, depending on your settings) to create a DxDataGrid Blazor component with fields. These fields allow you to quickly change properties. When the caret is inside the DxDataGrid component, you can expand the c template to create a new data grid column.

Expand xdg template

The following tables list templates for DevExpress Blazor components:

Button

Template Description
xb Creates a Button component (DxButton).

Data Grid

Template Description
xdg Creates a Data Grid component (DxDataGrid).

When you have a DxDataGrid component, you can populate it with columns and summary items.

Column Types

Expand these templates on an empty line inside the DxDataGrid (a pair of Columns tags is created automatically, if needed).

Template Description
c Creates a data column with a text editor (DxDataGridColumn).
cc Creates a command column (DxDataGridCommandColumn).
ck Creates a data column that displays disabled checkboxes (DxDataGridCheckBoxColumn).
cb Creates a data column with a combo box editor (DxDataGridComboBoxColumn).
de Creates a data column with a date edit editor (DxDataGridDateEditColumn).
sc Creates a selection column (DxDataGridSelectionColumn).
se Creates a data column with a spin editor (DxDataGridSpinEditColumn).

Summary Types

Expand these code templates on an empty line inside a DxDataGrid to create grid summaries.

Template Description
gs Creates a summary item (DxDataGridSummaryItem). Use the "i" code template (see below) to add summary items.
ts Creates a total summary (TotalSummary).

UI Templates

Expand these code templates on an empty line inside the specified parent tags:

Template Description Parent Tag(s)
drt Creates a UI template used to display a detail row (DetailRowTemplate). DxDataGrid
dt Creates a UI display template for column cells (DisplayTemplate). DxDataGridColumn, DxDataGridComboBoxColumn, DxDataGridCheckBoxColumn, DxDataGridDateEditColumn, or DxDataGridSpinEditColumn.
eft Creates a UI template used to display the edit form (EditFormTemplate). DxDataGrid
et Creates a UI template used to display a column editor (EditTemplate). Expand this code template on an empty line inside a DxDataGridColumn. DxDataGridColumn
ht Creates a UI template for a Data Grid header (HeaderTemplate). DxDataGrid
rpt Creates a UI template used to display row preview sections (RowPreviewTemplate). DxDataGrid

Chart

Code templates for creating charts:

Template Description
xch Creates a chart component (DxChart).
rb Creates a range bar series (DxChartRangeBarSeries). You can expand this template on an empty line inside a DxChart.
Template Description
xcm Creates a Context Menu component (DxContextMenu). Use the "i" code template (see below) to add menu items.
fl Creates a Form Layout component (DxFormLayout). Use the "i" code template (see below) to add form layout items.
xpa Creates a Pager component (DxPager).
xpop Creates a Popup component (DxPopup).
xsl Creates a Stack Layout component (DxStackLayout).
ta Creates a Tab (DxTab) inside a Tabs component.
tp Creates a Tab with content (DxTabPage) inside a Tabs component.
xta Creates a Tabs component (DxTabs).
xtb Creates a Toolbar component (DxToolbar).
xtv Creates a TreeView component (DxTreeView). Use the "n" code template (see below) to add nodes.

Items

Use the "i" code template to add child items to parent components.

Template Description
i Creates a DxContextMenuItem, DxFormLayoutItem, DxStackLayoutItem, or DxDataGridSummaryItem inside the corresponding parent component.

Nodes

Use the "n" code template to add child nodes to a tree view.

Template Description
n Creates a DxTreeViewNode inside the TreeView component.

Pivot Grid

Template Description
xpg Creates a pivot grid component (DxPivotGrid).
f Creates a pivot grid field (DxPivotGridField). Expand this code template on an empty line inside a DxPivotGrid to create the field.

Reports

Template Description
xdv Creates a DxDocumentViewer component that is used to publish (preview, print, and export) documents in Blazor applications (DxDocumentViewer).
xrd Creates a DxReportDesigner component to create an End-User Report Designer in Blazor applications (DxReportDesigner).

Scheduler

Template Description
xsch Creates a calendar and scheduler component (DxScheduler).

Upload

Template Description
xup Creates an Upload component (DxUpload).