Grid excel like filter cannot search data

Hi,

I'm encountering an issue with the Excel-like filter in Syncfusion for Angular. When I try to search for a date, all dates disappear as soon as I type any number. For example, if the date is 01/07/2024 and I enter "01," the select box shows no results. Even searching the full date returns nothing.

I've noticed the same issue in the Syncfusion documentation. You can reproduce it by previewing the first example on this page:
https://ej2.syncfusion.com/angular/documentation/grid/filtering/excel-like-filter

Has anyone found a solution?

Thanks in advance.


Screenshot 2024-09-03 alle 17.41.39.png


5 Replies

AR Aishwarya Rameshbabu Syncfusion Team September 4, 2024 06:03 PM UTC

Hi Fabrizio,


Greetings from Syncfusion support.


After reviewing your query, we have noticed that you are experiencing difficulties when searching for a value in the Excel filter dialog of the date column within the Syncfusion Grid. By default, the Grid conducts searches based solely on the full date value in the Excel filter dialog of date columns. However, your requirement is to search using the 'contains' operator, allowing searches by year, month, or day alone. Currently, the EJ2 Grid does not support this functionality. Please refer to the provided sample and gif image, which illustrate searching for the full date value and returning accurate results.


Sample: M5tpff (forked) - StackBlitz


Regards

Aishwarya R


Attachment: DateFilter_6b13b42b.zip


FC Fabrizio Coppolecchia replied to Aishwarya Rameshbabu September 5, 2024 06:49 AM UTC

Hi Aishwarya,

Thank you for your support. I appreciate the sample and information provided.I will test the solution you provided soon.

Would it be possible to override the filtering function to customize the filtering method? Specifically, I'd like to explore an option to search by individual components of the date (year, month, or day).

Looking forward to your advice on this.

Best regards,
Fabrizio



AR Aishwarya Rameshbabu Syncfusion Team September 10, 2024 08:53 AM UTC

Hi Fabrizio,


In response to your inquiry, we have implemented a solution that enables the searching of values in the Excel filter dialog for the date column by individual components such as year, month, and date. This has been accomplished at the sample level using the EJ2 TreeView component to implement the date column filter dialog similar to that of Microsoft Excel. This functionality allows for searches based on year, month, or date within the date column. Please note that due to the complexity of replicating the Excel filter dialog for date-type columns, there may be a delay in rendering this feature, which could impact the performance of the Grid component. Therefore, we have implemented this functionality at the sample level.


For further details, please consult the provided sample, code example, and video demonstration.


App.component.ts

 

   public ngAfterViewInit() {

       // beforeCustomFilterOpen event gets trigger before the opening of filter menu which an internal event.

       this.grid.on('beforeCheckboxfilterRenderer', this.filtercheckboxrender); 

   }

   public filtercheckboxrender = (args?: any) => {

    if (args.column.type === 'date') {

    ………………………………

    ………………………………

     const treeViewObj: TreeView = new TreeView({

            fields: { dataSource: groupedData, id: '__rowIndex', parentID: 'pId', text: args.column.field, hasChildren: 'hasChild' },

            enableRtl: this.grid.enableRtl, showCheckBox: true, cssClass: 'e-checkboxtree', checkedNodes: checkedNodes,

            nodeClicked: nodeClick.bind(this),

            keyPress: nodeClick.bind(this),

            nodeChecked: (e: any): void => {

                if (e.action !== 'indeterminate') {

                    indeterminate = treeViewObj.checkedNodes.length !== (treeViewObj.fields.dataSource as Object[]).length;

                    this.updateState(args, cBoxFrame, cBox, indeterminate, treeViewObj.checkedNodes.length);

                }

            }

        });

        treeViewObj.createElement = this.grid.createElement;

        treeViewObj.appendTo(treeViewEle); 

        args.element.appendChild(treeViewEle);

        checkedNodes = treeViewObj.checkedNodes; 

        

        this.updateState(args, cBoxFrame, cBox, indeterminate, treeViewObj.checkedNodes.length);

        // To handle the button clicks of the filterDialog

        const applyBtnClickHandler: Function = (): void => {

            if (treeViewObj.checkedNodes.length === groupedData.length) {

                let options = this.grid.filterModule.filterModule.excelFilterBase.options;

                const isClearFilter: boolean = options.filteredColumns.some((value: PredicateModel) => {

                    return options.field === value.field;

                });

                if (isClearFilter) {

                    this.grid.filterModule.filterModule.excelFilterBase.clearFilter();

                }

            } else {

                this.generatePredicate(

                    treeViewObj.checkedNodes, otherData.length ? 'string' : args.type, args.column.field, excelFilter, allNodes,

                    treeViewObj.checkedNodes.length > groupedData.length / 2);

            }

        };

        this.wireFilterEvents(args, applyBtnClickHandler, this.refreshCheckbox.bind(this, groupedData, treeViewObj, checkedNodes)); 

    }

}

 


Sample: Nxgpv6 (forked) - StackBlitz


Video Demo: Please find in the attachment.


If you need any other assistance or have additional questions, please feel free to contact us.



Regards

Aishwarya R


Attachment: 194293VideoDemo_86a61be2.zip


FC Fabrizio Coppolecchia September 12, 2024 08:35 AM UTC

Thank you so much Aishwarya,
I am currently on vacation but i will test this solution when i come back.
Thank you again for the support.



SR Sivaranjani Rajasekaran Syncfusion Team September 13, 2024 01:49 PM UTC

 

Hi Fabrizio,


Thanks for the update! Enjoy your vacation, and we look forward to hearing from you when you’re back.

 

Regards,

Sivaranjani R.


Loader.
Up arrow icon