Data Binding

You can bind a DataSource instance to local data arrays or remote data services.

Binding to Local Data Arrays

To bind the DataSource to a local array of JavaScript objects, assign the array to the data configuration property of the DataSource instance.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource" :data="dataSourceArray">

    <kendo-dropdownlist :data-source-ref="'datasource'"

new Vue({
    el: '#vueapp',
    data: function() {
        return {
            dataSourceArray: [
                { text: 'Albania', value: '1' },
                { text: 'Andorra', value: '2' },
                { text: 'Armenia', value: '3' },
                { text: 'Austria', value: '4' },
                { text: 'Azerbaijan', value: '5' },
                { text: 'Belarus', value: '6' },
                { text: 'Belgium', value: '7' }

Binding to Remote Data Services

To make the connection to the remote endpoint and process the data properly, the DataSource requires the following information:

  • URLs of the web service.
  • Request type.
  • Response data type.
  • Structure (schema) of the response (if more complex than a plain array of objects).
<div id="vueapp" class="vue-app">
    <kendo-datasource ref="remoteDataSource"

    <kendo-grid :height="600"
        <kendo-grid-column field="ProductName"></kendo-grid-column>
        <kendo-grid-column field="UnitPrice" title="Unit Price" :width="120" :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column field="UnitsInStock" title="Units In Stock" :width="120"></kendo-grid-column>
      <kendo-grid-column :command="['edit']" title="&nbsp;" width="250px"></kendo-grid-column>

new Vue({
    el: '#vueapp',
    data: {
        schemaModelFields: {
            ProductID: { editable: false, nullable: true },
            ProductName: { validation: { required: true } },
            UnitPrice: { editable: true, type: 'number', validation: { required: true, min: 1 } },
            UnitsInStock: { type: 'number', validation: { min: 0, required: true } }

In this article