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

    ITreeListDataColumn Interface

    An interface that defines a TreeList data column‘s API members (properties and methods).

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    #Declaration

    C#
    public interface ITreeListDataColumn :
        ITreeListColumn

    #Remarks

    Use the ITreeListDataColumn interface when you access a TreeList data column’s API members as follows:

    • You use the @ref attribute to reference a TreeList data column.
    • You access a DataColumn object from templates or event handlers.
    • You access elements of the TreeList column collection (for instance, the collection that the GetDataColumns() method returns).

    In other cases, bind your data to column parameters.

    Note

    To change values of a TreeList data column’s parameters outside the component’s markup, enclose your code between BeginUpdate() and EndUpdate() method calls. Otherwise, an exception occurs.

    The following code snippet defines the DataColumnCellDisplayTemplate template to distinguish between odd and even rows. The template context‘s DataColumn property returns an ITreeListDataColumn object. This object is a data column to which the processed cell belongs.

    @inject EmployeeTaskService EmployeeTaskService
    
    <style>
        .my-style {
            color: blue;
            font-weight: bold;
        }
        .my-date-style {
            color: mediumblue;
            font-weight: bold;
        }
    </style>
    
    <DxTreeList Data="TreeListData" KeyFieldName="Id" ParentKeyFieldName="ParentId">
        <Columns>
            <DxTreeListDataColumn FieldName="Name" Caption="Task" />
            <DxTreeListDataColumn FieldName="EmployeeName" />
            <DxTreeListDataColumn FieldName="StartDate" />
            <DxTreeListDataColumn FieldName="DueDate" />
        </Columns>
        <DataColumnCellDisplayTemplate>
            @{
                if (context.VisibleIndex % 2 == 1) {
                    if (context.DataColumn.FieldName.Contains("Date")) {
                        <span class="my-date-style">@context.DisplayText</span>
                    }
                    else {
                        <span class="my-style">@context.DisplayText</span>
                    }
                }
                else {
                    <span>@context.DisplayText</span>
                }
            }
        </DataColumnCellDisplayTemplate>
    </DxTreeList>
    
    @code {
        List<EmployeeTask> TreeListData { get; set; }
    
        protected override void OnInitialized() {
            TreeListData = EmployeeTaskService.GenerateData();
        }
    }
    

    Blazor TreeList Column Cell Display Template

    See Also