Not all rows are filtered in in date column in excel style filter

[norikois]

Description

Not all rows are filtered in in date column in excel style filter.

• igniteui-angular version: 12.2.x, 11.1.x (I haven't tested 12.1.x)
• browser: Chrome

Steps to reproduce

1. npm install and npm start the attached sample.
2. At the "nextActionDate" column, click the filter icon to open the filter menu.
3. Click "Select All" to deselect all.
4. Select "Aug 20, 2021", "Sep 8, 2021" and "Sep 10, 2021".
5. Click "Apply"

Result

Only 4 rows are filtered in.

Expected result

11 rows are filtered in.

Attachments

c00220021-app1.zip

[norikois]

Since the customer who reported this issue uses 11.1.x, it would be good, if possible, to fix this issue for 11.1, too.

[kdinev]

@norikois This is not a bug. The data source specifies date objects with different timestamps. The column data type however is set to date. ESF finds all unique date portions and filtering is performed on exact match on the first date, hence filtering out all dates with different timestamps than the first instance. In 12.0.0 we have enhanced this feature by adding two more data column types - datetime and time. The ESF filtering will correctly display unique timestamps with dataType="datetime" and will filter dates as expected in this scenario.

As a workaround in 11.1.x I suggest to loop through the data and change the timestamp of all dates to 00:00:00 before assigning to the grid as data source.

Here's sample code for how to do this:

  public staffList!: {
    rowNumber: number;
    staffId: number;
    nextActionDate: string | Date;
    name: string;
    phoneNumber: string;
    label: number;
  }[];

  constructor() { }

  ngOnInit(): void {
    this.staffList = DATA;
    this.staffList.forEach(d => {
      d.nextActionDate = new Date(d.nextActionDate);
      d.nextActionDate.setHours(0);
      d.nextActionDate.setMinutes(0);
      d.nextActionDate.setSeconds(0);
    });
  }

[norikois]

Thank you @kdinev. I understood.

Some other point the customer points out is some inconsistency. For example,

• if "Sep 8, 2021" is selected, 9 rows are filtered in.
• if "Sep 8, 2021" and "Sep 10, 2021" are selected, 10 rows are filtered in.
• if "Aug 20, 2021", "Sep 8, 2021" and "Sep 10, 2021" are selected, only 4 rows are filtered in.

When "Aug 20, 2021", "Sep 8, 2021" and "Sep 10, 2021" are selected, since more items are selected in the filter dialog, more rows are filtered in than when "Sep 8, 2021" and "Sep 10, 2021" are selected.

I guess "if "Sep 8, 2021" is selected, 9 rows are filtered in" is wrong from the beginning???

[kdinev]

I cannot reproduce what you're describing. With resetting the timestamp on the dates, I'm getting 9 rows for Sep 8, 10 rows for Sep 8 and Sep 10, 11 rows for Aug 20, Sep 8 and Sep 10.

As the expected results in the issue states - "11 rows are filtered in."

[kdinev]

@norikois Closing this due to inactivity. Please reopen if there's still an issue.