DxGridSummaryItem.ValueDisplayFormat Property

Specifies the display format for the summary item value.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.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. An empty string applies the predefined format string.

Remarks

The DxGrid supports the total and group summaries. Each summary can contain predefined and custom summary items.

All summary items have the following predefined display format: {Summary function}: {summary value}. For example, Count: 100 and Sum: 1,000.

Use the ValueDisplayFormat property to apply a custom format to a summary item value (without a label). You can use a standard or custom format string to customize the displayed value.

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

Watch Video: Grid - Summary

The code below applies the currency format to the total summary for the Unit Price column.

Razor

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="GridDataSource"
        UnboundColumnData="Grid_CustomUnboundColumnData">
    <Columns>
        <DxGridDataColumn FieldName="ProductId" Caption="Product ID" DisplayFormat="d" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="Quantity" />
        <DxGridDataColumn FieldName="Discount" DisplayFormat="p0" />
        <DxGridDataColumn FieldName="TotalPrice"
                          DisplayFormat="c"
                          UnboundType="GridUnboundColumnType.Decimal" />
    </Columns>
    <TotalSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="TotalPrice" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Max"
                           FieldName="UnitPrice"
                           ValueDisplayFormat="c" />
    </TotalSummary>
</DxGrid>

@code {
    object GridDataSource { get; set; }
    NorthwindContext Northwind { get; set; }

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        GridDataSource = Northwind.OrderDetails
            .Include(i => i.Order)
            .Include(i => i.Product)
            .ToList();
    }

    void Grid_CustomUnboundColumnData(GridUnboundColumnDataEventArgs e) {
        if (e.FieldName == "TotalPrice") {
            var UnitPrice = Convert.ToDecimal(e.GetRowValue("UnitPrice"));
            var Quantity = Convert.ToDecimal(e.GetRowValue("Quantity"));
            var Discount = Convert.ToDecimal(e.GetRowValue("Discount"));
            e.Value = Quantity * UnitPrice * (1 - Discount);
        }
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

OrderDetail

using System;
using System.Collections.Generic;

#nullable disable

namespace Grid.Northwind {
    public partial class OrderDetail {
        public int OrderId { get; set; }
        public int ProductId { get; set; }
        public decimal UnitPrice { get; set; }
        public short Quantity { get; set; }
        public float Discount { get; set; }

        public virtual Order Order { get; set; }
        public virtual Product Product { get; set; }
    }
}

NorthwindContext

using Microsoft.EntityFrameworkCore;
#nullable disable

namespace Grid.Northwind {
    public partial class NorthwindContext : DbContext {

        public NorthwindContext(DbContextOptions<NorthwindContext> options)
            : base(options) {
        }
        // ...
        public virtual DbSet<OrderDetail> OrderDetails { get; set; }
        // ...
        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) {
            if(!optionsBuilder.IsConfigured) {
                optionsBuilder.UseSqlServer("Server=.\\sqlexpress;Database=Northwind;Integrated Security=true");
            }
        }

        protected override void OnModelCreating(ModelBuilder modelBuilder) {
            modelBuilder.HasAnnotation("Relational:Collation", "SQL_Latin1_General_CP1_CI_AS");
            // ...
            modelBuilder.Entity<OrderDetail>(entity => {
                entity.HasKey(e => new { e.OrderId, e.ProductId })
                    .HasName("PK_Order_Details");
                entity.ToTable("Order Details");
                entity.HasIndex(e => e.OrderId, "OrderID");
                entity.HasIndex(e => e.OrderId, "OrdersOrder_Details");
                entity.HasIndex(e => e.ProductId, "ProductID");
                entity.HasIndex(e => e.ProductId, "ProductsOrder_Details");
                entity.Property(e => e.OrderId).HasColumnName("OrderID");
                entity.Property(e => e.ProductId).HasColumnName("ProductID");
                entity.Property(e => e.Quantity).HasDefaultValueSql("((1))");
                entity.Property(e => e.UnitPrice).HasColumnType("money");
                entity.HasOne(d => d.Order)
                    .WithMany(p => p.OrderDetails)
                    .HasForeignKey(d => d.OrderId)
                    .OnDelete(DeleteBehavior.ClientSetNull)
                    .HasConstraintName("FK_Order_Details_Orders");
                entity.HasOne(d => d.Product)
                    .WithMany(p => p.OrderDetails)
                    .HasForeignKey(d => d.ProductId)
                    .OnDelete(DeleteBehavior.ClientSetNull)
                    .HasConstraintName("FK_Order_Details_Products");
            });
            // ...
            OnModelCreatingPartial(modelBuilder);
        }

        partial void OnModelCreatingPartial(ModelBuilder modelBuilder);
    }
}

Program.cs

using Microsoft.EntityFrameworkCore;
// ...
builder.Services.AddDbContextFactory<NorthwindContext>((sp, options) => {
    var env = sp.GetRequiredService<IWebHostEnvironment>();
    var dbPath = Path.Combine(env.ContentRootPath, "Northwind-5e44b51f.mdf");
    options.UseSqlServer("Server=(localdb)\\MSSQLLocalDB;Integrated Security=true;AttachDbFileName=" + dbPath);
});

The ValueDisplayFormat property also accepts format strings with the {0} placeholder. The format string syntax is below:

<custom text>{0:<format specifier>}<custom text>

• custom text - any plain text displayed before and after the summary value.
• ‘{0}’ - the placeholder for the summary value.
• format specifier - specifies the value format.

The following code shows possible format strings:

<DxGrid Data="GridDataSource">
    @* ... *@
    <TotalSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="TotalPrice" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Max"
                           FieldName="UnitPrice"
                           ValueDisplayFormat="c" />
                           @*
                           ValueDisplayFormat="${0}"
                           or
                           ValueDisplayFormat="my custom text {0:c}"
                           *@
    </TotalSummary>

</DxGrid>

If you need to customize the entire summary text (label and value), use the CustomizeSummaryDisplayText property.

Implements

ValueDisplayFormat