Specify Data Sources

The <datasource> Tag

Use the <datasource> tag to connect a data-driven widget (such as dxDataGrid or dxChart) to a data source.

There are currently three main data-binding options available:

1. Inline Data ('items' attribute), Read-only

<datasource items="new[] { Item1, Item2, Item3 }" />

The specified collection is serialized into JSON and written to the page markup.

2. JSON data from an URL ('url' attribute), Read-only:

<datasource url="http://example.com/data.json" />

or, for JSONP:

<datasource url="http://example.com/data.js?callback=?" />

3. RESTful Controller

<datasource controller="Northwind" load-action="Products" ... />

This option allows to implement full CRUD data sources for any IEnumerable / IQueryable data. Refer to the Connect to Data Using Entity Framework Core tutorial for more information.

Supported attributes:

<datasource controller="Home" 
            load-action="LoadItems"

            update-action="UpdateItem"
            insert-action="InsertItem"
            delete-action="DeleteItem"

            update-method="PUT"
            insert-method="POST"
            delete-method="DELETE"

            key="itemID"
            on-before-send="function(operation, ajaxSettings) {  }" />

Primary Key

Primary key fields are specified via the key attribute. Simple and compound keys are supported:

<datasource key="productID" />

<datasource key="orderID, productID">

Pivot Grid Data Source

The dxPivotGrid widget (<dx-pivot-grid> tag) uses a special extended data source with additional attributes. See the PivotGridDataSource topic for details.

Custom Data Sources

To implement any custom client-side data-binding logic, use techniques described in the Use JavaScript with Tag Helpers (Event Handlers, Templates, etc) and Custom Sources articles.