1. Home
  2. Forum
  3. Vue
  4. Vue Grid Filter multiple data fields within one column

Vue Grid Filter multiple data fields within one column

Hi,

I'm trying to figure out how I can filter multiple data fields within one column
in this case i want to filter both 'title' and 'subject' in the title column

data: [{projectId: 123, title: 'title1', subject: 'subject1'}, {projectId: 123, title: 'title2', subject: 'subject2'}, {projectId: 123, title: 'title3', subject: 'subject3'}]

<ejs-grid
ref="grid"
class="sortingenabled"
:allow-paging="true"
:allow-filtering="true"
:page-settings="pageSettings"
:filter-settings="filterOptions"
:allow-sorting="true"
:sort-settings="initialSort"
:data-bound="dataBound"
:data-source="data"
>
<e-columns>
<e-column
field="projectId"
header-text="ID"
width="120"
type="String"
/>
<e-column
field="title"
header-text="Name/Subject"
:template="nameTemplate"
clip-mode="Ellipsis"
:filter="titleFilter"
/>
</e-columns>
</ejs-grid>

5 Replies 1 reply marked as answer
TS Thiyagu Subramani Syncfusion Team January 14, 2021 04:10 AM UTC

Hi Jimmy, 

Thanks for contacting Syncfusion support. 

Based on your shared information we suspect that you want  to filter field values in the single column. For this requirement by default we can show multiple field values in the Grid column using the valueAccessor API. If you are using columTemplate feature, we can iterating the field values from dataSource, then bind the value into the columTemplate.   

 

But, this is used only for the display purpose we cannot perform Grid actions like Filtering, Searching, Grouping, Sorting, etc., to this column(when you are display the custom text through valueAccessor ).  Because the Grid can perform the actions (like sorting, grouping ,filtering) based on its dataSource value. This is the default behavior of EJ2 Grid.  

Note : The Grid actions like Filtering, Sorting, Searching, Grouping, aggregates, etc., are based on the column field and its dataSource value. We can display our own customized value in the column using its template or valueAccessor feature . But, the Grid actions are based on the dataSource value not with the customized value. This is the behavior of EJ2 Grid. 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S 


Marked as answer
JW Jimmy Wu January 14, 2021 08:10 AM UTC

I'm trying to figure how does filter work for the title column.
right now I can only filter based on the title data because field="title"
I'm looking for a solution to see how I can filter both title and subject in this one filter.

I saw other posts mention "filterByColumn" or "Predicate" But i'm not sure how to implement that.
do you have an example for those?

or if you can show me the code how you would do it for this example that would be great.

AG Ajith Govarthan Syncfusion Team January 15, 2021 01:19 PM UTC

Hi Jimmy, 
 
Thanks for the update. 
 
Query: m looking for a solution to see how I can filter both title and subject in this one filter.I saw other posts mention "filterByColumn" or "Predicate" But i'm not sure how to implement that.do you have an example for those? 
 
Based on your query you want to filter two columns at the same time. So, we have prepared sample in that we have used the actionBegin and actionComplete.  In the actionBegin event we have generated the predicates for the other column and added them with the existing predicate to filter the two columns simultaneously. For your convenience we have attached the sample so refer the sample for your reference. 
 
Code Example: 
App.vue 
 
<template> 
  <div id="app"> 
    <ejs-grid 
      ref="grid" 
      :dataSource="data" 
      allowSorting="true" 
      allowFiltering="true" 
      :filterSettings="filterOptions" 
      :actionBegin="actionBegin" 
      :actionComplete="actionComplete" 
    > 
      <e-columns> 
        <e-column 
          field="EmployeeID" 
          headerText="Employee ID" 
          width="125" 
          textAlign="Right" 
        ></e-column> 
        <e-column field="FirstName" headerText="Name" width="120"></e-column> 
        <e-column field="Title" headerText="Title" width="170"></e-column> 
        <e-column 
          field="HireDate" 
          headerText="Hire Date" 
          width="135" 
          textAlign="Right" 
          format="yMd" 
        ></e-column> 
        <e-column 
          field="ReportsTo" 
          headerText="Reports To" 
          width="120" 
          textAlign="Right" 
        ></e-column> 
      </e-columns> 
    </ejs-grid> 
  </div> 
</template> 
<script> 
import Vue from "vue"; 
import { GridPlugin, Filter } from "@syncfusion/ej2-vue-grids"; 
import { employeeData } from "./data"; 
import detailTemplate from "./detailTemplate"; 
 
Vue.use(GridPlugin); 
 
export default { 
  data: () => { 
    return { 
      data: employeeData, 
      flag: false, 
      filterOptions: { type: "Excel" }, 
    }; 
  }, 
  methods: { 
    actionComplete: function (args) { 
      if (args.currentFilteringColumn === "Title" && this.flag) { 
        this.flag = false; 
        this.$refs.grid.refreshColumns();  // update the filter change properly. 
      } 
    }, 
    actionBegin: function (args) { 
      if ( 
        args.requestType === "filtering" && 
        args.currentFilteringColumn === "FirstName" 
      ) { 
        this.flag = true; 
        args.columns.push({   // add the predicates to filter two columns at the same time. 
          actualFilterValue: {}, 
          actualOperator: {}, 
          field: "Title", 
          ignoreAccent: false, 
          isForeignKey: false, 
          matchCase: false, 
          operator: "contains", 
          predicate: "and", 
          uid: this.$refs.grid.getColumnByField(args.currentFilteringColumn) 
            .uid, 
          value: "in", 
        }); 
      } 
    }, 
  }, 
  provide: { 
    grid: [Filter], 
  }, 
}; 
</script> 
<style> 
</style> 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Ajith G. 


JW Jimmy Wu January 20, 2021 12:29 AM UTC

Thank you for sending this example. but when I tried here, it still doesn't work.
https://codesandbox.io/s/309686-detailtemplate-forked-mu28h?file=/src/App.vue

I'm hoping to filter the Name column and type "Sales" it will show all the rows that has "Sales" in either "First Name" or "Title" column. 

So right now it's filtering 'And' between two columns, but I want to filter 'Or' between two columns. 

AG Ajith Govarthan Syncfusion Team January 25, 2021 12:33 PM UTC

Hi Jimmy, 
 
Sorry for the delayed updated. 
 
Query: I'm hoping to filter the Name column and type "Sales" it will show all the rows that has "Sales" in either "First Name" or "Title" column. So right now it's filtering 'And' between two columns, but I want to filter 'Or' between two columns. 
 
Based on your query you want to filter the two columns with “or” predicate instead of “and” predicate. By default in EJ2 Grid we do not have support to filter multiple columns with “or” predicate using EJ2 grid filters. But we can generate your own query with “or” predicate to get the values based on your query. 
 
For your convenience we have prepared sample and in that sample we have created query with “or” predicate and applied to the grid component in the click event of the button element.  Please refer the below sample and the code examples for more details. 
 
Code Example: 
App.vue 
 
<template> 
  <div id="app"> 
    <button v-on:click="onClick">filter columns</button> 
    <ejs-grid 
      ref="grid" 
      :dataSource="data" 
      allowSorting="true" 
      allowFiltering="true" 
      :filterSettings="filterOptions" 
      :actionBegin="actionBegin" 
      :actionComplete="actionComplete" 
    > 
      <e-columns> 
        <e-column 
          field="EmployeeID" 
          headerText="Employee ID" 
          width="125" 
          textAlign="Right" 
        ></e-column> 
        <e-column field="FirstName" headerText="Name" width="120"></e-column> 
        <e-column field="Title" headerText="Title" width="170"></e-column> 
        <e-column 
          field="HireDate" 
          headerText="Hire Date" 
          width="135" 
          textAlign="Right" 
          format="yMd" 
        ></e-column> 
        <e-column 
          field="ReportsTo" 
          headerText="Reports To" 
          width="120" 
          textAlign="Right" 
        ></e-column> 
      </e-columns> 
    </ejs-grid> 
  </div> 
</template> 
<script> 
import Vue from "vue"; 
import { GridPlugin, Filter } from "@syncfusion/ej2-vue-grids"; 
import { employeeData } from "./data"; 
import detailTemplate from "./detailTemplate"; 
import { Query, Predicate } from "@syncfusion/ej2-data"; 
 
Vue.use(GridPlugin); 
 
export default { 
  data: () => { 
    return { 
      data: employeeData, 
      flag: false, 
      filterOptions: { type: "Menu" }, 
    }; 
  }, 
  methods: { 
    actionComplete: function (args) { 
      if (args.currentFilteringColumn === "Title" && this.flag) { 
        this.flag = false; 
        this.$refs.grid.refreshColumns(); 
      } 
    }, 
    onClick: function (args) { 
      var query = new Query(); 
      this.$refs.grid.query = query.where( 
        new Predicate("FirstName", "equal", "Nanccy", true).or( 
          "EmployeeID", 
          "equal", 
          "2", 
          true 
        ) 
      );                                  // apply the query to the grid component to get the data based on the query. 
      this.$refs.grid.refresh(); 
    }, 
 
    actionBegin: function (args) { 
      if ( 
        args.requestType === "filtering" && 
        args.currentFilteringColumn === "FirstName" 
      ) { 
        console.log(args); 
        this.flag = true; 
        args.columns.push({ 
          actualFilterValue: {}, 
          actualOperator: {}, 
          field: "Title", 
          ignoreAccent: false, 
          isForeignKey: false, 
          matchCase: false, 
          operator: "contains", 
          predicate: "and", 
          uid: this.$refs.grid.getColumnByField(args.currentFilteringColumn) 
            .uid, 
          value: args.columns[0].value, 
        }); 
      } 
    }, 
  }, 
  provide: { 
    grid: [Filter], 
  }, 
}; 
</script> 
<style> 
</style> 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Ajith G. 


Loader.
Up arrow icon