Edit this page

DataSource Tag Helper Overview

The DataSource tag helper helps you configure the Kendo UI DataSource component in ASP.NET Core applications.

Basic Usage

The following example demonstrates how to define the DataSource by using the DataSource tag helper.

    <kendo-datasource name="datasource"></kendo-datasource >


The DataSource tag helper configuration options are passed as attributes of the tag. The DataSource is an abstraction for binding the Kendo UI widgets to local and remote data and to handle various data operations with the databound Kendo UI TagHelpers.

    <kendo-datasource name="dataSource" type="DataSourceTagHelperType.Ajax" server-operation="false" page-size="5">
            <read url="/DataSource/Products_Read" />
            <sort field="fieldName" direction="asc" />
        .Ajax(dataSource => dataSource
          .Read(read => read.Action("Products_Read", "DataSource"))
          .Sort(sort => sort.Add("FieldName").Ascending())

DataSource Types

The DataSource supports the following types of binding:

  1. Ajax—You have to set the server operations together by using the server-operation property. This approach is also applicable for the WebApi type of binding.
  2. WebApi—When you use the WebApi type of binding in an editable Grid, define the field types in the schema to use the correct editors for the field.

    <model id="ProductID">
        <field name="ProductID" type="number"></field>
  3. Custom—You can use this mode with the oData and oData-v4 services. When the DataSource type is set to custom, the server operations have to be separately set (server-filtering, server-sorting, server-paging, server-grouping, and server-aggregates). The serverOperation property is only used in the Ajax and WebApi types of binding.

See Also