Searching in Vue Grid component

16 Mar 202323 minutes to read

You can search records in a Grid, by using the search method with search key as a parameter.This also provides an option to integrate search text box in grid’s toolbar by adding Search item to the toolbar.

To use searching, you need to inject Search module in the provide section.

The clear icon is shown in the Data Grid search text box when it is focused on search text or after typing the single character in the search text box. A single click of the clear icon clears the text in the search box as well as the search results in the Data Grid.

app.vue

<template>
    <div id="app">
        <ejs-grid :dataSource='data' :toolbar='toolbarOptions' height='272px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=100></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Search } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js'
Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      toolbarOptions: ['Search']
    };
  },
  provide: {
    grid: [Toolbar, Search]
  }
}
</script>
<style>
 @import "https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Initial search

To apply search at initial rendering, set the fields, operator, key, and ignoreCase in the searchSettings.

app.vue

<template>
    <div id="app">
        <ejs-grid :dataSource='data' :searchSettings='searchOptions' :toolbar='toolbarOptions' height='272px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=100></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Search } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js'
Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      toolbarOptions: ['Search'],
      searchOptions: { fields: ['CustomerID'], operator: 'contains', key: 'Ha', ignoreCase: true }
    };
  },
  provide: {
    grid: [Toolbar, Search]
  }
}
</script>
<style>
 @import "https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

By default, grid searches all the bound column values. To customize this behavior define
the searchSettings.fields property.

Search operators

The search operator can be defined in searchSettings.operator property
to configure specified searching.

The following operators are supported in searching:

Operator	Description
startsWith	Checks whether a value begins with the specified value.
endsWith	Checks whether a value ends with specified value.
contains	Checks whether a value contains with specified value.
equal	Checks whether a value equal to specified value.
notEqual	Checks whether a value not equal to specified value.

Search by external button

To search grid records from an external button, invoke the search method.

app.vue

<template>
    <div id="app">
        <div class="e-float-input" style="width: 200px; display: inline-block;">
                <input type="text" class="searchtext"/>
                <span class="e-float-line"></span>
                <label class="e-float-text">Search text</label>
            </div>
        <ejs-button id='search' @click.native='search'>Search</ejs-button>
        <ejs-grid ref='grid' :dataSource='data' height='262px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=100></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Search } from "@syncfusion/ej2-vue-grids";
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { data } from './datasource.js'

Vue.use(GridPlugin);
Vue.use(ButtonPlugin);

export default {
  data() {
    return {
      data: data
    };
  },
  methods: {
    search: function() {
        let searchText = document.getElementsByClassName('searchtext')[0].value;
        this.$refs.grid.search(searchText);
    }
  },
  provide: {
    grid: [Search]
  }
}
</script>
<style>
 @import "https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Search Specific Columns

By default, grid searches all visible columns. You can search specific columns by defining the specific column’s field names in the searchSettings.fields property.

app.vue

<template>
    <div id="app">
        <ejs-grid :dataSource='data' :searchSettings='searchOptions' :toolbar='toolbarOptions' height='272px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=100></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Search } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js'
Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      toolbarOptions: ['Search'],
      searchOptions: {fields: ['CustomerID', 'ShipCity']}
    };
  },
  provide: {
    grid: [Toolbar, Search]
  }
}
</script>
<style>
 @import "https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Clear search by external button

To clear the searched grid records from the external button, set searchSettings.key property as empty string.

app.vue

<template>
    <div id="app">
        <ejs-button id='clear' @click.native='clear'>Clear Search</ejs-button>
        <ejs-grid ref='grid' :dataSource='data' :searchSettings='searchOptions' :toolbar='toolbarOptions' height='262px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=100></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Search } from "@syncfusion/ej2-vue-grids";
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { data } from './datasource.js'

Vue.use(GridPlugin);
Vue.use(ButtonPlugin);

export default {
  data() {
    return {
      data: data,
      toolbarOptions: ['Search'],
      searchOptions: { fields: ['CustomerID'], operator: 'contains', key: 'Ha', ignoreCase: true }
    };
  },
  methods: {
    clear: function() {
        this.$refs.grid.ej2Instances.searchSettings.key = "";
    }
  },
  provide: {
    grid: [Search,Toolbar]
  }
}
</script>
<style>
 @import "https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Search on each key stroke

You can search the Grid data on each key stroke by binding the keyup event for the search input element inside the created event. Inside the keyup handler you can search the Grid by invoking the search method of the Grid component.

app.vue

<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource='data' :toolbar='toolbarOptions' height='262px' :created='created'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=100></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Search } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js'

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      toolbarOptions: ['Search'],
    };
  },
  methods: {
    created: function() {
        document.getElementById(this.$refs.grid.element.id + "_searchbar").addEventListener('keyup', () => {
          this.$refs.grid.search((event.target as HTMLInputElement).value)
        });
    }
  },
  provide: {
    grid: [Search,Toolbar]
  }
}
</script>
<style>
 @import "https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Perform search operation in Grid using multiple keywords

You can perform a searching operation in the Grid using multiple keywords. This can be achieved by the actionBegin event of the Grid.
In the following sample, we have performed the searching with multiple keywords by using the query property of grid when the requestType is searching in the actionBegin event.

app.vue

<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource='data' :searchSettings="searchOptions" :toolbar="toolbarOptions" height='273px' :actionBegin = 'actionBegin' :actionComplete = 'actionComplete'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='Freight' headerText='Freight' textAlign= 'Right' editType= 'numericedit' width=120 format= 'C2'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Search} from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
import { Predicate, Query } from "@syncfusion/ej2-data";

Vue.use(GridPlugin);

export default {
  data() {
    return {
      values: "",
      key: "",
      refresh: false,
      removeQuery: false,
      valueAssign: false,
      data: data,
      toolbarOptions: ["Search"],
      searchOptions: {
        fields: ["OrderID", "CustomerID", "ShipCity", "ShipName"],
        key: "",
      },
    };
  },
  methods: {
    actionBegin(args) {
        if (args.requestType === "searching") {
        const keys = args.searchString.split(",");
        var flag = true;
        var predicate;
        if (keys.length > 1) {
          if (this.$refs.grid.ej2Instances.searchSettings.key !== "") {
            this.values = args.searchString;
            keys.forEach((key) => {
              this.$refs.grid.ej2Instances.getColumns().forEach((col) => {
                if (flag) {
                  predicate = new Predicate(col.field, "contains", key, true);
                  flag = false;
                } else {
                  var predic = new Predicate(col.field, "contains", key, true);
                  predicate = predicate.or(predic);
                }
              });
            });
            this.$refs.grid.ej2Instances.query = new Query().where(predicate);
            this.$refs.grid.ej2Instances.searchSettings.key = "";
            this.refresh = true;
            this.valueAssign = true;
            this.removeQuery = true;
            this.$refs.grid.ej2Instances.refresh();
          }
        }
      }
    },
    actionComplete(args) {
        if (args.requestType === "refresh" && this.valueAssign) {
        document.getElementById(
          this.$refs.grid.ej2Instances.element.id + "_searchbar"
        ).value = this.values;
        this.valueAssign = false;
      } else if (
        document.getElementById(
          this.$refs.grid.ej2Instances.element.id + "_searchbar"
        ).value === "" &&
        args.requestType === "refresh" &&
        this.removeQuery
      ) {
        this.$refs.grid.ej2Instances.query = new Query();
        this.removeQuery = false;
        this.$refs.grid.ej2Instances.refresh();
      }
    }
  },
  provide: {
    grid: [Toolbar, Search]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>