Vue Grid Filter multiple data fields within one column

[Jimmy Wu]

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>

[Thiyagu Subramani]

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.   

valueAccessor: https://ej2.syncfusion.com/vue/documentation/grid/columns/#valueaccessor 

 

columTemplate:  https://ej2.syncfusion.com/vue/documentation/grid/columns/#column-template 

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 

[Jimmy Wu]

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.

[Ajith Govarthan]

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> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

</style> 

 

Sample Link: https://codesandbox.io/s/309686-detailtemplate-forked-0vs5t?file=/src/App.vue:0-2223 

 

Please get back to us if you need further assistance. 

 

Regards, 

Ajith G. 

[Jimmy Wu]

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. 

[Ajith Govarthan]

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> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

</style> 

 

Sample Link: https://codesandbox.io/s/309686-detailtemplate-forked-8mrzf 

 

Please get back to us if you need further assistance. 

 

Regards, 

Ajith G.