fetch

Reads the data items from a remote service (if the transport option is set) or from a JavaScript array (if the data option is set).

The fetch method makes a request to the remote service only the first time it is called if the dataSource is not configured for server operations.

Parameters

callback Function (optional)

The optional function which is executed when the remote request is finished. The function context (available via the this keyword) will be set to the data source instance.

Returns

Promise—A promise that will be resolved when the data has been loaded, or rejected if an HTTP error occurs.

Example - read data from a remote data source

<div id="grid"></div>

<script>
    var dataSource = new kendo.data.DataSource({
      transport: {
        read:  {
          url: "https://demos.telerik.com/kendo-ui/service/products",
          dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
        }
      }
    });

  // read the data items from https://demos.telerik.com/kendo-ui/service/products
  dataSource.fetch(function() {
    let data = this.data();

    // initialize a Kendo Grid with the returned data from the server.
    $("#grid").kendoGrid({
      dataSource: {
        data: data
      },
      height: 800
    });
  });
</script>

Example - use the Promise API to track when a request finishes

<div id="grid"></div>

<script>
    var dataSource = new kendo.data.DataSource({
      transport: {
        read:  {
          url: "https://demos.telerik.com/kendo-ui/service/products",
          dataType: "jsonp"
        }
      }
    });

    // read the data items from https://demos.telerik.com/kendo-ui/service/products
    dataSource.fetch().then(function(){
    var data = dataSource.data();

    // initialize a Kendo Grid with the returned data from the server.
    $("#grid").kendoGrid({
      dataSource: {
        data: data
      },
      height: 800
    });
    });
</script>