DxGridSelectionColumn.HeaderTemplate Property

Specifies a template for the selection column header.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<GridSelectionColumnHeaderTemplateContext> HeaderTemplate { get; set; }

Property Value

Type	Description
RenderFragment<GridSelectionColumnHeaderTemplateContext>	The template for the selection column header.

Remarks

A selection column allows users to select and deselect rows. When the SelectionMode property is set to GridSelectionMode.Multiple (the default value), the selection column displays checkboxes. A user can click the checkbox in the header cell to select or deselect all rows on the current page.

You can define the HeaderTemplate to display custom content in the selection column header. Use the template’s context parameter to access the SelectionColumn and Grid objects. The parameter’s Selected property specifies whether rows on the current page are selected.

The following code snippet displays the custom Select All button in the column header.

Razor

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

<DxGrid Data="GridDataSource"
        @bind-SelectedDataItems="@SelectedDataItems"
        KeyFieldName="ProductId"
        @ref="MyGrid">
    <Columns>
        <DxGridSelectionColumn>
            <HeaderTemplate>
                <DxButton Click="() => MyGrid.SelectAllOnPage()" Text="Select All"
                          RenderStyle="ButtonRenderStyle.Link" />
            </HeaderTemplate>
        </DxGridSelectionColumn>
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="QuantityPerUnit" />
        <DxGridDataColumn FieldName="UnitsInStock" />
    </Columns>
</DxGrid>

@code {
    IEnumerable<object> GridDataSource { get; set; }
    NorthwindContext Northwind { get; set; }
    IReadOnlyList<object> SelectedDataItems { get; set; }
    IGrid MyGrid { get; set; }

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        GridDataSource = Northwind.Products.ToList();
        SelectedDataItems = GridDataSource.Skip(1).Take(2).ToList();
    }

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

Product

using System;
using System.Collections.Generic;

#nullable disable

namespace Grid.Northwind {
    public partial class Product {
        public Product() {
            OrderDetails = new HashSet<OrderDetail>();
        }

        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public int? SupplierId { get; set; }
        public int? CategoryId { get; set; }
        public string QuantityPerUnit { get; set; }
        public decimal? UnitPrice { get; set; }
        public short? UnitsInStock { get; set; }
        public short? UnitsOnOrder { get; set; }
        public short? ReorderLevel { get; set; }
        public bool Discontinued { get; set; }

        public virtual Category Category { get; set; }
        public virtual Supplier Supplier { get; set; }
        public virtual ICollection<OrderDetail> OrderDetails { 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<Product> Products { 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.Entity<Product>(entity => {
                entity.HasIndex(e => e.CategoryId, "CategoriesProducts");
                entity.HasIndex(e => e.CategoryId, "CategoryID");
                entity.HasIndex(e => e.ProductName, "ProductName");
                entity.HasIndex(e => e.SupplierId, "SupplierID");
                entity.HasIndex(e => e.SupplierId, "SuppliersProducts");
                entity.Property(e => e.ProductId).HasColumnName("ProductID");
                entity.Property(e => e.CategoryId).HasColumnName("CategoryID");
                entity.Property(e => e.ProductName)
                    .IsRequired()
                    .HasMaxLength(40);
                entity.Property(e => e.QuantityPerUnit).HasMaxLength(20);
                entity.Property(e => e.ReorderLevel).HasDefaultValueSql("((0))");
                entity.Property(e => e.SupplierId).HasColumnName("SupplierID");
                entity.Property(e => e.UnitPrice)
                    .HasColumnType("money")
                    .HasDefaultValueSql("((0))");
                entity.Property(e => e.UnitsInStock).HasDefaultValueSql("((0))");
                entity.Property(e => e.UnitsOnOrder).HasDefaultValueSql("((0))");
                entity.HasOne(d => d.Category)
                    .WithMany(p => p.Products)
                    .HasForeignKey(d => d.CategoryId)
                    .HasConstraintName("FK_Products_Categories");
                entity.HasOne(d => d.Supplier)
                    .WithMany(p => p.Products)
                    .HasForeignKey(d => d.SupplierId)
                    .HasConstraintName("FK_Products_Suppliers");
            });
            // ...
            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);
});

Note

The select all operation can be temporarily unavailable if there are now data rows to select. For instance, this occurs when you bind the Grid to an asynchronous data source (such as a Server Mode data source or GridDevExtremeDataSource). Use the SelectEnabled template parameter to specify the enabled or disabled state for a custom select element.

For more information, refer to the following topics:

• Templates in Blazor Grid
• Selection and Focus in Blazor Grid

Implements

HeaderTemplate