Both FilterBar and Menu in Filtering

[Amin H]

Dear support,

I used this document to filter the columns:

https://ej2.syncfusion.com/vue/documentation/api/grid/filterType/

How to use two types FilterBar and Menu at the same time?

I mean use the Menu type Normally render under each column and If the column icon is clicked use the FilterBar type. How can the goal be achieved?

[Sujith Kumar Rajkumar]

Hi Amin, 

 

Greetings from Syncfusion support. 

 

Based on the query we could understand that your requirement is to render filter bar along with filter menu for columns. We would like to let you know that the filter bar is a separate functionality and it cannot be integrated with the menu/checkbox filter. This is the default structure of the Grid’s filter functionality. So you can only combine the Menu, Checkbox and Excel filter types for different columns. 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Alexis Filipe Boavista Silva Garcia]

Hi, i need this too. make users click 2 or 3 times more is not that good for us, is there a way to make this happen yet or still cant be used at same time?

[Santhosh Iruthayaraj]

Hi Alexis Filipe Boavista Silva Garcia,

As previously mentioned, the "FilterBar" and "Menu" are two distinct filtering modes in the Grid component, and they are not intended to be used simultaneously on the same column.

The "FilterBar" mode renders a text input element directly within the column header for inline filtering. In contrast, the "Menu" mode displays a separate dialog that offers advanced filter options. These two modes are implemented with different rendering structures and user interaction patterns. Due to these differences in behavior and rendering logic, the Grid does not support applying both filter types on the same column.

However, it is possible to use external input elements to programmatically filter the Grid using the "filterByColumn" method, while keeping the Grid's built-in filtering mode set to "Menu". Please refer to the code snippet and sample provided below to illustrate this approach:

[Grid.vue]

 

    applyFilter(event, field) {

      if (event.type === 'keydown' && event.key !== 'Enter') return;

 

      if (!event.target.value) {

        this.$refs.grid.ej2Instances.clearFiltering([field]);

        return;

      }

 

      let value = event.target.value;

      let operator = 'contains';

 

      if (field === 'OrderID') {

        value = parseInt(event.target.value);

        operator = 'equal';

      }

 

      this.$refs.grid.ej2Instances.filterByColumn(field, operator, value);

    },

 

Sample: https://stackblitz.com/edit/vue-grid-yzguub-cj2abh7w

You can find the list of available operators in the Grid component, along with their supported data types, in the following documentation:

• Filtering in Vue Grid component | Syncfusion

When using any filtering mode other than "FilterBar" (such as "Menu", "Excel", or "CheckBox"), you can configure different filter types per column by setting the "column.filter.type" property. This feature is also demonstrated in the above sample. For more information, please refer to the documentation link below:

• Enable different filter for a column in Vue Grid component | Syncfusion

Please let us know if you require any further assistance.

Regards,

Santhosh I