Search results

Data Binding

DataManager supports both RESTful JSON data services binding and local JavaScript object array binding.

Local data binding

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. Now the JavaScript object array can be queried and manipulated.

Source
Preview
app.vue
<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 %}

Remote data binding

DataManager can be bound to remote data source by assigning service end point URL to the url property. With the provided url, the DataManager handles all communication with the data server with help of queries.

When querying data, the DataManager will convert the query object(Query) into server request after calling executeQuery and waits for the server response(JSON format).

Source
Preview
app.vue
<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 queried data will not be cached locally unless offline mode is enabled.

See Also