Data Binding
The Kendo UI Grid wrapper for Vue enables you to bind it to a list of possible values.
To populate the Grid with data, bind it to either:
Binding to Local Data Arrays
To provide the Kendo UI Data Grid wrapper for Vue with local data:
- Define the array in the
dataobject of the Vue application. - Refer it during the initialization of the Grid through the
:data-sourceproperty.
Binding to Remote Data Services
For remote data binding you need to specify a remote endpoint or web service returning data in JSON/JSONP, OData or XML format, and utilize the DataSource component as a mediator between the Grid and the underlying data. To make the connection to the remote endpoint and process the data properly, the data source needs information about the web service URL(s), the request type, the response data type, and the structure (schema) of the response, in case it is more complex than a plain array of objects.
To provide the Kendo UI Data Grid wrapper for Vue with data by remote data services:
- Create a new Kendo UI Data Source object.
- To configure the data operation actions, such as
Read,Update,Create, orDestroy, refer the remote data services by using theTransportobject of the Data Source&mdashh;for example,:transport-read-url,:transport-update-url,and so on. - Refer the Data Source object during the initialization of the Grid through the
:data-sourceproperty.
Binding to GraphQL Service
A GraphQL service is served over HTTP through a single endpoint and expresses the full set of capabilities of the API. Also, a GraphQL service usually responds with JSON, thus making it very easy to integrate with the Grid component through a more advanced data source configuration.
The following example demonstrates how to setup the Grid to perform CRUD operations through GraphQL queries and mutations. The service that is used is implemented in ASP.NET Core and is available for review in the following GitHub repository.
Binding to WebSocket
The Grid allows you to perform real-time updates for all users who start a session with your web application. In such cases, you can utilize WebSockets and the DataSource component. For handling data requests, the DataSource supports WebSockets through the transport->push/read/update/destroy/create configurations. The setting of those methods enable the long polling process—that is, the data source uses web sockets for transmitting and operating with the data in real time on every page refresh.
The following example demonstrates how to implement real-time push-notifications from a WebSocket. To see the real-time updates:
- Open the page in two browser windows.
- Create, update, or destroy Grid items.
Working Offline
The DataSource component provides built-in options for interacting with the web application, modifying its data, and storing the changes when no internet connection is available. The DataSource also enables the server syncing of the offline updates that will follow when the internet connection is restored. To enable and also customize the offline data storage, use the default offline-storage setting of the DataSource, and utilize its online and offlineData methods.
The following example demonstrates how to edit, create, or delete records, and persist these changes in the Grid when you are offline, and then sync the updates when you are back online. The DataSource acts as a mediator between the Grid and the underlying data.
