Issue with Custom Binding and Filter Options in Excel Filter View

[Yurii Fishchuk]

I am experiencing an issue with the Excel-style filter view when using custom data binding. If I apply a filter to one column, the filter options for other columns become limited based on the applied filter.

For example, if I set a filter for the "Profession" column (e.g., selecting "Nurse"), the filter options for the "Country" column are restricted (only "India" is displayed). However, I expect to see all available options for the "Country" column, regardless of the filter applied to the "Profession" column.

Could you please advise how to maintain all filter options for other columns, even when a filter is applied to a different column?

Code example:

<ejs-grid #grid
          [dataSource]="rowData"
          [allowFiltering]="true"
          [filterSettings]="filterOptions"
          [pageSettings]="options"
          [enableInfiniteScrolling]="false"
          (dataStateChange)="dataStateChange($event)"
          (dataBound)="grid.autoFitColumns()"
          gridLines="Both">
    <e-columns>
        <e-column *ngFor="let col of columnDefs"
                  [field]="col.field"
                  [headerText]="col.headerName"
                  [allowFiltering]="col.filter"
        >
        </e-column>
    </e-columns>
</ejs-grid>

// Fetch row data from server
async getData() {
    const res = await this.service.getData(this.pagination, {
       filters: JSON.stringify(this.currentFilters) // Pass current filters to server
    });

    if (res.data.length) {
       this.rowData = {
          result: res.data,  // Grid row data
          count: res.total   // Total record count
       };
    }
}

// Handle infinite scrolling and filtering
async dataStateChange(event: any) {
    // Infinite scroll request
    if (event.action.requestType === 'infiniteScroll') {
       this.pagination.page++;
       await this.getData(); // Fetch new page data
    }
    // Filter dropdown values
    else if (event.action && (event.action.requestType == 'filterchoicerequest' || event.action.requestType == 'filtersearchbegin' || event.action.requestType == 'stringfilterrequest')) {
       event.skip = 0; // Reset skip value for filter search
       // Provide custom filter options for specific field (column)
       event.dataSource(this.filterDropdownsValues[event.action.filterModel.options.field]);
    }
    // Filter action (e.g., after applying filters)
    else if (event.action && event.action.action == 'filter' && event.where) {
       this.pagination.page = 1; // Reset pagination for filtered data
       this.currentFilters = event.where[0]; // Store current filters
       await this.getData(); // Fetch filtered data
    }
}

// Custom filter options for specific columns
filterDropdownsValues = {
    profession: [
       { profession: 'Nurse' },
       { profession: 'Doctor' },
       { profession: 'Surgeon' }
    ],
    country: [
       { country: 'India' },
       { country: 'UK' },
       { country: 'USA' }
    ]
};

Environment:

• Syncfusion version: 18.4.30
• Angular version: 8.2.14

Thank you in advance for your assistance!

[Aishwarya Rameshbabu]

Hi Yurii Fishchuk,

Greetings from Syncfusion support.

The Syncfusion Excel filter functions similarly to the Microsoft Excel filter, exhibiting the same default behavior. Specifically, when a column is filtered, opening the filter dialog for a different column will only show results from the already filtered records. As a result, it does not display the complete dataset for the column after applying the filter, aligning with the default behavior of the Microsoft Excel filter.

Regards

Aishwarya

[Yurii Fishchuk]

I understand that opening the filter dialog for a different column will only show results from the already filtered records. However, the issue I'm facing is that it doesn't display all the available options from the filtered records.

For example:

let rowData = [
    {
        id: 1,
        name: 'John Doe',
        profession: 'Doctor',
        country: 'USA',
        age: 45,
    },
    {
        id: 2,
        name: 'Jane Smith',
        profession: 'Nurse',
        country: 'India',
        age: 34,
    },
    {
        id: 3,
        name: 'Sam Brown',
        profession: 'Surgeon',
        country: 'India',
        age: 50,
    },
    {
        id: 4,
        name: 'Emily White',
        profession: 'Doctor',
        country: 'UK',
        age: 39,
    },
    {
        id: 5,
        name: 'Michael Green',
        profession: 'Nurse',
        country: 'USA',
        age: 29,
    },
    {
        id: 6,
        name: 'Sophia Johnson',
        profession: 'Surgeon',
        country: 'India',
        age: 43,
    }
];

with this row data after filtering column "profession" by value Nurse, the "country" column should show both "India" and "USA" in the filter dialog, but I only see "India." I expect to see all available values.

[Dineshnarasimman Muthu]

Hi Yurii Fishchuk,

We understand that when filtering Profession column with value 'Nurse' and with this filtered data you filter Country column, but the values are not properly populated. We suggest you to properly update the dataSource in the dataStateChange event of the grid. We have attached the code information and sample for your reference. We have discussed this topic in our UG documentation. Attached the documentation for your reference.

 public dataStateChange(state: any) {

    if (

      state.action &&

      (state.action.requestType == 'filterchoicerequest' ||

        state.action.requestType == 'filtersearchbegin' ||

        state.action.requestType == 'stringfilterrequest')

    ) {

      // below code will be executed when

      // 1. Typing the value in Menu Filter Dialog

      // 2. Opening the Excel Filter dialog

      // 3. Searching the value in excel filter dialog

      state.skip = 0;

      state.take = 1000;

      this.service.getData(state).subscribe((e: any) => {

        state.dataSource((e as any).result); // bind array of Objects to the Grid

      });

    } else {

      // Handled all the other Grid actions like paging, sorting etc.. by using dataState change event

      this.service.execute(state);

    }

  }

 

Sample: https://stackblitz.com/edit/angular-rfyuez-zmdqnj?file=src%2Fapp.component.ts,src%2Fapp.component.html,src%2Forder.service.ts,src%2Fapp.component.css 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/data-binding/remote-data#handling-filtering-operation

Please get back to us for further assistance.

Regards,

Dineshnarasimman M

[Yurii Fishchuk]

Can I perform on-demand filtering with infinite scroll inside dataStateChange or how can I achieve it?

[Dineshnarasimman Muthu]

Hi Yurii Fishchuk,

Greetings from Syncfusion Support.

We have validated your query on implementing On-demand filtering using filterSettings.enableInfiniteScrolling property. We have confirmed that this is an issue from our side and logged as ”On-demand Filtering( infiniteScrolling) in Custom Data Binding”. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming patch release which will be rolled out on October 30th, 2024. Until then we appreciate your patience.

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.

Feedback link: https://www.syncfusion.com/feedback/62045/on-demand-filtering-infinitescrolling-in-custom-data-binding

Disclaimer: "Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization".

Regards,

Dineshnarasimman M

[Aishwarya Rameshbabu]

Hi Yurii Fishchuk,

We sincerely apologize for the inconvenience caused.

Due to the complexity of the issue, our team requires additional time to develop a comprehensive solution to maintain the stability and performance of our product. Consequently, we will address the reported problem regarding 'On-demand Filtering (infinite Scrolling) in Custom Data Binding' and implement the fix in our upcoming patch release, scheduled for November 12th, 2024. We greatly appreciate your understanding and patience during this period.

Regards

Aishwarya R

[Aishwarya Rameshbabu]

Hi Yurii Fishchuk,

 

We are glad to announce that, we have included the improvement of “On-demand Filtering( infiniteScrolling) in Custom Data Binding” in our 2024 Volume 3 SP release v27.2.2. So please upgrade to our latest version of the Syncfusion package to resolve the reported issue.

 

Root Cause: Initially, there is not support for on-demand in excel/checkbox filtering in custom binding.

 

Solution: Currently provided the support for on-demand excel/checkbox filtering in custom binding.

 

Release Notes: https://ej2.syncfusion.com/angular/documentation/release-notes/27.2.2?type=all#grid

 

Sample: 194638-excel-filter-custom-data-binding-infinitescroll-filter-ui (forked) - StackBlitz

 

Feedback: https://www.syncfusion.com/feedback/62045/on-demand-filtering-infinitescrolling-in-custom-data-binding

 

We thank you for your support and appreciate your patience in waiting for this release. Please get back to us if you need any further assistance.

 

Regards,

Aishwarya R