Grid Filter not working

[Maria Munoz]

I have 3 different grids on a page, but the Excel-like filter for dates only works in one of those grids for the other two grids I get the filter on top of the page completely away from the grid with no selection on dates, I'm already parsing the data, so the grid knows the content is date type. 

I also have a boolean column which I'm displaying as a checkbox but the filter doesn't work for one of the grids, it gives me only one option even when the data has the two values. 

I have grids with the same filters on other pages and they work just fine, the only difference is this 3 are under a tab, all my grids under tabs seem to have issues with the date filter. 

How can I fix this issue? 

I've attached photos of the grids where the date filter and checkbox column are not working.

Thanks for the help

[Maria Munoz]

Here's the other grid,

[Vasanthakumar K]

Hi Maria Munoz,

Greetings from Syncfusion support.

Query: why does the Excel filter not display all grid data? What could be the possible causes and how can I resolve this issue?

The Excel filter dialog only considers the first 1,000 records from the grid’s dataSource when it is initially opened. If Boolean value, true is not present within the first 1,000 records of the dataSource, it will not appear in the filter list when the Excel filter dialog is first opened.

How to Retrieve Missing Records in the Excel/Checkbox Filter Dialog?

1. Use the Search Box and Confirm the Value Appears:

• If a record is missing from the initial 1,000 dataSource items, use the search box inside the filter dialog to locate and include it in the filter criteria.
• Ensure that the missing value appears when performing a search operation in the Excel filter dialog.

2. Enable On-Demand Filtering (Recommended for Large Datasets) and Confirm the Value Appears:

• This ensures that the filter dialog dynamically fetches all unique values instead of being limited to the first 1,000 records.
• Ensure that the missing value appears after enableInfiniteScrolling in filterSettings of the Excel filter dialog.

3. Customize filterChoiceCount and Confirm the Value Appears:

• Increase the limit beyond 1,000 records if your dataset requires more records to be preloaded in the filter dialog.
• Ensure that the missing value appears after customizing filterChoiceCount of the Excel filter dialog.

Important to note:

we need to clarify that the on-demand filter feature is only available from version 24.1.41 onwards. If you are using an older version, this feature will not work as expected.

Release Notes Reference: Version 24.1.41

filterChoiceCount customization solution documentation: https://ej2.syncfusion.com/vue/documentation/grid/filtering/excel-like-filter#customize-the-filter-choice-count

Reference for on-demand based solution included sample: https://stackblitz.com/edit/sqnzkagw?file=src%2FApp.vue,package.json

Query: Excel-like filter for dates only works in one of those grids for the other two grids I get the filter on top of the page completely away from the grid with no selection on dates.

We have reviewed your query and tested an Excel-like filter for dates in multiple grids. However, we could not replicate the issue where the filter appears at the top of the page instead of near the grid. In our tests, the filter popup opens correctly at the column header when clicking the filter icon.

To assist you further, we need additional information, as the provided details are insufficient to reproduce the issue.

Please provide the following details for further investigation:

1. Complete configuration for all three grids, including:
• Grid definitions
• Column settings
• Event handlers
• Any applied filtering settings
2. Step-by-step replication procedure, preferably with a video demonstration showcasing the issue.
3. Modify our shared sample to match your grid configuration and replicate the issue.
4. Confirm if the issue persists in an incognito browser, as grid persistence settings might be affecting the behavior.
5. Syncfusion package version details you are currently using.
6. Please provide an issue-replicated project or a hosted link with access so that we can validate the issue in your environment.

Once we receive this information, we can analyze the issue further and provide a precise resolution.

Regards,

Vasanthakumar K

[Maria Munoz]

I manage to replicate the filter issue 

Reference for issue example: https://stackblitz.com/edit/sqnzkagw-3vx1ugak?file=src%2FApp.vue

[Aishwarya Rameshbabu]

Hi Maria Munoz,

Upon reviewing the provided sample, it has been observed that the code line responsible for enabling the on-demand filtering feature has been commented out. We recommend incorporating the following lines of code to ensure that all records in the dataSource are displayed within the Excel filter dialog. As we mentioned earlier, by default, only the first 1,000 records are shown to prevent rendering delays when opening the filter dialog.

  freightBillingFilterOptions: {

        type: 'Excel',

        enableInfiniteScrolling: true, // if this line is commented checkbox issue will occur.

        operators: {

          stringOperator: [{ value: 'contains', text: 'Contains' }],

        },

        columns: [

          {

            field: 'completed',

            operator: 'equal',

            value: false,

            matchCase: false,

          },

        ],

      },

 

Additionally, we were unable to replicate the reported issue regarding the positioning of the filter dialog for date columns. For further clarification, please refer to the updated sample and the video demonstration provided.

Sample: https://stackblitz.com/edit/sqnzkagw-pk67bq32?file=src%2FApp.vue

Video Demonstration: Please find the attachment.

Documentation on-demand Excel filtering:
Render-checkbox-list-data-in-on-demand-for-excel-checkbox-filtering

Regards,

Aishwarya R

Attachment: 196165Video_a4529cf6.zip