New to Kendo UI for jQuery? Start a free 30-day trial

Transport.read

configuration

The configuration used when the data source loads data items from a remote service.

The data source uses jQuery.ajax to make an HTTP request to the remote service. The value configured via transport.read is passed to jQuery.ajax. This means that you can set all options supported by jQuery.ajax via transport.read except the success and error callback functions which are used by the transport.

If the value of transport.read is a function, the data source invokes that function instead of jQuery.ajax.

If the value of transport.read is a string, the data source uses this string as the URL of the remote service.

All transport actions (read, update, create, destroy) must be defined in the same way, that is, as functions or as objects. Mixing the different configuration alternatives is not possible.

transport.read

Object|String|Function

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
        url: "https://demos.telerik.com/service/v2/core/products"
    }
  }
});
dataSource.fetch(function() {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(dataSource.view().length); // displays "77"
});
</script>

<input value="2" id="search" />
<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    type: "odata-v4",
    read: {
      url: "https://demos.telerik.com/service/v2/core/products",
      data: function() {
          return {
              skip: 0,
              take: $("#search").val() // send the value of the #search input to the remote service
          };
      }
    }
  }
});
dataSource.fetch();
</script>

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: function(options) {
      $.ajax({
        url: "https://demos.telerik.com/service/v2/core/products",
        success: function(result) {
          // notify the data source that the request succeeded
          options.success(result);
        },
        error: function(result) {
          // notify the data source that the request failed
          options.error(result);
        }
      });
    }
  }
});
dataSource.fetch(function() {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(dataSource.view().length); // displays "77"
});
</script>

If set to false, the request result will not be cached by the browser. Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. By default, "jsonp" requests are not cached.

Refer to the jQuery.ajax documentation for further information.

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      /* omitted for brevity */
      cache: true
    }
  }
});
</script>

transport.read.contentType

String

The content-type HTTP header sent to the server. The default is "application/x-www-form-urlencoded". Use "application/json" if the content is JSON. Refer to the jQuery.ajax documentation for further information.

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      /* omitted for brevity */
      contentType: "application/json"
    }
  }
});
</script>

transport.read.data

Object|Function

Additional parameters which are sent to the remote service. The parameter names must not match reserved words, which are used by the Kendo UI DataSource for sorting, filtering, paging, and grouping.

Refer to the jQuery.ajax documentation for further information.

<script>
var dataSource = new kendo.data.DataSource({
  type: "odata-v4",
  transport: {       
    read: {
      url: "https://demos.telerik.com/service/v2/odata/products",
      data:  {
          skip: 0,
          take: 2
      }
    }
  }
});
dataSource.fetch();
</script>

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    type: "odata-v4",
    read: {
      url: "https://demos.telerik.com/service/v2/core/products",
      data: function() {
          return {
              skip: 0,
              take: 2
          };
      }
    }
  }
});
dataSource.fetch();
</script>

transport.read.dataType

String

The type of result expected from the server. Commonly used values are "json" and "jsonp".

Refer to the jQuery.ajax documentation for further information.

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      /* omitted for brevity */
      dataType: "json"
    }
  }
});
</script>

transport.read.type

String

The type of request to make ("POST", "GET", "PUT" or "DELETE"). The default request is "GET".

The type option is ignored if dataType is set to "jsonp". JSONP always uses GET requests.

Refer to the jQuery.ajax documentation for further information.

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      /* omitted for brevity */
      type: "POST"
    }
  }
});
</script>

transport.read.url

String|Function

The URL to which the request is sent.

If set to a function, the data source will invoke it and use the result as the URL.

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
        url: "https://demos.telerik.com/service/v2/core/products"
    }
  }
});
dataSource.fetch(function() {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(dataSource.view().length); // displays "77"
});
</script>

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
        url: function(options) {
          return "https://demos.telerik.com/service/v2/core/products";
        },
      }
    }
  });
dataSource.fetch(function() {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(dataSource.view().length); // displays "72"
});
</script>