change default filterSettings columns operator

[Murilo]

How can I set the default operator to "contains" instead of "equal"?

this.$refs.grid.ej2Instances.filterSettings.columns.operator = 'contains';

not work.

thanks!

[Rajapandi Ravi]

Hi Murilo, 

Greetings from syncfusion support 

Query#: How can I set the default operator to "contains" instead of "equal"? 

We have analyzed your query and we could see that you like to change the default operator for the string columns as “contains” from “equal”. 

You can achieve your requirement by using the actionComplete event of the Grid. Please refer the below code example and sample for more information. 

<template> 

  <div id="app"> 

    <ejs-grid 

      :dataSource="data" 

      :allowFiltering="true" 

      :actionComplete="actionComplete" 

      :filterSettings="filterOptions" 

      height="273px" 

    > 

      <e-columns> 

. . . 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      data: data, 

      filterOptions: { 

        type: "Menu", 

      }, 

    }; 

  }, 

  methods: { 

    actionComplete: function (args) { 

      if (args.columnType === "string") { 

        args.filterModel.flMuiObj.dropOptr.value = "contains"; 

      } 

    }, 

  }, 

  provide: { 

    grid: [Filter], 

  }, 

}; 

</script> 

Sample: https://codesandbox.io/s/296675-infinite-scrolling-forked-gm0cz?file=/src/App.vue 

You can also have the option to change the filter menu for particular column by using filter property. Refer to the below code example 

<template> 

  <div id="app"> 

    <ejs-grid 

      :dataSource="data" 

      :allowFiltering="true" 

      :actionComplete="actionComplete" 

      :filterSettings="filterOptions" 

      height="273px" 

    > 

      <e-columns> 

        <e-column 

          field="CustomerID" 

          :filter="colfilter" 

          headerText="Customer ID" 

          width="120" 

        ></e-column> 

            .  .  .  .  .  .  .  

            .  .  .  .  .  .  . 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin, Filter } from "@syncfusion/ej2-vue-grids"; 

import { data } from "./datasource.js"; 

Vue.use(GridPlugin); 

export default { 

  data() { 

    return { 

      data: data, 

      colfilter: { operator: "contains" }, 

      filterOptions: { 

        type: "Menu", 

      }, 

    }; 

  }, 

  methods: { 

  }, 

  provide: { 

    grid: [Filter], 

  }, 

}; 

</script> 

<style> 

@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css"; 

</style> 

Regards, 

Rajapandi R

[Murilo]

work fine!

thanks!

[Rajapandi Ravi]

Hi Murilo, 

 

Thanks for the update 

 

We are happy to hear that our suggested solution was working fine from your end. 

 

Regards, 

Rajapandi R