Data Binding

DataGrid can represent data obtained from different sources. You can declare an array of plain objects or implement a custom store encapsulating some sophisticated logic - DataGrid will operate with any source fast and seamless. In this guide, you will learn the ways of providing and binding data to the DataGrid widget.

Before you begin, please make sure you have successfully linked the necessary libraries and added the DataGrid widget to your page. If not, start by learning how to do this using the Installation topic.

NOTE: You can configure the DataGrid widget using the jQuery, Knockout or AngularJS approach. Code snippets in this guide use the jQuery approach.

See Also

Provide Data

You can use one of the two approaches to provide data for DataGrid. The first is declaring an array of plain objects and using it as a data source. For more information on this approach, see the Using an Array of Objects topic. The second is implementing a data source using the data library. With its new level of sophistication, this approach brings you the privileges and flexibility not before seen in primitive arrays. This approach is discussed in greater detail in the Using the Data Layer topic.

Using an Array of Objects

The simplest way of providing data for DataGrid is using an array of plain objects. Each object in this array represents a grid row, while the fields of this object provide information for grid columns. For an example, consider the following code snippet.

JavaScript
var gridDataSource = [
    { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi' },
    { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi' },
    { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction' }
];

This array contains three objects that will be represented in a grid by three rows. Each object holds four fields providing data for four grid columns. Next, you need to bind this array to your grid. To learn how to do it, refer to the Bind Data topic.

Using the Data Layer

DevExtreme is supplied with a set of components called "data layer" that helps you read and write data. A comprehensive overview of data layer features is provided in the Data Layer topic. There are two main concepts upon which the data layer is built: DataSource and Store.

The DataSource is a stateful object that keeps sorting, grouping, filtering and data transformation options, and applies them each time data is loaded. It also provides events intended to handle data and state changes. More information on the DataSource object can be found in the Reference section.

Store is a universal data access interface supporting a number of methods for reading and editing data. You can find the list of these methods in the What Are Stores topic. There are four types of stores.

  • ArrayStore - provides access to an in-memory array
  • LocalStore - provides access to the HTML5 web storage
  • ODataStore - provides access to a remote OData service
  • CustomStore - allows you to implement your own data access logic

DataGrid accepts a DataSource instance or a DataSource configuration object. The instance or the object must have the store field specified (except for a CustomStore, where all store settings are specified directly in the object). This field can be set to an object configuring a store of any type listed above. The following subtopics describe each Store type in more detail and provide information about usage peculiarities.

How to Choose the Store Type

If you need the DataGrid widget to work with local data, use the ArrayStore or LocalStore.

If your data is fetched from the remote server, refer to table below to learn how different Store types affects different data grid features. The plus (+) sign means that the feature is supported by the corresponding Store type. The minus (-) sign means that the DataGrid does not support the feature for the corresponding Store type.

ODataStore, BreezeStore, JayDataStore, ParseStore Custom Store
Remote Operations are disabled Basic Remote Operations are enabled Advanced Remote Operations are enabled
Filtering, Sorting, Paging and Grouping features + +(**) + +
Setting the autoExpandAll option to false at runtime or calling the collapseAll(groupIndex) method +(*) +(**) +(*) +
Custom summary calculation +(*) +(**) +(*) -
Using of header filter with the default data source +(*) +(**) +(*) +
Sorting, Grouping and Filtering on calculated columns +(*) +(**) - -
Assigning functions to the calculateGroupValue and calculateSortValue options +(*) +(**) - -

* The operation initiates the load of data for all pages. This may cause significant delay if the data set is large.
** The operation is executed on cached data, which was initially loaded. You can disable caching by setting the cacheEnabled option to false, but this may affect grid performance.

NOTE: When the amount of data is large, it is also recommended that you deny grouping by columns whose values are mostly unique.

Using an ArrayStore

This type of store is great when you need a simple data source with the data lifetime equaling the lifetime of your application. An ArrayStore is created from an array of plain objects. DataGrid creates it automatically when such an array is specified for it (see Using an Array of Objects). However, you may need to create an ArrayStore explicitly if you require handling the events of data loading, updating, etc., in a special way on the store level. The code snippet below illustrates the minimal configuration of an ArrayStore that can be used to provide data for the DataGrid widget.

JavaScript
var gridDataSource = {
    store: {
        type: 'array',
        data: [
            { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi' },
            { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi' },
            { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction' }
        ]
    }
};

In addition, you can specify the store's key option to have read-write access of data. An ArrayStore has many more options available for configuring. For the full list, refer to the ArrayStore reference section.

After you have created a data source configuration object, you need to bind it to your grid. Refer to the Bind Data section to learn how to do this.

Using a LocalStore

This type of store is helpful when you use an HTML5 Web Storage (also known as window.localStorage) for storing your data. To provide a minimal configuration for a LocalStore, specify its type and name options as demonstrated below.

JavaScript
var gridDataSource = {
    store: {
        type: 'local',
        name: 'myLocalStore'
    }
};

In addition, you can specify the store's key option to gain read-write access to data. A LocalStore has many more options available for configuring. For a full list, refer to the LocalStore reference section.

After you have created a data source configuration object, you need to bind it to your grid. Refer to the Bind Data section to learn how to do this.

Using an ODataStore

OData is a universal open protocol for consuming data APIs. The DevExtreme data layer provides a special type of store to access OData web services, called ODataStore. The following code is sufficient to provide data for DataGrid using an ODataStore.

JavaScript
var gridDataSource = {
    store: {
        type: 'odata',
        url: 'http://url/to/the/source'
    }
};

In addition, you can specify the store's key option to have a read-write access to data. In some cases, this configuration is not enough for a ODataStore to support proper operation. This may occur due to the same-origin policy restrictions. For more information, read the Note on Same-Origin Policy topic.

An ODataStore has many more options available for configuring. For the full list of them, refer to the ODataStore reference section.

After you have created a data source configuration object, you need to bind it to your grid. Refer to the Bind Data section to learn how to do this.

Using a CustomStore

When you have a custom web service with its own data accessing logic, use a CustomStore to operate data. This type of store requires the implementation of a function for each data access operation. The DataGrid widget supports a full set of CRUD operations (insert, update and delete operations are available with the editing feature enabled):

  • implement the load function to specify how data must be loaded from your web service;
  • implement the insert function to specify how data must be added to your remote data set;
  • implement the update function to specify how data must be updated in your remote data set;
  • implement the delete function to specify how data must be removed from your remote data set.

The following code snippet shows how to do this.

JavaScript
var gridDataSource = {
    load: function (loadOptions) {
        return $.getJSON('http://mydomain.com/MyDataService');
    },
    update: function (key, values) {
        //Updating data
    },
    insert: function (values) {
        //Inserting data
    },
    remove: function (key) {
        //Deleting data
    }
}

For details, refer to the Custom Store guide and the CustomStore reference section.

After you have created a data source configuration object, bind it to your grid. Refer to the Bind Data section to learn how to do this.

You can see an example of a grid using a CustomStore in the Use Remote Data for DataGrid tutorial.

Bind Data

Regardless of the approach you've chosen to providing data, after implementing a data source, bind it to the DataGrid widget using the dataSource option as demonstrated below.

JavaScript
$(function () {
    $("#gridContainer").dxDataGrid({
        dataSource: gridDataSource
    });
});

View Demo

Data Caching

By default, the DataGrid caches loaded data. It improves the widget performance by reducing the number of queries to the data source when the end-user sorts, filters or groups data. See the cacheEnabled option description to learn more about DataGrid cashing capabilities.