Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 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

DxTreeListSummaryItem.ValueDisplayFormat Property

Specifies the display format for the summary value.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[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