TreeListCustomizeElementEventArgs Class

Provides data for the CustomizeElement event.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class TreeListCustomizeElementEventArgs :
    GridCustomizeElementEventArgsBase

Remarks

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.

Run Demo: Conditional Formatting

<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);
}

Inheritance

Object

DevExpress.Blazor.Internal.GridEventArgsBase

DevExpress.Blazor.Internal.GridCustomizeElementEventArgsBase

TreeListCustomizeElementEventArgs