Access grid instance in Vue Grid component

16 Mar 20236 minutes to read

You can access the instance of the Vue Grid in the following way.

    dataBound: function (args) {
        var gridObj = this.$refs.grid1.$el.ej2_instances[0]; // get the instance of the Grid.
        Object.assign(gridObj.filterModule.filterOperators, {
            startsWith: "contains", // change the default operator as contains for string type column.
        });
    }

In the following sample, the filter operation is performed by getting the instance of the Vue Grid component.

app.vue

<template>
    <div id="app">
        <ejs-grid ref="grid1" :dataSource="data" :allowPaging="true" :allowFiltering="true" :filterSettings="filterOptions" :dataBound="dataBound">
            <e-columns>
                <e-column field="InternalDocumentNo" headerText="InternalDocumentNo" width="180" isPrimaryKey="true" headerTextAlign="center">
                </e-column>
                <e-column field="DocumentNumber" headerText="DocumentNumber" width="180" headerTextAlign="center" :filter="filterOptions">
                </e-column>
                <e-column field="CustomerCode" headerText="CustomerCode" width="180" headerTextAlign="center">
                </e-column>
                <e-column field="WarehouseName" headerText="WarehouseName" width="180" isPrimaryKey="true" headerTextAlign="center">
                </e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Filter } from "@syncfusion/ej2-vue-grids";

Vue.use(GridPlugin);

export default {
    data() {
        return {
            data: [
            {
                InternalDocumentNo: 84374,
                DocumentNumber: "SOV-7855",
                CustomerCode: "0500733131",
                WarehouseName: "Main Warehouse"
            },
            {
                InternalDocumentNo: 84372,
                DocumentNumber: "SOV-7853",
                CustomerCode: "0500733132",
                WarehouseName: "Main Warehouse"
            },
            {
                InternalDocumentNo: 84365,
                DocumentNumber: "SOV-7852",
                CustomerCode: "0500733131",
                WarehouseName: "Main Warehouse"
            },
            {
                InternalDocumentNo: 84358,
                DocumentNumber: "SOV-7850",
                CustomerCode: "0500733131",
                WarehouseName: "Main Warehouse",
            },
            {
                InternalDocumentNo: 84357,
                DocumentNumber: "SOV-7849",
                CustomerCode: "0500733131",
                WarehouseName: "Main Warehouse"
            }
            ],
            filterOptions: {
                operator: "contains",
            }
        };
    },
    methods: {
        dataBound: function (args) {
            var gridObj = this.$refs.grid1.$el.ej2_instances[0];
            Object.assign(gridObj.filterModule.filterOperators, {
                startsWith: "contains", // change the default operator as contains for string type column
            });
        }
    },
    provide: {
        grid: [Page, Filter]
    }
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>