All Components

DataSource Overview

The DataSource is an abstraction for using local data arrays of JavaScript objects or remote data services which return JSON, JSONP, oData, or XML.

The DataSource wrapper components play a central role in practically all web applications that are built with the Kendo UI Wrappers for Vue suite.

Installation

To initialize the DataSource wrapper components, utilize any of the following approaches:

Using the ref Attribute

The following example demonstrates how to initialize the DataSource components by using the CDN services and by referencing the DataSource with the ref attribute. To access all CDN references, open the sample in Plunker.

<div id="vueapp" class="vue-app">
        <kendo-datasource ref="remoteDatasource"
                          :type="'odata'"
                          :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'"
                          :group-field="'Country'">
        </kendo-datasource>
        <kendo-autocomplete style="width: 100%"
                            :data-text-field="'ContactName'"
                            :data-source-ref="'remoteDatasource'" >
        </kendo-autocomplete>
</div>
Vue.use(DataSourceInstaller);
Vue.use(DropdownsInstaller);

new Vue({
    el: '#vueapp'
})

Using an Internal Slot Element

The following example demonstrates how to initialize the DataSource components by using the CDN services and by referencing the DataSource as an internal slot element. To access all CDN references, open the sample in Plunker.

<div id="vueapp" class="vue-app">
        <kendo-autocomplete style="width: 100%" :data-text-field="'ContactName'" >
            <kendo-datasource slot="kendo-datasource"
                              :type="'odata'"
                              :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'"
                              :group-field="'Country'">
            </kendo-datasource>
       </kendo-autocomplete>
</div>
Vue.use(DataSourceInstaller);
Vue.use(DropdownsInstaller);

new Vue({
    el: '#vueapp'
})

Initializing with Webpack

  1. Install Kendo UI and add a theme.

    npm install --save @progress/kendo-ui
    npm install --save @progress/kendo-theme-default
  2. Install the Kendo UI DataSource package for Vue.

    npm install --save @progress/kendo-datasource-vue-wrapper

    The package also exports the following wrappers for individual components:

    • DataSource
    • HierarchicalDataSource
    • GanttDataSource
    • GanttDependencyDataSource
    • PivotDataSource
    • SchedulerDataSource
    • TreeListDataSource
  3. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI-related files to the main.js file. If you use the Kendo UI components once in your application, add the Kendo UI-related files the component where they will be referred.

    import '@progress/kendo-ui'
    import '@progress/kendo-theme-default/dist/all.css'
    
    import { DataSource,
            HierarchicalDataSource,
            GanttDataSource,
            GanttDependencyDataSource,
            PivotDataSource,
            SchedulerDataSource,
            TreeListDataSource,
            DataSourceInstaller } from '@progress/kendo-datasource-vue-wrapper'
    
    Vue.use(DataSourceInstaller)
    
    new Vue({
       el: '#app',
       components: {
           DataSource,
            HierarchicalDataSource,
            GanttDataSource,
            GanttDependencyDataSource,
            PivotDataSource,
            SchedulerDataSource,
            TreeListDataSource,
            DatasourceInstaller
       }
    })
In this article