Skip to main content
All docs
V24.1

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. null to inherit the value from the DxTreeListDataColumn.DisplayFormat property.

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();
    }
}

Custom summary text

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();
    }
}

Custom summary text

For more information about summaries in the TreeList component, refer to the following topic: Summary in Blazor TreeList.

See Also