DxTreeListSummaryItem.ValueDisplayFormat Property
Specifies the display format for the summary value.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.1.dll
NuGet Package: DevExpress.Blazor
Declaration
[DefaultValue(null)]
[Parameter]
public string ValueDisplayFormat { get; set; }
Property Value
Type | Default | Description |
---|---|---|
String | null | The display format. |
Remarks
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 a footer of the same column where the values are calculated.
Example:Max: 130
- <aggregate function> of <column caption>: <summary value>
- For summaries that are shown in a footer of another column.
Example:Max of Quantity: 130
Use the ValueDisplayFormat
property to specify a display format for the summary item value (the <summary value> part). Refer to the following topic for more information about supported format strings: Format types in .NET.
The ValueDisplayFormat
property accepts format strings with the {0} placeholder for the summary value. The format string syntax is the following: <custom text>{0:<format specifier>}<custom text>
@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" />
<DxTreeListDataColumn FieldName="Status" Caption="Progress" DisplayFormat="p0" />
</Columns>
<TotalSummary>
<DxTreeListSummaryItem FieldName="DueDate" ValueDisplayFormat="y" SummaryType="TreeListSummaryItemType.Max" />
<DxTreeListSummaryItem FieldName="Status" ValueDisplayFormat="~{0:p0}" SummaryType="TreeListSummaryItemType.Avg" />
</TotalSummary>
</DxTreeList>
@code {
List<EmployeeTask> TreeListData { get; set; }
protected override void OnInitialized() {
TreeListData = EmployeeTaskService.GenerateData();
}
}
A summary item’s DisplayText property allows you to specify a display text pattern for this summary. A display text string can include static text and placeholders for the summary value and column caption.
@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" />
<DxTreeListDataColumn FieldName="Status" Caption="Progress" DisplayFormat="p0" />
</Columns>
<TotalSummary>
<DxTreeListSummaryItem FieldName="Name" DisplayText="Total Number of Tasks: {0}" SummaryType="TreeListSummaryItemType.Count" />
<DxTreeListSummaryItem FieldName="Status" DisplayText="Average {1}: {0}" SummaryType="TreeListSummaryItemType.Avg" />
</TotalSummary>
</DxTreeList>
@code {
List<EmployeeTask> TreeListData { get; set; }
protected override void OnInitialized() {
TreeListData = EmployeeTaskService.GenerateData();
}
}
For more information about summaries in the TreeList component, refer to the following topic: Summary in Blazor TreeList.