problem with ej-grid filter date

I’m using the ej-grid component in my Angular application to display data, including a date column. However, I’ve noticed that the filter associated with this date column is not working correctly. When I enter an existing date in the search field, no results are returned.



3 Replies

VK Vasanthakumar K Syncfusion Team November 28, 2024 12:41 PM UTC

Hi Aitbouhou Adam,


Greetings from Syncfusion support.


Query: I’ve noticed that the Excel-type filter associated with a date column with type datetime and format yMd (not including time) is not working correctly. When I enter an existing date in the search field, no results are returned.


We have observed from your provided screenshot that the Excel filter dialog contains a DateTime Filter context menu, but your grid column is displayed with the format yMd only (without time). By default, the Excel filter dialog’s datetime-type column search operates based on an equal condition. Therefore, when you enter only the date in the search input, no results are returned. This is the default behavior based on your grid configuration.


To achieve your requirement of displaying the grid column in the format yMd and allowing the Excel filter dialog to filter/search based on the date alone, you can define the type of the column as date. If the column type remains datetime, you must include the time in your search input to get accurate results. Please refer to the below code example and sample for more details.


Sample: https://stackblitz.com/edit/angular-fdxwdy?file=src%2Fapp.component.html,src%2Fapp.component.ts


[excel filter dialog search with time code Example]

<ejs-grid #grid [dataSource]='data' [allowFiltering]='true' [pageSettings]='pageSettings' [filterSettings]='filterSettings' allowPaging='true' (actionBegin)="actionBegin($event)" height="300px">

        <e-columns>

            . . . . .

            <e-column field='OrderDate' headerText='Order Date' width='180' type="datetime" format="M/d/y HH:mm" textAlign='Right'></e-column>

            . . . . .

        </e-columns>

</ejs-grid>


[excel filter dialog search with date alone code Example]

<ejs-grid #grid [dataSource]='data' [allowFiltering]='true' [pageSettings]='pageSettings' [filterSettings]='filterSettings' allowPaging='true' (actionBegin)="actionBegin($event)" height="300px">

        <e-columns>

            . . . . .

            <e-column field='OrderDate' headerText='Order Date' width='180' type="date" format="M/d/y" textAlign='Right'></e-column>

            . . . . .

        </e-columns>

</ejs-grid>


If you continue to face the issue even after:


  1. Changing the column type to date or
  2. Adding a datetime format such as M/d/y HH:mm and searching with the time included,


please provide the following details:


  1. Complete grid rendering customization codes: Include event handling and property configurations.
  2. Grid data binding technique details: Specify whether the data binding is remote or local. If remote, share details about the Adaptor being used or custom binding. Additionally, include network payload and response details for both the initial grid data load and the Excel filter search action (through screenshots or video).
  3. Syncfusion package version: Share the version you are using. If it's outdated, consider updating to the latest Syncfusion package, which includes bug fixes, new features, and performance improvements. Follow the official Syncfusion package update documentation to ensure a proper update process.
  4. Issue replication: Replicate the issue using the shared sample while applying your application grid's similar configurations.
  5. Ensure with on-demand excel filter: Please follow the official documentation to utilize the on-demand Excel filter dialog rendering feature. Ensure that the issue persists after implementing this approach and confirm the behavior. Make sure you are using Syncfusion package version 24.1.41 or above to utilize the on-demand feature, as it is available only in versions 24.1.41 or later.


Providing these details will help us validate your scenario and provide a more effective solution.


Regards,

Vasanthakumar K



AA Aitbouhou Adam December 23, 2024 04:01 PM UTC

Hello 

Can we make a modification to go from equal to contains?


Thanks 



VK Vasanthakumar K Syncfusion Team December 24, 2024 03:02 PM UTC

Hi Aitbouhou Adam,


Query: Can we make a modification to go from equal to contains in Excel like filter?


We would like to clarify that the Excel-like filtering in Syncfusion Grid is designed to mimic the behavior of Microsoft Excel.


  1. Supported Columns for "Contains":
    • The "contains" operator is only available for string-type columns in Excel-like filters.
    • Users can perform "contains"-based filtering through the custom filter dialog in the filter context menu.
  2. Limitations for Date Columns:
    • For date columns, the Excel-like filter does not support the "contains" operator.
    • This behavior is consistent with how filtering works in Microsoft Excel, where "contains" is specific to text fields and not applicable to dates.
  3. Consistency Across Platforms:
    • Syncfusion's Excel-like filter aligns with the features and limitations of Excel itself. Customizing this behavior to allow unsupported operations like "contains" for non-text columns (e.g., date columns) is not feasible due to these design principles.


Reference:


Below is a comparison of the "Text Filters" available in Syncfusion Grid's Excel-like filter and Microsoft Excel:


Syncfusion Grid (Excel like filter) Text Filters

Microsoft Excel filter Text Filters


For further clarity, you may refer to the above screenshots comparing of these behaviors.


Regards,

Vasanthakumar K


Loader.
Up arrow icon