How do I filter selected members from search and non-search results in the member filter dialog?

Introduction

When working with pivot tables, you can apply filters at runtime through the filter dialog. Sometimes, you might need to filter specific field members from both search and non-search results. However, you may notice that after applying the filter, only the members chosen from the search results are filtered in the pivot table, while the selected members from the non-search results are not filtered if any occur. This is the actual behavior of the filtering dialog in our Syncfusion Pivot Table. However, you can change this behavior by using the workaround technique below to filter the selected members from both search and non-search results in the filter dialog.

Filter selected members from search and non-search results in the member filter dialog

To achieve this, you will need to use the memberFiltering event. This triggers before applying the filter using the dialog, that is, specifically while clicking the “OK” button. By using this event, you can apply filtering to the selected members from search and non-search results in the member filter dialog.

[index.js]

import { PivotViewComponent, GroupingBar } from '@syncfusion/ej2-react-pivotview';
 
export class DefalutSample extends SampleBase {
  pivotObj;
  memberFiltering(args) {
    var items = [];
	// Iterate through the current field members in the pivot table.
    for ( var i = 0; i < this.pivotObj.pivotCommon.currentTreeItems.length; i++) {
	  // Check if the field members is selected.
      if (this.pivotObj.pivotCommon.currentTreeItems[i].isSelected) {
		// Add the actual text of the selected item to the array.
        items.push(this.pivotObj.pivotCommon.currentTreeItems[i].actualText);
      }
    }
	// Apply the collected items array to the `items` property of `filterSettings`.
    args.filterSettings.items = items;
  }
  render() {
    return (
      <div className="control-pane">
        <div>
          <PivotViewComponent
            id="PivotView"
            ref={(scope) => {
              this.pivotObj = scope;
            }}
	    showGroupingBar={true} 
            memberFiltering={this.memberFiltering.bind(this)}
          >
            <Inject services={[GroupingBar]} />
          </PivotViewComponent>
        </div>
      </div>
    );
  }
}

const root = createRoot(document.getElementById('sample'));
root.render(<DefalutSample />);

In the above code snippet, we create an empty items array to store selected field members(i.e., “France”, “Germany” and etc.). Then, we iterate through the currentTreeItems array, which represents the field members in the pivot table. For each field member, we check if it has been selected through the isSelected property. If a field member is selected, we add its actual text to the items array. Finally, we assign the items array to the items property of filterSettings. This effectively applies the filtering to selected field members from both search and non-search results.

The following GIF images illustrate the difference before and after implementing the above workaround solution,

GIF

Before implementing the workaround solution

After implementing the workaround solution

For a practical demonstration, refer to the sample of stackblitz.

Conclusion

I hope you enjoyed learning how do I filter selected members from search and non-search results in the member filter dialog.

You can refer to our React Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!