Shared DataSource

Multiple UI widgets can be bound to the same data collection by sharing a DataSource.

<div id="vueapp">
    <h4>Select product name</h4>
    <kendo-datasource ref="datasource1"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Products'"
                      :transport-read-data-type="'jsonp'"
                      :transport-update-url="'https://demos.telerik.com/kendo-ui/service/Products/Update'"
                      :transport-update-data-type="'jsonp'"
                      :transport-destroy-url="'https://demos.telerik.com/kendo-ui/service/Products/Destroy'"
                      :transport-destroy-data-type="'jsonp'"
                      :transport-create-url="'https://demos.telerik.com/kendo-ui/service/Products/Create'"
                      :transport-create-data-type="'jsonp'"
                      :schema-model-id="'ProductID'"
                      :schema-model-fields="schemaModelFields"
                      :page-size='20'>
    </kendo-datasource>
    <div class="col-xs-12 col-sm-6 example-col">
        <kendo-autocomplete :data-source-ref="'datasource1'"
                            :auto-bind='false'
                            :data-text-field="'ProductName'"
                            :placeholder="'Choose a product...'">
        </kendo-autocomplete>
    </div>
    <kendo-grid :height="300"
                :auto-bind='true'
                :data-source-ref="'datasource1'"
                :pageable='true'
                :selectable='true'>
        <kendo-grid-column field="ProductName" :width="120"></kendo-grid-column>
        <kendo-grid-column field="UnitPrice" title="Unit Price" :width="100" :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column field="UnitsInStock" title="Units In Stock" :width="100"></kendo-grid-column>
        <kendo-grid-column field="Discontinued" :width="100"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(DropdownsInstaller);
Vue.use(GridInstaller);
Vue.use(DataSourceInstaller);

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

In this article