SfGrid Excel Filtering Show DateTime as DateOnly in Filter Dropwdown List

[Indy Gill]

Hi

I have a SfGrid in Blazor Server .net 8 app, running Syncfusion Blazor 26.x. My grid is set to use Excel filters.

<GridFilterSettings Mode="FilterBarMode.Immediate" Type="Syncfusion.Blazor.Grids.FilterType.Excel" />

I have a column that has a DateTime property in my model. But when I display the data I want to show it as a DateOnly, which works well when in the <template>. However when the Excel Filter dropdownlist appears for this column it shows it as a DateTime. I have set the column type of DateOnly but this did not fix it. Any idea how I resolve this

<GridColumn HeaderText="Start" Field=@nameof(Model.Start_Date) Type="ColumnType.DateOnly" Format="MMM/dd/yyyy">

    <Template>

        @{

            var data = (context as Model);

            @($"{data?.Start_Date?.ToString("MMM/dd/yyyy")}")

        }

    </Template>

</GridColumn>

[Prathap Senthil]

Hi Indy Gill,

Based on your requirement, we would like to clarify that when using the Format property in the grid column, the date column value will be displayed according to the format value in both the grid and the Excel filter dialog. Therefore, you do not need to define the template feature for this requirement. Kindly refer to the sample and code snippet below for your reference.

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

Reference: https://blazor.syncfusion.com/documentation/datagrid/columns#date-formatting

Regarding the column type as "DateOnly" for this scenario, you need to ensure that the value is bound correctly as DateOnly. It seems that in your code, you are assigning a DateTime value, which is not supported in this scenario. Please ensure that the value is assigned as DateOnly. A simple sample for your reference is attached below.

<SfGrid @ref="Grid" TValue="OrderData" AllowFiltering="true" AllowSorting="true" AllowPaging="true" DataSource="@GridData">

    <GridPageSettings PageSize="6"></GridPageSettings>

---------------

        <GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>

        <GridColumn Field=@nameof(OrderData.OrderDate) HeaderText=" Order Date" Format="MMM/dd/yyyy"  Type="Syncfusion.Blazor.Grids.ColumnType.DateOnly"  TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120">

        </GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

 

------------

        public static List<OrderData> GetAllRecords()

        {

            if (Orders.Count() == 0)

            {

                int OrderID = 10248;

               

                for (int i = 1; i < 3; i++)

                {

                    Orders.Add(new OrderData(OrderID + 3, "HANAR", new DateOnly(1996, 07, 06), 65.83));

-----------------

                    OrderID += 9;

                   

                }

            }

            return Orders;

        }

 

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public DateOnly? OrderDate { get; set; }

        public double? Freight { get; set; }

    }

}

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

Regards,
Prathap Senthil