Replacing Default Date/Time Filter Components in Grid

[Farshad Mehrvarzan]

Hello,

I’m using the Syncfusion Grid with filter functionality enabled. I would like to ask if there is any supported way to replace the default DatePicker and TimePicker components used in the Grid's filter UI with custom components or other Syncfusion components (e.g., a different DateTimePicker or Persian calendar component).

The goal is to customize the date/time filtering experience to better match the localization or specific UI/UX requirements of our project.

Is this supported natively, or is there any workaround or customization point where we can override the default filter templates?

Thank you for your guidance.

[Guhanathan Ramanathan]

Hi Farshad Mehrva,

 

Based on your query, To fulfill your requirement of customizing the date/time filtering experience in the Syncfusion Blazor Grid, you can use the FilterTemplate feature, which allows you to replace the default filter UI with custom Syncfusion components like SfDatePicker or SfDateTimePicker, giving you full control over the filtering logic and UI to match your project’s specific localization and UX needs.Please refer to the code snippet and sample for reference.

<SfGrid @ref="Grid" DataSource="@Orders" AllowFiltering="true" Width="100%">

    <GridColumns>

        <GridColumn Field="OrderID" HeaderText="Order ID" Width="120" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GridColumn>

        <GridColumn Field="CustomerName" HeaderText="Customer Name" Width="150"></GridColumn>

        <GridColumn Field="OrderDate" HeaderText="Order Date" Width="150" Type="Syncfusion.Blazor.Grids.ColumnType.Date" Format="dd-MMM-yyyy">

           <FilterTemplate>

                <SfDatePicker TValue="DateTime?" @bind-Value="@FilterDate">

                    <DatePickerEvents TValue="DateTime?" ValueChange="DatePickerValueChange"></DatePickerEvents>

                </SfDatePicker>

            </FilterTemplate>

        </GridColumn>

    </GridColumns>

</SfGrid>

@code {

    SfGrid<Order> Grid;

    public List<Order> Orders { get; set; }

    public DateTime? FilterDate { get; set; }

    protected override void OnInitialized()

    {

        Orders = new List<Order>

        {

            new Order { OrderID = 1, CustomerName = "John Doe", OrderDate = new DateTime(2025, 5, 20) },

            new Order { OrderID = 2, CustomerName = "Jane Smith", OrderDate = new DateTime(2025, 5, 25) },

            new Order { OrderID = 3, CustomerName = "Sam Wilson", OrderDate = new DateTime(2025, 5, 30) }

        };

    }

    public class Order

    {

        public int OrderID { get; set; }

        public string CustomerName { get; set; }

        public DateTime OrderDate { get; set; }

    }

  

}

sample:https://blazorplayground.syncfusion.com/embed/rZhejRtrqzafREzy?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Documentation:

https://blazor.syncfusion.com/documentation/datagrid/filter-bar#filter-bar-template-with-custom-component

Regards,

Guhanathan R

[Ray Ralph]

In light of your enquiry, To satisfy your request to personalise the Syncfusion Blazor Grid's date/time filtering experience, https://blazor.syncfusion.com/documentation/datagrid/filter-bar#filter-bar-template-with-custom-component bitlife