Skip to main content
All docs
V25.1
  • DevExpress v25.1 Update — Your Feedback Matters

    Our What's New in v25.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

    Take the survey Not interested

    TreeListCustomizeElementEventArgs Class

    Provides data for the CustomizeElement event.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    #Declaration

    C#
    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 {
        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);
    }
    

    DevExpress Blazor TreeList - Customize Rows

    #Inheritance

    Object
    DevExpress.Blazor.Internal.GridEventArgsBase
    DevExpress.Blazor.Internal.GridCustomizeElementEventArgsBase
    TreeListCustomizeElementEventArgs
    See Also