How to set Kendo Grid total when datasource.transport.read is set to function?

Question

Kendo version: ^2019.3.1023

Assume I have a datasource like the one below, where the read prop is set to a function, and that the returned data is used in a Kendo Grid .

The success callback of the XHR function/method is passed an object that contains a "page" (array of objects that are part of a paginated query result), and the total result count for the query (count of records on all "pages").

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: function(options) {
      // make JSONP request to https://demos.telerik.com/kendo-ui/service/products
      $.ajax({
        url: "https://demos.telerik.com/kendo-ui/service/products",
        dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
        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() {
  console.log(dataSource.view().length); // displays "77"
});
</script>

How can I set the grid total?

I tried setting it in the schema , using a TypeScript getter as below, but this doesn't work.

{ schema: { total: this.paginatedRecordsCount }}

I also tried :total="total" in the <kendo-datasource> , and the <kendo-grid> , where total is again TypeScript getter, similarly to this example , but that has no effect (even when I hardcode values).

I found this type defintion, but it's not helpful:

interface DataSourceTransportOptions {
    success: (data?: any) => void;
    error: (error?: any) => void;
    data: any;
}

This is the body of options.success at runtime:

function(data) {
    that._ranges = [];
    that.success(data, params);

    deferred.resolve();
}

Answer 1

Setting total in schema didn't work when paginatedTransactionsCount was a TypeScript getter.

total: this.paginatedRecordsCount

As it turns out, you can use a closure to access a wrapper object (containing count ) from the success callback of the method handling XHR ( Axios.post in my case) so that the callback can update the count prop in a way that is "visible" to the grid via the schema.total property below.

total: () => this.paginatedRecordsCountWrapper.count