Skip to main content

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

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

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

<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