Datarangepicker in datagrid filtering on filterbar option

[Walter Martin]

Following your documentation at this page

https://blazor.syncfusion.com/documentation/datagrid/filter-menu

the datarangepicker works when you use this line on datagrid

<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

but how can I use your sample in the documentation if I need to use a filterbar type ?

If I simply use in your sample this line:

<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.FilterBar"></GridFilterSettings>

the OnActionBegin Event of the datagrid is not fired after changing the date range

Thanks

[Naveen Palanivel]

Hi Walter,

Greetings from Syncfusion support.

We checked your query and would like to inform you that by specifying AllowFilter = true, the filter bar will be rendered. When we type a value and press the enter key, the ActionBegin event is triggered; this is the default behaviour. We'd also like to inform that we can override the default component by rendering the custom component inside the filter template as per our requirement. Using DataGrid's FilterByColumnsAsync method, we can perform filtering based on the changed value. Please see the code snippet for your convenience.

<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130">

            <FilterTemplate>

                <SfDatePicker TValue="DateTime?">

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

                </SfDatePicker>

            </FilterTemplate>

        </GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

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

    SfGrid<Order> Grid;

 

 

    public void ValueChangeHandler(ChangedEventArgs<DateTime?> args)

    {

        Grid.FilterByColumnAsync("OrderDate", "equal",args.Value);

    }

 

 

Link : Filter Bar in Blazor DataGrid Component | Syncfusion

Please let us know if you have any concerns.

Regards,

Naveen Palanivel

[Walter Martin]

Hi Naveen

I needed a solution for datarangepicker not for datapicker and if I've well understood it's not possible to apply your solution using the function Grid.FilterByColumnAsync because it's not possible to use this function with the "AND" condition necessary to work with the datarangepicker (>= startdate AND <= enddate)

But I found a different solution using the Query function of the datagrid.

Thanks for you help

Walter

[Naveen Palanivel]

Hi Walter,

Welcome

We are glad to hear that your query has been resolved by you.

Please get back to us if you need further assistance.

Regards,

Naveen Palanivel.