Templates for DevExpress Components

• Mar 03, 2021
• 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.

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.

Navigation and Layout Components

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).