Display Text in Blazor TreeList

Jul 07, 2025
6 minutes to read

The TreeList component creates element content based on the specified data source. You can customize text content of the following elements: data cells, column headers, and summaries.

Data Cell

The TreeList retrieves column values from the bound data source field (FieldName) and displays them in data cells. You can modify these values in the following ways:

Use the DisplayFormat property to specify a display format for column cells.
Handle the CustomizeCellDisplayText event to display custom strings in data cells. Use the DisplayText event argument property to specify the new display text.
Use editor settings to format values in cells. These settings also apply to cell, the filter row editors, and the filter menu.

Data Shaping Operations Based on Cell Display Text

The TreeList can use display text in the following data shaping operations:

Operation	Description
Sort Data	The TreeList sorts data rows by cell values. Set the SortMode property to `DisplayText` to sort data by display text.
Filter Data	The TreeList filters data rows by cell values. Set the FilterMode property to `DisplayText` to filter data by display text.
Search Data	The TreeList searches data by display text.

Limitation: If you use a GridDevExtremeDataSource, the TreeList does not allow you to sort data by display text.

Column Header

The TreeList creates column header display text based on the FieldName property value. The component adds spaces between words when a field name follows the CamelCase naming convention. You can use the Caption property to specify the column header text explicitly.

Razor
EmployeeTask.cs
EmployeeTaskService.cs
Program.cs

razor

@inject EmployeeTaskService EmployeeTaskService

<DxTreeList Data="TreeListData" KeyFieldName="Id" ParentKeyFieldName="ParentId">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" Caption="Task" />
        <DxTreeListDataColumn FieldName="EmployeeName" />
        <DxTreeListDataColumn FieldName="StartDate" />
        <DxTreeListDataColumn FieldName="DueDate" />
    </Columns>
</DxTreeList>

@code {
    List<EmployeeTask> TreeListData { get; set; }

    protected override void OnInitialized() {
        TreeListData = EmployeeTaskService.GenerateData();
    }
}

csharp

public class EmployeeTask {
    public int Id { get; set; }
    public int ParentId { get; set; }
    public string Name { get; set; }
    public string EmployeeName { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime DueDate { get; set; }
    public int Progress { get; set; }
    public EmployeeTask() { }
    public EmployeeTask(
        int id,
        int parentId,
        string name,
        string employeeName,
        DateTime startDate,
        DateTime dueDate,
        int progress
        )
    {
        Id = id;
        ParentId = parentId;
        Name = name;
        EmployeeName = employeeName;
        StartDate = startDate;
        DueDate = dueDate;
        Progress = progress;
    }
}

csharp

public class EmployeeTaskService {
    public List<EmployeeTask> GenerateData() {
        return new List<EmployeeTask>() {
            new EmployeeTask(1, 0, "Simplify & Clarify Product Messaging", "John Heart", new DateTime(2018, 4, 3), new DateTime(2018, 4, 14), 14),
            new EmployeeTask(2, 1, "Prepare Financial Reports", "Samantha Bright", new DateTime(2018, 4, 3), new DateTime(2018, 4, 7), 17),
            new EmployeeTask(3, 1, "Prepare Marketing Plan", "Arthur Miller", new DateTime(2018, 4, 7), new DateTime(2018, 4, 14), 11),
            new EmployeeTask(4, 0, "Create Action Plan to Improve Customer Engagement", "Robert Reagan", new DateTime(2017, 8, 8), new DateTime(2018, 4, 8), 23),
            new EmployeeTask(5, 4, "Update Personnel Files", "Greta Sims", new DateTime(2017, 8, 8), new DateTime(2017, 10, 18), 100),
            new EmployeeTask(6, 4, "Review Health Insurance Options", "Brett Wade", new DateTime(2017, 9, 27), new DateTime(2017, 11, 10), 37),
            new EmployeeTask(7, 4, "Choose Between PPO and HMO Health Plan", "Sandra Johnson", new DateTime(2017, 12, 13), new DateTime(2018, 3, 23), 17),
            new EmployeeTask(8, 4, "Update Google Adwords Strategy", "Ed Holmes", new DateTime(2017, 8, 23), new DateTime(2017, 12, 23), 45),
            new EmployeeTask(9, 4, "Create New Brochure Design", "Barb Banks", new DateTime(2018, 1, 3), new DateTime(2018, 3, 14), 17),
            new EmployeeTask(10, 4, "Obtain Price Quote for New Brochure", "Kevin Carter", new DateTime(2018, 2, 1), new DateTime(2018, 3, 15), 18),
            new EmployeeTask(11, 4, "Brochure Design Review", "Cindy Stanwick", new DateTime(2017, 8, 22), new DateTime(2017, 10, 28), 4),
            new EmployeeTask(12, 4, "Review Website Redesign Strategy", "Sammy Hill", new DateTime(2017, 9, 16), new DateTime(2018, 3, 6), 73),
            new EmployeeTask(13, 4, "Roll Out New Website", "Davey Jones", new DateTime(2017, 11, 7), new DateTime(2018, 2, 6), 9),
            new EmployeeTask(14, 4, "Update Sales/Marketing Strategy", "Victor Norris", new DateTime(2017, 12, 13), new DateTime(2018, 4, 2), 5),
            new EmployeeTask(15, 4, "Update Sales/Revenue Report", "Mary Stern", new DateTime(2017, 12, 25), new DateTime(2018, 4, 2), 4),
            new EmployeeTask(16, 4, "Direct vs Online Sales Comparison Report", "Robin Cosworth", new DateTime(2018, 1, 2), new DateTime(2018, 3, 20), 14),
            new EmployeeTask(17, 4, "Review Sales Report and Approve Modifications", "Kelly Rodriguez", new DateTime(2017, 9, 4), new DateTime(2017, 10, 30), 8),
            new EmployeeTask(18, 4, "Update R&D Strategy", "James Anderson", new DateTime(2017, 11, 13), new DateTime(2017, 12, 4), 12),
            new EmployeeTask(19, 4, "Discuss Updated R&D Strategy", "Antony Remmen", new DateTime(2017, 10, 29), new DateTime(2017, 12, 31), 14),
            new EmployeeTask(20, 4, "Update QA Strategy", "Olivia Peyton", new DateTime(2017, 10, 31), new DateTime(2017, 11, 2), 18),
            new EmployeeTask(21, 4, "Schedule Training Events", "Taylor Riley", new DateTime(2017, 11, 19), new DateTime(2018, 4, 7), 21),
            new EmployeeTask(22, 4, "Approve Hiring of John Jeffers", "Amelia Harper", new DateTime(2018, 1, 7), new DateTime(2018, 4, 8), 10),
            new EmployeeTask(23, 0, "Increase Average Subscription Price", "Wally Hobbs", new DateTime(2017, 8, 9), new DateTime(2017, 9, 13), 96),
            new EmployeeTask(24, 23, "Update Non-Compete Agreements", "Brad Jameson", new DateTime(2017, 8, 9), new DateTime(2017, 9, 3), 96),
            new EmployeeTask(25, 23, "Update Employee Records with New NDA", "Karen Goodson", new DateTime(2017, 8, 23), new DateTime(2018, 9, 10), 100)
        };
    }
}

csharp

// ...
builder.Services.AddSingleton<EmployeeTaskService>();

Run Demo: TreeList - Flat Data

Summary Item

The TreeList creates display text for a summary item based on the following predefined display formats:

<aggregate function>: <summary value>For the COUNT summary and summaries that are shown in the same column where the values are calculated.<aggregate function> of <column caption>: <summary value>For summaries that are shown in another column.

Use the following API members to modify display text strings of total summary items:

ValueDisplayFormatSpecifies the format pattern for the summary value.DisplayTextSpecifies the display text pattern for the summary item. A display text string can include static text and placeholders for summary value and column caption.CustomizeSummaryDisplayTextHandle this event to customize display text for an individual calculated summary value. The TreeList event argument allows you to obtain information about the TreeList’s current state and add this information to a summary item’s display text.

The following code sample customizes display text of a custom summary:

Run Demo: Custom Summary

razor

@inject ISalesByRegionDataProvider SalesByRegionDataProvider
<DxTreeList @ref="TreeList"
            Data="Data"
            KeyFieldName="ID"
            ParentKeyFieldName="RegionID"
            ShowAllRows="true"
            CustomSummary="TreeList_CustomSummary"
            CustomizeSummaryDisplayText="TreeList_CustomizeSummaryDisplayText"
            SelectedDataItemsChanged="TreeList_SelectedDataItemsChanged">
    <Columns>
        <DxTreeListSelectionColumn Width="50px" />
        <DxTreeListDataColumn FieldName="Region" Width="15%" />
        <DxTreeListDataColumn FieldName="MarchSales" DisplayFormat="c0" Width="25%" />
        <DxTreeListDataColumn FieldName="SeptemberSales" DisplayFormat="c0" Width="15%" />
        <DxTreeListDataColumn FieldName="MarchChange" DisplayFormat="p2" Width="15%" />
        <DxTreeListDataColumn FieldName="SeptemberChange" DisplayFormat="p2" Width="15%" />
        <DxTreeListDataColumn FieldName="MarketShare" DisplayFormat="p0" Width="15%" />
    </Columns>
    <TotalSummary>
        <DxTreeListSummaryItem SummaryType="TreeListSummaryItemType.Count" FieldName="Region" />
        <DxTreeListSummaryItem SummaryType="TreeListSummaryItemType.Sum" FieldName="MarchSales" />
        <DxTreeListSummaryItem SummaryType="TreeListSummaryItemType.Custom" FieldName="MarchSales" Name="Custom" />
    </TotalSummary>
</DxTreeList>

@code {
    ITreeList TreeList { get; set; }
    object Data { get; set; }
    protected override void OnInitialized() {
        Data = SalesByRegionDataProvider.GenerateData();
    }
    void TreeList_CustomSummary(TreeListCustomSummaryEventArgs e) {
        switch(e.SummaryStage) {
            case TreeListCustomSummaryStage.Start:
                e.TotalValue = 0m;
                break;
            case TreeListCustomSummaryStage.Calculate:
                if(e.TreeList.IsDataItemSelected(e.DataItem))
                    e.TotalValue = (decimal)e.TotalValue + (decimal)e.GetRowValue("MarchSales");
                break;
        }
    }
    void TreeList_CustomizeSummaryDisplayText(TreeListCustomizeSummaryDisplayTextEventArgs e) {
        if(e.Item.Name == "Custom")
            e.DisplayText = string.Format("Sum of Selected ({0}): {1:c0}", e.TreeList.SelectedDataItems.Count, e.Value);
    }
    void TreeList_SelectedDataItemsChanged(IReadOnlyList<object> newSelection) {
        TreeList.RefreshSummary();
    }
}