GridFilterBuilderTemplateContext.RenderDefaultFields() Method

Returns filter fields automatically generated for the filter builder based on Grid columns.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

Declaration

public RenderFragment RenderDefaultFields()

Returns

Type	Description
RenderFragment	A collection of auto-generated filter fields (UI fragment) that the browser renders in the filter builder’s markup.

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. The Grid automatically generates and configures available filter fields based on the following column settings:

• Caption
• EditSettings
• FieldName
• Visible

The filter field hierarchy is based on the column band hierarchy.

Specify a FilterBuilderTemplate to customize the filter builder dialog. To use autogenerated fields in this template, call the context.RenderDefaultFields method within the Filter Builder component’s Fields tag.

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

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>();