DxGrid.FilterBuilderTemplate Property

Specifies a template for the filter builder.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

Declaration

[Parameter]
public RenderFragment<GridFilterBuilderTemplateContext> FilterBuilderTemplate { get; set; }

Property Value

Type	Description
RenderFragment<GridFilterBuilderTemplateContext>	The filter builder template.

Remarks

The filter builder dialog is a centralized viewer/editor for Grid component’s filter conditions. Users can edit and combine filter criteria applied to any number of columns, all within the same window. To open this dialog, users can click the current filter region in the filter panel. The ShowFilterBuilder() method opens the dialog from code.

Read Tutorial: Filter Panel and Filter Builder Run Demo: Filter Builder Customization

Specify a FilterBuilderTemplate to apply the following customizations:

• Display custom filter fields
• Display custom content within the filter builder dialog
• Change settings of the integrated Filter Builder component

Example

The following code snippet customizes the filter builder dialog as follows:

• Displays the applied filter condition above the Filter Builder component
• Limits available logical operators to And and Or
• Adds a Country filter field

Razor

@inject NwindDataService NwindDataService

<DxGrid Data="Data"
        FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
        FilterPanelDisplayMode="GridFilterPanelDisplayMode.Always">
    <Columns>
        <DxGridDataColumn FieldName="SalesPerson" Caption="Salesperson">
            <EditSettings>
                <DxComboBoxSettings Data="Salespersons" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridBandColumn Caption="Order">
            <Columns>
                <DxGridDataColumn FieldName="CompanyName" />
                <DxGridDataColumn FieldName="OrderDate" Caption="Date" />
                <DxGridBandColumn Caption="Product">
                    <Columns>
                        <DxGridDataColumn FieldName="ProductName" Caption="Name">
                            <EditSettings>
                                <DxComboBoxSettings Data="ProductNames" />
                            </EditSettings>
                        </DxGridDataColumn>
                        <DxGridDataColumn FieldName="UnitPrice" />
                    </Columns>
                </DxGridBandColumn>
                <DxGridDataColumn FieldName="Quantity" />
            </Columns>
        </DxGridBandColumn>
    </Columns>
    <FilterBuilderTemplate>
        <b>Currently Applied Filter:</b> @(context.Grid.GetFilterCriteria()?.ToString() ?? "No filter")
        <DxFilterBuilder @bind-FilterCriteria="context.FilterCriteria" 
            GroupOperatorTypes="[FilterBuilderGroupOperatorType.And, FilterBuilderGroupOperatorType.Or]">
            <Fields>
                @context.RenderDefaultFields()
                <DxFilterBuilderField FieldName="ShipCountry" Caption="Country"
                    CaptionFullPath="Shipping Info.Country">
                    <EditSettings>
                        <DxComboBoxSettings Data="ShipCountries" />
                    </EditSettings>
                </DxFilterBuilderField>
            </Fields>
        </DxFilterBuilder>
    </FilterBuilderTemplate>
</DxGrid>

@code {
    object Data { get; set; }

    IEnumerable<string> Salespersons { get; set; }
    IEnumerable<string> ProductNames { get; set; }
    IEnumerable<string> ShipCountries { get; set; }

    protected override async Task OnInitializedAsync() {
        var invoices = await NwindDataService.GetInvoicesAsync();
        var customers = await NwindDataService.GetCustomersAsync();

        var invoiceList = invoices.ToList();
        Salespersons = invoiceList.Select(i => i.Salesperson)
                              .Where(s => !string.IsNullOrWhiteSpace(s)).Distinct().OrderBy(s => s).ToList();
        ProductNames = invoiceList.Select(i => i.ProductName)
                              .Where(s => !string.IsNullOrWhiteSpace(s)).Distinct().OrderBy(s => s).ToList();
        ShipCountries = invoiceList.Select(i => i.ShipCountry)
                              .Where(s => !string.IsNullOrWhiteSpace(s)).Distinct().OrderBy(s => s).ToList();

        Data = invoiceList.OrderBy(i => i.OrderDate).Join(customers, i => i.CustomerId, c => c.CustomerId, 
            (i, c) => { return new {
                CompanyName = c.CompanyName,
                SalesPerson = i.Salesperson,
                UnitPrice = i.UnitPrice,
                OrderDate = i.OrderDate,
                ProductName = i.ProductName,
                Quantity = i.Quantity,
                ShipCountry = i.ShipCountry,
                ShipCity = i.ShipCity,
                ShipName = i.ShipName
            };
        });
    }
}

Invoice

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

namespace BlazorDemo.Data.Northwind {
    public 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; }
    }
}

Customer

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

namespace BlazorDemo.Data.Northwind {
    public partial class Customer {
        public Customer() {
            Orders = new HashSet<Order>();
        }

        public string CustomerId { get; set; }
        public string CompanyName { get; set; }
        public string ContactName { get; set; }
        public string ContactTitle { 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 Phone { get; set; }
        public string Fax { get; set; }

        public virtual ICollection<Order> Orders { get; set; }
    }
}

NwindDataService.Invoices

using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using BlazorDemo.Data.Northwind;
using BlazorDemo.DataProviders;

namespace BlazorDemo.Services {
    public partial class NwindDataService {
        public Task<IEnumerable<Invoice>> GetInvoicesAsync(CancellationToken ct = default) {
            // Return your data here
        }
        public Task<IEnumerable<Customer>> GetCustomersAsync(CancellationToken ct = default) {
            // Return your data here
        }
    }
}

Program.cs

// ...
builder.Services.AddScoped<NwindDataService>();

Implements

FilterBuilderTemplate