We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Programatically Filter Vue Grid By Two Or More Columns

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 

3 Replies

RR Rajapandi Ravi Syncfusion Team February 17, 2023 01:01 PM UTC

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


Rajapandi R

CS Camille Sevigny February 22, 2023 07:25 PM UTC

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?


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,


RS Rajapandiyan Settu Syncfusion Team February 24, 2023 01:53 PM UTC

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' }]




Rajapandiyan S

Attachment: vue_grid_apply_multiple_filter_9f0d576e.zip

Live Chat Icon For mobile
Up arrow icon