TreeListCustomizeElementEventArgs.ElementType Property
Returns an element type.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
#Declaration
public TreeListElementType ElementType { get; }
#Property Value
Type | Description |
---|---|
Tree |
An enumeration value. |
Available values:
Name | Description |
---|---|
Data |
A data row. |
Data |
A data column cell. |
Command |
A command column cell. |
Selection |
A selection column cell. |
Edit |
An edit row. |
Edit |
A cell displayed in the edited row. |
Edit |
A command column cell displayed in the edited row. |
Edit |
A selection column cell displayed in the edited row. |
Edit |
An edit form cell. |
Popup |
|
Filter |
The filter row. |
Filter |
A filter row’s edit cell. |
Filter |
A filter row‘s command column cell. |
Filter |
A filter row’s selection column cell. |
Header |
A row that contains Tree |
Header |
A data column header cell. |
Header |
A command column header cell. |
Header |
A selection column‘s header cell. |
Footer |
The footer. |
Footer |
A band‘s footer cell. |
Footer |
The footer‘s command column cell. |
Footer |
The selection column’s footer cell. |
Column |
A column chooser item. |
Pager |
A container that stores the Tree |
Toolbar |
A container that stores the Tree |
Empty |
An empty data area. |
Empty |
A band‘s empty data cell. |
Header |
A band‘s header cell. |
Footer |
A footer cell. |
Row |
A drag anchor. |
Drag |
A drag hint. |
Edit |
A new item row. |
#Remarks
Use this property to define an element type when you handle the CustomizeElement event.
The following code customizes the appearance of TreeList elements that meet the following criteria:
- Rows that have child rows are highlighted.
- Cells in March Change and September Change columns that display values larger than
5%
are colored green. - Cells in March Change and September Change columns that display negative values are colored red.
<DxTreeList Data="Data"
KeyFieldName="ID"
ParentKeyFieldName="RegionID"
CustomizeElement="TreeList_CustomizeElement">
<Columns>
<DxTreeListDataColumn FieldName="Region" />
<DxTreeListDataColumn FieldName="MarchSales" DisplayFormat="c0" />
<DxTreeListDataColumn FieldName="SeptemberSales" DisplayFormat="c0" />
<DxTreeListDataColumn FieldName="MarchChange" DisplayFormat="p2" />
<DxTreeListDataColumn FieldName="SeptemberChange" DisplayFormat="p2" />
<DxTreeListDataColumn FieldName="MarketShare" DisplayFormat="p0" />
</Columns>
</DxTreeList>
@code {
object Data { get; set; }
protected override void OnInitialized () {
Data = SalesByRegionDataProvider.GenerateData();
}
void TreeList_CustomizeElement(TreeListCustomizeElementEventArgs e) {
if(e.ElementType == TreeListElementType.DataRow
&& (int)e.TreeList.GetRowValue(e.VisibleIndex, "RegionID") == 0) {
e.CssClass = "parent-region-row";
}
if(e.ElementType == TreeListElementType.DataCell && e.Column is ITreeListDataColumn dataColumn) {
if(dataColumn.FieldName == "MarchChange" || dataColumn.FieldName == "SeptemberChange") {
var value = (decimal)e.TreeList.GetRowValue(e.VisibleIndex, dataColumn.FieldName);
if(value > 0.05M) {
e.CssClass = "win-threshold";
}
else if(value < 0) {
e.CssClass = "loss-threshold";
}
}
}
}
}
.parent-region-row {
background-color: color-mix(in srgb, var(--bs-gray-300), transparent 50%);
}
td.loss-threshold {
background-color: rgba(245, 198, 203, 0.5);
}
td.win-threshold {
background-color: rgba(198, 245, 203, 0.5);
}
#Images
#TreeList Rows
#Data Row
#Empty Data Area
#Header and Footer
#Header Band Elements
On the image below, the Contact Information column is an empty band: