Back to Devexpress

TreeListCustomizeElementEventArgs Class

blazor-devexpress-dot-blazor-c7598982.md

latest3.3 KB
Original Source

TreeListCustomizeElementEventArgs Class

Provides data for the CustomizeElement event.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
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

razor
<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";
                }
            }
        }
    }
}
css
.parent-region-row {
    --dxbl-grid-row-bg: var(--dxds-color-surface-neutral-subdued-rest);
}
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.Grid.Internal.GridEventArgsBase DevExpress.Blazor.Grid.Internal.GridCustomizeElementEventArgsBase TreeListCustomizeElementEventArgs

See Also

TreeListCustomizeElementEventArgs Members

DevExpress.Blazor Namespace