This section explains you the steps required to create a simple DataManager and demonstrate the basic usage of the DataManager in a Vue environment.
Below is the list of minimum dependencies required to use the DataManager.
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-base
|-- es6-promise (Required when window.Promise is not available)
@syncfusion/ej2-data
requires the presence of a Promise feature in global environment. In the browser, window.Promise must be available.
You can use Vue CLI
to setup your vue applications.
To install Vue CLI use the following commands.
npm install -g @vue/cli
npm install -g @vue/cli-init
Start a new Vue application using below Vue CLI command.
vue init webpack-simple quickstart
cd quickstart
npm install
All the available Essential JS 2 packages are published in npmjs.com
registry.
To install DataManager, use the following command
npm install @syncfusion/ej2-data --save
The —save will instruct NPM to include the DataManager package inside of the
dependencies
section of thepackage.json
.
The DataManager can act as gateway for both local and remote data source which will uses the query to interact with the data source.
DataManager
can be bound to local data source by assigning the array of JavaScript objects to the json
property or simply passing them
to the constructor while instantiating.
<template>
<div id="app">
<table class='e-table'>
<tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
<tr v-for="item in items">
<td>{{item.OrderID}}</td><td>{{item.CustomerID}}</td><td>{{item.EmployeeID}}</td>
</tr>
</table>
</div>
</template>
<script>
import Vue from 'vue';
import { DataManager, Query } from '@syncfusion/ej2-data';
import {data} from './datasource.js';
export default {
data () {
return {
items: new DataManager(data).executeLocal(new Query().take(8))
}
}
}
</script>
<style>
.e-table {
border: solid 1px #e0e0e0;
border-collapse: collapse;
font-family: Roboto;
}
.e-table td, .e-table th {
border-style: solid;
border-width: 1px 0 0;
border-color: #e0e0e0;
display: table-cell;
font-size: 14px;
line-height: 20px;
overflow: hidden;
padding: 8px 21px;
vertical-align: middle;
white-space: nowrap;
width: auto;
}
</style>
{% endraw %}
DataManager
can be bound to remote data source by assigning service end point URL to the url
property.
Now all DataManager
operations will address the provided service end point.
<template>
<div id="app">
<table class='e-table'>
<tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
<tr v-for="item in items">
<td>{{item.OrderID}}</td><td>{{item.CustomerID}}</td><td>{{item.EmployeeID}}</td>
</tr>
</table>
</div>
</template>
<script>
import Vue from 'vue';
import { DataManager, Query } from '@syncfusion/ej2-data';
let SERVICE_URI = 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';
export default {
data () {
return {
items: []
}
},
created () {
new DataManager({ url: SERVICE_URI }).executeQuery(new Query().take(8)).then((e) => {this.items = e.result})
}
}
</script>
<style>
.e-table {
border: solid 1px #e0e0e0;
border-collapse: collapse;
font-family: Roboto;
}
.e-table td, .e-table th {
border-style: solid;
border-width: 1px 0 0;
border-color: #e0e0e0;
display: table-cell;
font-size: 14px;
line-height: 20px;
overflow: hidden;
padding: 8px 21px;
vertical-align: middle;
white-space: nowrap;
width: auto;
}
</style>
{% endraw %}
The data filtering is a trivial operation which will let us to get reduced view of data based on filter criteria.
The filter expression can be built easily using where
method of Query
class.
<template>
<div id="app">
<table class='e-table'>
<tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
<tr v-for="item in items">
<td>{{item.OrderID}}</td><td>{{item.CustomerID}}</td><td>{{item.EmployeeID}}</td>
</tr>
</table>
</div>
</template>
<script>
import Vue from 'vue';
import { DataManager, Query } from '@syncfusion/ej2-data';
import {data} from './datasource.js';
export default {
data () {
return {
items: new DataManager(data).executeLocal(new Query().where('EmployeeID', 'equal', 3))
}
}
}
</script>
<style>
.e-table {
border: solid 1px #e0e0e0;
border-collapse: collapse;
font-family: Roboto;
}
.e-table td, .e-table th {
border-style: solid;
border-width: 1px 0 0;
border-color: #e0e0e0;
display: table-cell;
font-size: 14px;
line-height: 20px;
overflow: hidden;
padding: 8px 21px;
vertical-align: middle;
white-space: nowrap;
width: auto;
}
</style>
{% endraw %}
The data can be ordered either in ascending or descending using sortBy
method of Query
class.
<template>
<div id="app">
<table class='e-table'>
<tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
<tr v-for="item in items">
<td>{{item.OrderID}}</td><td>{{item.CustomerID}}</td><td>{{item.EmployeeID}}</td>
</tr>
</table>
</div>
</template>
<script>
import Vue from 'vue';
import { DataManager, Query } from '@syncfusion/ej2-data';
import {data} from './datasource.js';
export default {
data () {
return {
items: new DataManager(data).executeLocal(new Query().sortBy('CustomerID').take(8))
}
}
}
</script>
<style>
.e-table {
border: solid 1px #e0e0e0;
border-collapse: collapse;
font-family: Roboto;
}
.e-table td, .e-table th {
border-style: solid;
border-width: 1px 0 0;
border-color: #e0e0e0;
display: table-cell;
font-size: 14px;
line-height: 20px;
overflow: hidden;
padding: 8px 21px;
vertical-align: middle;
white-space: nowrap;
width: auto;
}
</style>
{% endraw %}
The page
method of the Query class is used to get range of data based on the page number and the total page size.
<template>
<div id="app">
<table class='e-table'>
<tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
<tr v-for="item in items">
<td>{{item.OrderID}}</td><td>{{item.CustomerID}}</td><td>{{item.EmployeeID}}</td>
</tr>
</table>
</div>
</template>
<script>
import Vue from 'vue';
import { DataManager, Query } from '@syncfusion/ej2-data';
import {data} from './datasource.js';
export default {
data () {
return {
items: new DataManager(data).executeLocal(new Query().page(1, 8))
}
}
}
</script>
<style>
.e-table {
border: solid 1px #e0e0e0;
border-collapse: collapse;
font-family: Roboto;
}
.e-table td, .e-table th {
border-style: solid;
border-width: 1px 0 0;
border-color: #e0e0e0;
display: table-cell;
font-size: 14px;
line-height: 20px;
overflow: hidden;
padding: 8px 21px;
vertical-align: middle;
white-space: nowrap;
width: auto;
}
</style>
{% endraw %}
DataManager component can be used with Syncfusion components which supports data binding.
A DataSource can be created in-line with other Syncfusion component configuration settings.
<template>
<div id="app">
<ejs-grid :dataSource="data" height='315px'>
<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 } from '@syncfusion/ej2-data';
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: new DataManager(data)
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
To bind remote data to Syncfusion component, you can assign a service data as an instance of DataManager
to the dataSource
property.
<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 } from "@syncfusion/ej2-data";
Vue.use(GridPlugin);
export default {
data() {
let SERVICE_URI =
"https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders?$top=7";
return {
data: new DataManager({
url: SERVICE_URI
})
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>