Data Binding in Vue Grid component

<template>
<div id="app">
    <ejs-grid :dataSource="data">
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
        <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' type='date' width=120></e-column>
      </e-columns>
    </ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { DataManager, WebApiAdaptor } from "@syncfusion/ej2-data";

Vue.use(GridPlugin);

export default Vue.extend({
  data() {
return {
  data: new DataManager({
    url: 'api/Orders',
    adaptor: new WebApiAdaptor(),
    crossDomain: true
  })
};
  }
});
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

{
Items: [{..}, {..}, {..}, ...],
Count: 830
}

<template>
<div id="app">
    <ejs-grid :dataSource="dataSource" :editSettings='editSettings' :toolbar='toolbar'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' :isPrimaryKey='true' textAlign='Right' width=90></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
        <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' type='date' width=120></e-column>
      </e-columns>
    </ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { DataManager, RemoteSaveAdaptor } from "@syncfusion/ej2-data";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default Vue.extend({
  data() {
return {
  dataSource: new DataManager({
    json: data,
    adaptor: new RemoteSaveAdaptor,
    insertUrl: '/Home/Insert',
    updateUrl: '/Home/Update',
    removeUrl: '/Home/Delete'
  }),
  editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
  toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel']
};
  },
  provide: {
grid: [Edit, Toolbar]
  }
});
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

public ActionResult Update(OrdersDetails value)
{
    ...
    return Json(value);
}
public ActionResult Insert(OrdersDetails value)
{
    ...
    return Json(value);
}
public ActionResult Delete(int key)
{
    ...
    return Json(data);
}

<template>
<div id="app">
    <ejs-grid :dataSource="data" :actionFailure='actionFailure'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
        <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' type='date' width=120></e-column>
      </e-columns>
    </ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { DataManager, ODataAdaptor } from "@syncfusion/ej2-data";

Vue.use(GridPlugin);

export default Vue.extend({
  data() {
return {
  data: new DataManager({
    url: 'http://some.com/invalidUrl',
    adaptor: new ODataAdaptor()
  })
};
  },
  methods: {
actionFailure: function() {
   alert('Server exception: 404 Not found');
}
  }
});
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

<template>
<div id="app">
    <ejs-grid :dataSource='data' :allowPaging='true' :pageSettings='pageOptions' :allowSorting='true' :allowGrouping='true' :dataStateChange='dataStateChange'>
        <e-columns>
            <e-column field= "OrderID" headerText="Order ID" width="130" textAlign='Right' ></e-column>
            <e-column field= "CustomerID" headerText="Customer Name" width="150"></e-column>
            <e-column field= "ShipName" headerText="Ship Name" width="200"></e-column>
            <e-column field= "ShipCity" headerText="Ship City" width="150"></e-column>
        </e-columns>
    </ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, DataStateChangeEventArgs, Sorts, Sort, Group, Page, DataResult } from "@syncfusion/ej2-vue-grids";
import { Ajax } from '@syncfusion/ej2-base';

Vue.use(GridPlugin);

export default Vue.extend({
  data() {
return {
  data: {},
  pageOptions: { pageSize: 10, pageCount: 4 },
  orderService: new OrderService()
};
  },
  mounted() {
let state = { skip: 0, take: 10 };
this.dataStateChange(state);
  },
  methods:{
dataStateChange: function (state) {
    this.orderService.execute(state).then(( gridData ) => this.data = gridData );
}
  },
  provide: {
  grid: [Sort, Group, Page]
  }
});
export class OrderService {

public ajax: Ajax = new Ajax({
    type: 'GET', mode: true,
    onFailure: (e: Error) => { return false; }
});

private BASE_URL: string = 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';

public execute(state: DataStateChangeEventArgs): Promise<DataResult> {
    return this.getData(state);
}

private getData(state: DataStateChangeEventArgs): Promise<DataResult> {
    const pageQuery = `$skip=${state.skip}&$top=${state.take}`;
    let sortQuery: string = '';

    if ((state.sorted || []).length) {
        sortQuery = `&$orderby=` + (<any> state).sorted.map((obj: Sorts) => {
            return obj.direction === 'descending' ? `${obj.name} desc` : obj.name;
        }).reverse().join(',');
    }

    this.ajax.url = `${this.BASE_URL}?${pageQuery}${sortQuery}&$inlinecount=allpages&$format=json`;

    return this.ajax.send().then((response: any) => {
        let data: any = JSON.parse(response);
        return <DataResult> { result: data['d']['results'], count: parseInt(data['d']['__count'], 10) };
    });
}
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

<template>
<div id="app">
    <ejs-grid :dataSource='data' :allowPaging='true' :pageSettings='pageOptions' :allowSorting='true' :allowGrouping='true' :dataStateChange='dataStateChange'>
        <e-columns>
            <e-column field= "OrderID" headerText="Order ID" width="130" textAlign='Right' ></e-column>
            <e-column field= "CustomerID" headerText="Customer Name" width="150"></e-column>
            <e-column field= "ShipName" headerText="Ship Name" width="200"></e-column>
            <e-column field= "ShipCity" headerText="Ship City" width="150"></e-column>
        </e-columns>
    </ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, DataStateChangeEventArgs, Sorts, Sort, Group, Page, DataResult } from "@syncfusion/ej2-vue-grids";
import { Ajax } from '@syncfusion/ej2-base';

Vue.use(GridPlugin);

export default Vue.extend({
  data() {
return {
  data: {},
  pageOptions: { pageSize: 10, pageCount: 4 },
  orderService: new OrderService()
};
  },
  mounted() {
let state = { skip: 0, take: 10 };
this.dataStateChange(state);
  },
  methods:{
dataStateChange: function (state) {
    this.orderService.execute(state).then(( gridData ) => this.data = gridData );
}
  },
  provide: {
  grid: [Sort, Group, Page]
  }
});
export class OrderService {

public ajax: Ajax = new Ajax({
    type: 'GET', mode: true,
    onFailure: (e: Error) => { return false; }
});
private BASE_URL: string = 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';
public execute(state: DataStateChangeEventArgs): Promise<DataResult> {
    return this.getData(state);
}
private getData(state: DataStateChangeEventArgs): Promise<DataResult> {
    const pageQuery = `$skip=${state.skip}&$top=${state.take}`;
    let sortQuery: string = '';
    if ((state.sorted || []).length) {
        sortQuery = `&$orderby=` + (state).sorted.map((obj: Sorts) => {
            return obj.direction === 'descending' ? `${obj.name} desc` : obj.name;
        }).reverse().join(',');
    }
    this.ajax.url = `${this.BASE_URL}?${pageQuery}${sortQuery}&$inlinecount=allpages&$format=json`;
    return this.ajax.send().then((response: any) => {
        let data: any = JSON.parse(response);
        return { result: data['d']['results'], count: parseInt(data['d']['__count'], 10) };
    });
}
  }
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

<template>
<div id="app">
    <ejs-grid :dataSource='data' :allowPaging='true' :pageSettings='pageOptions' :allowSorting='true' :allowGrouping='true' :dataStateChange='dataStateChange'  :editSettings='editSettings' :toolbar='toolbar'>
        <e-columns>
            <e-column field= "OrderID" headerText="Order ID" :isPrimaryKey='true' width="130" textAlign='Right' ></e-column>
            <e-column field= "CustomerID" headerText="Customer Name" width="150"></e-column>
            <e-column field= "ShipName" headerText="Ship Name" width="200"></e-column>
            <e-column field= "ShipCity" headerText="Ship City" width="150"></e-column>
        </e-columns>
    </ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, DataStateChangeEventArgs, Sorts, Sort, Group, Page, DataResult, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { OrderService } from "./order-service";

Vue.use(GridPlugin);

export default Vue.extend({
  data() {
return {
  data: {},
  editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
  toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
  pageOptions: { pageSize: 10, pageCount: 4 },
  orderService: new OrderService()
};
  },
  mounted() {
let state = { skip: 0, take: 10 };
this.dataStateChange(state);
  },
  methods:{
dataStateChange: function (state) {
    this.orderService.execute(state).then(( gridData ) => this.data = gridData );
},
dataSourceChanged: function (state) {
if (state.action === 'add') {
  this.orderService.addRecord(state).subscribe(() => state.endEdit());
} else if (state.action === 'edit') {
  this.orderService.updateRecord(state).subscribe(() => state.endEdit());
} else if (state.requestType === 'delete') {
  this.orderService.deleteRecord(state).subscribe(() => state.endEdit());
}
  }
  },
  provide: {
  grid: [Sort, Group, Page, Edit, Toolbar]
  }
});
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

{
result: [{..}, {..}, {..}, ...],
count: 830,
aggregates: { 'Freight - sum' : 450,'EmployeeID - min': 1 }
}

<template>
<div id="app">
    <ejs-grid :dataSource='data' :allowPaging='true' :pageSettings='pageOptions' :allowSorting='true' :allowGrouping='true' :dataStateChange='dataStateChange' :filterSettings='filterOptions'>
        <e-columns>
            <e-column field= "OrderID" headerText="Order ID" width="130" textAlign='Right' ></e-column>
            <e-column field= "CustomerID" headerText="Customer Name" width="150"></e-column>
            <e-column field= "ShipName" headerText="Ship Name" width="200"></e-column>
            <e-column field= "ShipCity" headerText="Ship City" width="150"></e-column>
        </e-columns>
    </ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, DataStateChangeEventArgs, Sorts, Sort, Group, Page, DataResult, Filter } from "@syncfusion/ej2-vue-grids";
import { Ajax } from '@syncfusion/ej2-base';

Vue.use(GridPlugin);

export default Vue.extend({
  data() {
return {
  data: {},
  filterOptions: { type: 'Excel' },
  pageOptions: { pageSize: 10, pageCount: 4 },
  orderService: new OrderService()
};
  },
  mounted() {
let state = { skip: 0, take: 10 };
this.dataStateChange(state);
  },
  methods:{
dataStateChange: function (state) {
    if (state.action.requestType === "filterchoicerequest" || state.action.requestType ==="filtersearchbegin") {
  this.orderService.execute(state).then((e) => state.dataSource(e));
} else {
  this.orderService.execute(state).then(( gridData ) => {this.grid.dataSource = gridData} );
}
}
  },
  provide: {
  grid: [Sort, Group, Page, Filter]
  }
});
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

<template>
<div id="app">
    <ejs-button v-on:click.native="btnClick">Play</ejs-button>
    <ejs-grid>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120 ></e-column>
            <e-column field='CustomerID' headerText='Customer ID' textAlign='Right' width=120 ></e-column>
            <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120 ></e-column>
            <e-column field='ShipCountry' headerText='Ship Country' textAlign='Right' width=120 ></e-column>
        </e-columns>
    </ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { Ajax } from '@syncfusion/ej2-base';

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

export default Vue.extend({
  data() {
return {
  data: {}
};
  },
  methods:{
   btnClick: function (args){
    var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; // Grid instance
    var ajax = new Ajax("https://ej2services.syncfusion.com/production/web-services/api/Orders", "GET");
    ajax.send();
    ajax.onSuccess = function (result) {
    grid.dataSource = JSON.parse(result);
    };
  }
  }
});
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>