Skip to main content

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

DxGridSummaryItem.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

A string that specifies the display format. null to inherit the value from the DxGridDataColumn.DisplayFormat property.

#Remarks

The Grid 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.
Example: Max: 130
<aggregate function> of <column caption>: <summary value>
For summaries that are shown in 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>

razor
<DxGrid Data="@Data" >
    <Columns>
        <DxGridDataColumn FieldName="CompanyName" />
        <DxGridDataColumn FieldName="City" />
        <DxGridDataColumn FieldName="Country" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c"/>
        <DxGridDataColumn FieldName="Quantity" />
        <DxGridDataColumn FieldName="Total" UnboundType="GridUnboundColumnType.Decimal"
                          UnboundExpression="[UnitPrice] * [Quantity]" DisplayFormat="c" />
    </Columns>
    <TotalSummary>
        @* Summaries in the UnitPrice column use format specified at the column level *@
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Min" FieldName="UnitPrice" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Max" FieldName="UnitPrice" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Avg" FieldName="Quantity" 
                           ValueDisplayFormat="0.00" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="Total" 
                           ValueDisplayFormat="~${0:n0}" />
    </TotalSummary>
</DxGrid>

Blazor Grid Format Value

A summary item’s DisplayText property allows you to specify display text pattern for this summary. A display text string can include static text and placeholders for the summary value and column caption.

razor
<DxGrid Data="@Data">
    <Columns>
        <DxGridDataColumn FieldName="CompanyName" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" />
        <DxGridDataColumn FieldName="Quantity"/>
        <DxGridDataColumn FieldName="Total" UnboundType="GridUnboundColumnType.Decimal" 
                          DisplayFormat="c" UnboundExpression="[UnitPrice]*[Quantity]" />
    </Columns>
    <TotalSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Avg" FieldName="Quantity" 
                           ValueDisplayFormat="0.00" />
        <DxGridSummaryItem FieldName="Total" SummaryType="GridSummaryItemType.Min"
                           DisplayText="The cheapest order is {0}" />
        <DxGridSummaryItem FieldName="Total" SummaryType="GridSummaryItemType.Max"
                           DisplayText="The most expensive order is is {0}" />
    </TotalSummary>
</DxGrid>

Custom summary text

Run Demo: Grid - Total Summary Run Demo: Grid - Group Summary Watch Video: Grid - Summary

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

#Implements

See Also