DxGridDataColumn.FilterRowCellTemplate Property

Specifies a template used to display the column’s filter row cell.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<GridDataColumnFilterRowCellTemplateContext> FilterRowCellTemplate { get; set; }

Property Value

Type	Description
RenderFragment<GridDataColumnFilterRowCellTemplateContext>	The template for the column’s filter row cell.

Remarks

Enable the ShowFilterRow option to activate a row that allows users to filter Grid data. The filter row displays in-place text editors for all data columns.

Define a column’s FilterRowCellTemplate to display a custom editor in the filter row cell. Bind these editors to nullable type variables. The template accepts a GridDataColumnFilterRowCellTemplateContext object as the context parameter. This parameter contains the FilterRowValue and FilterCriteria properties that specify the current filter row value and the entire filter criteria applied to the column. You can also access the DataColumn and Grid objects and use their members to get additional information about the column and the Grid, respectively.

To define a common template for all filter row cells in the grid, use the DataColumnFilterRowCellTemplate property.

The example below displays the following custom editors:

• Order ID: DxSpinEdit. Users can click spin buttons or type a numeric value in the editor.
• Order Date: DxDateEdit. Users can select a date from the drop-down calendar or type a date in the editor.
• Unit Price: DxComboBox. The drop-down list contains a set of predefined criteria.
• Shipped: DxComboBox. The drop-down list contains True and False values.

Razor

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

<DxGrid Data="@Data"
        ShowFilterRow="true">
    <Columns>
        <DxGridDataColumn FieldName="OrderId" Caption="Order ID" DisplayFormat="d" SortIndex="0">
            <FilterRowCellTemplate>
                <DxSpinEdit Value="(int?)context.FilterRowValue"
                            ValueChanged="(int? v) => context.FilterRowValue = v"
                            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
            </FilterRowCellTemplate>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="OrderDate" DisplayFormat="d">
            <FilterRowCellTemplate>
                <DxDateEdit Date="(DateTime?)context.FilterRowValue"
                            DateChanged="(DateTime? v) => context.FilterRowValue = v"
                            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
            </FilterRowCellTemplate>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="ProductName"
                          FilterRowValue='"Queso"'
                          FilterRowOperatorType="GridFilterRowOperatorType.Contains" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c2">
            <FilterRowCellTemplate>
                <DxComboBox @bind-Value="context.FilterCriteria"
                            Data="UnitPriceIntervals" ValueFieldName="Criteria" TextFieldName="DisplayText"
                            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
            </FilterRowCellTemplate>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="Shipped" UnboundType="GridUnboundColumnType.Boolean"
                          UnboundExpression="[ShippedDate] <> Null" >
            <CellDisplayTemplate>
                <DxCheckBox CssClass="d-inline-block" Enabled="false" Checked="(bool)context.Value" />
            </CellDisplayTemplate>
            <FilterRowCellTemplate>
                <DxComboBox Value="(bool?)context.FilterRowValue"
                            ValueChanged="(bool? v) => context.FilterRowValue = v"
                            Data="ShippedStates" ValueFieldName="Value" TextFieldName="DisplayText"
                            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
            </FilterRowCellTemplate>
        </DxGridDataColumn>
    </Columns>
</DxGrid>

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

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        Data = Northwind.Invoices
            .ToList();
    }

    static readonly IReadOnlyList<PriceFilterInterval> UnitPriceIntervals = new PriceFilterInterval[] {
        new("[UnitPrice] < 10", "< $10"),
        new("[UnitPrice] between (10, 100)", "$10 to $100"),
        new("[UnitPrice] > 100", "> $100")
    };
    static readonly IReadOnlyList<ShippedState> ShippedStates = new ShippedState[] {
        new(true, "Yes"),
        new(false, "No")
    };
    record PriceFilterInterval(CriteriaOperator Criteria, string DisplayText) {
        public PriceFilterInterval(string CriteriaText, string DisplayText)
            : this(CriteriaOperator.Parse(CriteriaText), DisplayText) {
        }
    }
    record ShippedState(bool? Value, string DisplayText);

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

Invoice

using System;
#nullable disable

namespace Grid.Northwind {
    public partial class Invoice {
        public string ShipName { get; set; }
        public string ShipAddress { get; set; }
        public string ShipCity { get; set; }
        public string ShipRegion { get; set; }
        public string ShipPostalCode { get; set; }
        public string ShipCountry { get; set; }
        public string CustomerId { get; set; }
        public string CustomerName { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
        public string Salesperson { get; set; }
        public int OrderId { get; set; }
        public DateTime? OrderDate { get; set; }
        public DateTime? RequiredDate { get; set; }
        public DateTime? ShippedDate { get; set; }
        public string ShipperName { get; set; }
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
        public short Quantity { get; set; }
        public float Discount { get; set; }
        public decimal? ExtendedPrice { get; set; }
        public decimal? Freight { 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<Invoice> Invoices { 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<Invoice>(entity => {
                entity.HasNoKey();
                entity.ToView("Invoices");
                entity.Property(e => e.Address).HasMaxLength(60);
                entity.Property(e => e.City).HasMaxLength(15);
                entity.Property(e => e.Country).HasMaxLength(15);
                entity.Property(e => e.CustomerId)
                    .HasMaxLength(5)
                    .HasColumnName("CustomerID")
                    .IsFixedLength(true);
                entity.Property(e => e.CustomerName)
                    .IsRequired()
                    .HasMaxLength(40);
                entity.Property(e => e.ExtendedPrice).HasColumnType("money");
                entity.Property(e => e.Freight).HasColumnType("money");
                entity.Property(e => e.OrderDate).HasColumnType("datetime");
                entity.Property(e => e.OrderId).HasColumnName("OrderID");
                entity.Property(e => e.PostalCode).HasMaxLength(10);
                entity.Property(e => e.ProductId).HasColumnName("ProductID");
                entity.Property(e => e.ProductName)
                    .IsRequired()
                    .HasMaxLength(40);
                entity.Property(e => e.Region).HasMaxLength(15);
                entity.Property(e => e.RequiredDate).HasColumnType("datetime");
                entity.Property(e => e.Salesperson)
                    .IsRequired()
                    .HasMaxLength(31);
                entity.Property(e => e.ShipAddress).HasMaxLength(60);
                entity.Property(e => e.ShipCity).HasMaxLength(15);
                entity.Property(e => e.ShipCountry).HasMaxLength(15);
                entity.Property(e => e.ShipName).HasMaxLength(40);
                entity.Property(e => e.ShipPostalCode).HasMaxLength(10);
                entity.Property(e => e.ShipRegion).HasMaxLength(15);
                entity.Property(e => e.ShippedDate).HasColumnType("datetime");
                entity.Property(e => e.ShipperName)
                    .IsRequired()
                    .HasMaxLength(40);
                entity.Property(e => e.UnitPrice).HasColumnType("money");
            });
            // ...
            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);
});

Run Demo: Data Grid - Filter Row View Example: Implement filter operator selector View Example: Implement a date range filter

Editor Render Mode

The Grid component renders editors in the filter row as standalone components with borders and paddings between an editor and cell borders. Set the EditorRenderMode property to Integrated to render editors, which are directly placed in the FilterRowCellTemplate template, so that they occupy the entire cell. In this mode, editor borders are not displayed.

For more information about filter row, see the following topic: Filter Row.

Implements

FilterRowCellTemplate