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-datasource>

    <kendo-dropdownlist :data-source-ref="'datasource'"
                        :data-text-field="'text'"
                        :data-value-field="'value'">
    </kendo-dropdownlist>
</div>
Vue.use(DropdownsInstaller);
Vue.use(DataSourceInstaller);

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"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Products'"
                      :transport-read-data-type="'jsonp'"
                      :transport-read-type="'GET'"
                      :transport-update-url="'https://demos.telerik.com/kendo-ui/service/Products/Update'"
                      :transport-update-data-type="'jsonp'"
                      :transport-update-type="'GET'"
                      :schema-model-id="'ProductID'"
                      :schema-model-fields="schemaModelFields"
                      :page-size='20'>
    </kendo-datasource>

    <kendo-grid :height="600"
                :data-source-ref="'remoteDataSource'"
                :pageable='true'
                :editable="'inline'">
        <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>
    </kendo-grid>
</div>
Vue.use(GridInstaller);
Vue.use(DataSourceInstaller);

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