Programatically Filter Vue Grid By Two Or More Columns

[Camille Sevigny]

I know how to programmatically filter by one column. I have it working and this is the code:

this.$refs.hotlistgrid.filterByColumn("ColumnA", "equal", filterArray, "or");

I now need to programmatically filter by two columns at once. What is the API/code to do that?

ColumnA and ColumnB at the same time with different values for each column. How do you 

[Rajapandi Ravi]

Hi Camille,

Greetings from Syncfusion support

From your query we could see that you like to you like to perform the programmatic filter for the multiple columns. Based on your query we suggest you use the below way to achieve your requirement. Please refer the below code example and documentation for more information.

 

click() { //button click

        this.grid.filterSettings.columns = [{ field: 'ShipCity', matchCase: false, operator: 'startswith', predicate: 'and', value: 'reims' },

        { field: 'ShipName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Vins et alcools Chevalier' }]

    }

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/filtering/filtering/#initial-filter

Regards,

Rajapandi R

[Camille Sevigny]

Hi Rajapandi,

This does not appear to work. The code above is used to send to a grid before it is rendered. After the grid is rendered, the code above does not re-filter the grid.

I need to re=filter the grid, by multiple columns, AFTER the grid has already rendered. How can I accomplish this?

Example:

The page loads with the grid data. I then click a button to re-filter the grid with new columns and values. How do I do this?

Thank you,

Camille

[Rajapandiyan Settu]

Hi Camillie,

We have prepared a sample for your requirement. In that sample, we applied the filter on multiple columns through a button clicks. Please find the attached sample and code example for your reference.

    btnClick1: function (args) {

        this.$refs.grid.ej2Instances.filterSettings.columns = [

          { field: 'ShipCountry', matchCase: false, operator: 'startswith', predicate: 'and', value: 'france' },

          { field: 'CustomerID', matchCase: false, operator: 'startswith', predicate: 'and', value: 'VINET' }]

    }

 

Regards,

Rajapandiyan S

Attachment: vue_grid_apply_multiple_filter_9f0d576e.zip