Grid with FilterType.Menu filtering on dateTime column does not work

[Florin Talos]

Hello,

I'm using the latest version of Blazor (18.3.0.44) and having some issues with the SfGrid component. The data model has 2 columns DateTime type and I'm not able to filter regardless the formatting I'm applying to the column. Below is a sample of my code. 

Is there something that I'm not doing right ? Thank you in advance for your time. 

  

 <SfGrid @ref="Grid" DataSource="@GridData" AllowPaging="true" AllowSelection="true" AllowSorting="true" AllowFiltering="true" AllowResizing="true" Height="600" RowHeight="38">

                <GridPageSettings PageSize="50" PageCount="5"></GridPageSettings>

                <GridEvents OnRecordDoubleClick="RecordDoubleClickHandler" TValue="TrialRequestDto"></GridEvents>

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

                <GridColumns>

                    <GridColumn Field=@nameof(TrialRequestDto.Trainer) HeaderText=@L["Trainer"] Type="ColumnType.String"></GridColumn>

                    <GridColumn Field=@nameof(TrialRequestDto.Description) HeaderText=@L["Description"] Type="ColumnType.String"></GridColumn>

                    <GridColumn Field=@nameof(TrialRequestDto.RequestDate) HeaderText=@L["RequestDate"]  Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right"></GridColumn>

                    <GridColumn Field=@nameof(TrialRequestDto.ScheduledDate) HeaderText=@L["ScheduledDate"]  Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right"></GridColumn>

            </SfGrid>

   public class TrialRequestDto

    {

        public int TrialRequestId { get; set; }

        public DateTime RequestDate { get; set; }

        public DateTime ScheduledDate { get; set; }

        public string Trainer { get; set; }

        public string Description { get; set; }

        public DateTime? LastUpdateDate { get; set; }

    }

 IReadOnlyList<TrialRequestDto> GridData { get; set; }

 protected override async Task OnInitializedAsync()

    {

        GridData = await TrialsDataService.GetTrialsScheduledList();

    }

Best Regards,

Florin Talos

[Vignesh Natarajan]

Hi Florin,  

Thanks for contacting Syncfusion support.  

Query: “The data model has 2 columns DateTime type and I'm not able to filter regardless the formatting I'm applying to the column. Below is a sample of my code. ” 

We have analyzed your query and we are able to reproduce one issue (Filter popup is closed when selecting a value) while selecting a value in DateTimepicker component in Filter Menu. If you are facing the similar issue. Then we have confirmed it as a bug and logged the defect report “Filter popup automatically closed while selecting date value in FilterMenu with ColumnType as DateTime” for the same.  

 

Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our upcoming weekly release which is expected to be rolled out by the end of November, 2020. We will update you once the release is rolled out.  

     

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.     

 

https://www.syncfusion.com/feedback/17916/  

Note: kindly login into your account to view the feedback  

Till then we appreciate your patience.  

Regards, 

Vignesh Natarajan 

 

[Florin Talos]

Hello Vignesh,

Thank you for getting back to me. The issue I have described is not similar with the one you mentioned. In fact, I had the issue you described on previous version (v18.2.0). After the update to 18.3.0.44 this issue was not present anymore. The issue that I'm describing relates to V18.3.0.44 and behaves differently. The pop up menu opens and I'm able to select a date. When clicking on Filer button, the Grid becomes empty. Whatever date value I select (from the exiting values) the result is always empty. I think the filtering is not functional on date columns. 

Best Regards

Florin Talos   

[Vignesh Natarajan]

Hi Florin,  

 

Thanks for the update.  

 

Query: “When clicking on Filer button, the Grid becomes empty. Whatever date value I select (from the exiting values) the result is always empty” 

 

We have analyzed the reported query and we are able to reproduce the reported issue at our end also. This is because the selected value from DatePicker does not match with the value in grid datasource. Consider the Grid data (RequestData column) has value as 11/1/2020 01:00:33 AM but displayed in Grid column as 11/1/2020.  

 

While selecting a value from Menu Filter (DatePicker component), Time of the selected date will be 11/1/2020 12:00:00 AM by default. Grid tries to match the selected value with grid data and no value will match with Grid data. So value in datasource will not be equal to selected value, Grid data will be empty. 

 

For your convenience we have prepared a sample Date object with 12AM and now Menu Filter will work as expected. Refer the below code example. 

 

<SfGrid @ref="Grid" DataSource="@GridData" AllowPaging="true" AllowSelection="true" AllowSorting="true" AllowFiltering="true" AllowResizing="true" Height="600" RowHeight="38"> 

    <GridPageSettings PageSize="50" PageCount="5"></GridPageSettings> 

    <GridEvents OnRecordDoubleClick="RecordDoubleClickHandler" TValue="TrialRequestDto"></GridEvents> 

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

    <GridColumns> 

        <GridColumn Field=@nameof(TrialRequestDto.Trainer) HeaderText="Trainer" Type="ColumnType.String"></GridColumn> 

        <GridColumn Field=@nameof(TrialRequestDto.Description) HeaderText="Description" Type="ColumnType.String"></GridColumn> 

        <GridColumn Field=@nameof(TrialRequestDto.RequestDate) HeaderText="RequestDate" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right"></GridColumn> 

        <GridColumn Field=@nameof(TrialRequestDto.ScheduledDate) HeaderText="ScheduledDate" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right"></GridColumn> 

    </GridColumns> 

</SfGrid> 

@code{ 

    protected override void OnInitialized() 

    { 

        GridData = Enumerable.Range(1, 75).Select(x => new TrialRequestDto() 

        { 

            TrialRequestId = 1000 + x, 

            Trainer = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], 

            Description = (new string[] { "ALFKI1", "ANANTR1", "ANTON1", "BLONP1", "BOLID1" })[new Random().Next(5)], 

            ScheduledDate = (new DateTime[] { new DateTime(2020,11, 1), new DateTime(2020, 11, 2), new DateTime(2020, 11, 3), })[new Random().Next(3)], 

            RequestDate = (new DateTime[] { new DateTime(2020, 10, 1), new DateTime(2020, 10, 2), new DateTime(2020, 10, 3), })[new Random().Next(3)], 

            LastUpdateDate = (new DateTime[] { new DateTime(2020, 9, 1), new DateTime(2020, 9, 2), new DateTime(2020, 9, 3), })[new Random().Next(3)], 

        }).ToList(); 

    } 

 

 

Kindly download the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/159382/ze/BlazorApp-82582715  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Florin Talos]

Hello Vignesh,

Thank you for your explanation. In my opinion this is a filtering issue and not a desired functionality. In the grid, the columnType can be Date or DateTime. When defined as DateTime the filter component displays a Date Picker and a Time Picker. I can select both the time and the date and in this condition make sense to have the filter applied on date and time. If the columnType is defined as Date and there is only a DatePicker control then the filer should apply only the date.

Maybe this issue can be addressed in the future versions. In the actual implementation all date values from data source must me modified to have a fake time of 12:00:00 AM so that can be filtered by the grid. 

Regards,

Florin Talos  

[Vignesh Natarajan]

Hi Florin,  

 

Thanks for the update.  

 

Query: “In my opinion this is a filtering issue and not a desired functionality.” 

 

We have analyzed your query and we understand that you want to Grid to match only the date value with Grid datasource to filter the record. But by default selected value (with 12AM time) will be matched with Grid datasource based on Menu operator (by default equal) and filtered data will be returned. This is the default behavior And it is not possible match the date value alone ignoring the time value.  

 

Instead we suggest you to use CheckBox filter for that particular column, which will display of list of available date objects. And selecting a value will filter the corresponding records. 

 

Refer the below code example. 

 

<SfGrid @ref="Grid" DataSource="@GridData" AllowPaging="true" AllowSelection="true" AllowSorting="true" AllowFiltering="true" AllowResizing="true" Height="600" RowHeight="38"> 

    <GridPageSettings PageSize="50" PageCount="5"></GridPageSettings> 

    <GridEvents OnRecordDoubleClick="RecordDoubleClickHandler" TValue="TrialRequestDto"></GridEvents> 

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

    <GridColumns> 

        <GridColumn Field=@nameof(TrialRequestDto.Trainer) HeaderText="Trainer" Type="ColumnType.String"></GridColumn> 

        <GridColumn Field=@nameof(TrialRequestDto.Description) HeaderText="Description" Type="ColumnType.String"></GridColumn> 

        <GridColumn Field=@nameof(TrialRequestDto.RequestDate) HeaderText="RequestDate" Format="d" FilterSettings="new FilterSettings() { Type = FilterType.CheckBox }" Type="ColumnType.Date" TextAlign="TextAlign.Right"></GridColumn> 

        <GridColumn Field=@nameof(TrialRequestDto.ScheduledDate) HeaderText="ScheduledDate" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right"></GridColumn> 

    </GridColumns> 

</SfGrid> 

 

   

Refer our Ug documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/filtering/#enable-different-filter-for-a-column  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Erick]

Hello,

I have a question about filtering. When I use <GridFilterSettings Type ="Syncfusion.Blazor.Grids.FilterType.FilterBar"></GridFilterSettings> in my grid, a DateTime column filtering does not work. How can this be done?

Thanks,

Erick

[Vignesh Natarajan]

Hi Erick,  

Thanks for contacting Syncfusion support.  

Query: “ a DateTime column filtering does not work. How can this be done?” 

We have analyzed your query and we understand that you are facing issue with FilterBar type filtering in a DateTime column. By default while filtering, Grid will match the value typed in filterbar with that particular column values in Grid datasource. So for example, let us consider value of datetime column in Datasource is 18/01/2021 3:30PM (with time) and it is displayed as 18/01/2021 (only date without time). While filtering we have entered the value as 18/01/2021 (string value) which will be converted to datetime object at our source. While converting only date will considered and time will be 12PM by default.  

That value will not match with Grid datasource value. Hence no records to display will be shown. Kindly ensure that typed value matches with datasource value. If you are still facing the reported issue, kindly get back to us with following details.  

1. Share the Grid code example.  

2. Are you facing any script error in console (if yes, share the screenshot of the issue.) 

3. Share the details about the your datasource along with the datetime column value.  

4. Share the video demonstration of the issue along with replication procedure.  

5. if possible share the issue reproducible sample. 

Above requested details will be helpful for us to validate the reported query  at our end and provide solution as early as possible.  

        

Regards, 

Vignesh Natarajan 

[rafa]

So, how to filter date only? how to ignore the time?

[Naveen Palanivel]

Hi Rafa,

We have considered it as a usability improvement and logged a task “Converting DateOnly type to DateTime type in Blazor grid”.
At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. And this improvement will be included in any of our upcoming releases.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.

https://www.syncfusion.com/feedback/36025/converting-dateonly-type-to-datetime-type-in-blazor-grid

You can also communicate with us regarding the open feature any time using our above feedback report page. We do not have immediate plan to implement this feature and it will be included in any of our upcoming releases. Please cast your vote to make it count. So that we will prioritize the improvement for every release based on demands.

Regards,

Naveen Palanivel

[Rogerio C Mauri]

Until version 21.1.35 we didn't find support for this demand. It is not possible to filter records in a grid by the date/time field only by the date, disregarding the time part.

[Naveen Palanivel]

Hi Mauri

We checked your query, we would like to inform that we have provided support for dateonly and timeonly in oru 2023 volume 1 release .before proceeding further with your requirement kindly share the below details to validate further at our end.

1. Could you please explain about your requirement that if you want to filter Date only in DateTime Object,
2. Could please share a screenshot or video demo what you are excepting it is very useful to us.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.