Display Text in Blazor TreeList
- 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.
Editor Settings
Column Value Types
All data types
DxCheckBoxSettings.CheckedDisplayText
DxCheckBoxSettings.UncheckedDisplayText
DxCheckBoxSettings.IndeterminateDisplayTextAll data types
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.
@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();
}
}
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:
- ValueDisplayFormat
- Specifies the format pattern for the summary value.
- DisplayText
- Specifies the display text pattern for the summary item. A display text string can include static text and placeholders for summary value and column caption.
- CustomizeSummaryDisplayText
- Handle 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:
@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();
}
}
