Using MVC and React together for DataSources

[IT Dept]

Hello,

I'm attempting to use the React wrappers (or maybe the new React components) with an MVC backend. 

 

In the native jQuery implementation we can just set the Datasource's transport.read property to an API endpoint, load the kendo.aspnetmvc.js library, and get database level filtering of our requests from the filtering/sorting/paging interactions on the grid. Like this

public JsonResult Billbacks([DataSourceRequest]DataSourceRequest request)
{
    var data= _context.Mytable;
    var results = data.ToDataSourceResult(request);
    return Json(results, JsonRequestBehavior.AllowGet);
}

dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: '/my/api/endpoint',
      dataType: 'json'
    }
  },
  serverSorting: true,
  serverGrouping: true,
  serverPaging: true,
  serverFiltering: true,
  pageSize: 2,
  schema: {
     model: {
      fields: {
        Id: { type: 'number' }
      }
    },
  }
});

 

But, when I try this in the kendo grid react wrapper it isn't playing nicely with the ASP.NET MVC Kendo DataSourceResponse.

By default it returns an object like this:

{
  "Data": [
    {
      "Id": 1,
      "Amount": -50
    },
    {
      "Id": 2,
      "Amount": -99
    }
  ],
  "Total": 10,
  "AggregateResults": null,
  "Errors": null
}

 

The kendo.aspnetmvc enhanced grids know how to deal with this, but the react wrapper kendo grid just calls that response the data for row 0. If I return `Json(result.Data)` then I get the resulting data back, but the total number of results doesn't return so the grid can't show it's page numbers properly.

How is serverside paging supposed to work with the kendo react wrapped grid? Is the MVC DataSourceRequest/DataSourceResult controller stucture appropriate to use with it? Hopefully there's a way to do this without rewriting all that functionality (although to use redux to handle the API calls it seems based on your examples that re-writing that funcionality is indeed the way to do it).

[IT Dept]

Also, is there a better section for a question like this? I couldn't see any react focused sections on the forum.

[Stefan]

Hello, Eric,

The same approach can be used with the Kendo UI for React Wrappers:

https://www.telerik.com/kendo-react-ui/wrappers/grid/data-binding/#toc-binding-to-remote-data-services

If the native Kendo UI Grid for React is used, then the requests to the endpoint have to be made programmatically using Ajax or Fetch.

==============================================

As for a React focuses forums, we are working on this and I hope and we will have a React dedicated section of the Kendo UI forums soon. Please have in mind that for now, we do not have a specific ETA which we can share.

Apologies for the inconvenience.


Regards,
Stefan
Progress Telerik

[IT Dept]

So if I understand this correctly:

The native react components do not support the filtering/pagination/sorting request generation logic yet, and those parts of the request need to be generated in user code to get them working the way the classic Kendo-UI library used to handle it internally vis the Read datasource endpoint?

And using the React wrapped libraries with Redux the same applies, the kendo generated request obhects can't be used so they need to be manually generated instead?

[Stefan]

Hello, Eric,

Yes, when the native React components are used, the developer is responsible for handling the filtering, sorting, paging etc logic manually. This is just a different concept when working with component separation, as the actions are dispatched usually with Redux, Flux, MobX etc which is different than the jQuery approach. The idea of the native React components its to give the developers the tools, to handle the events as desired based on the used technology for state management and data handling.

If the wrappers are used, they to provide events for filtering, sorting etc, which can be prevented, and the developer can handle them manually using the state management approach.

Regards,
Stefan
Progress Telerik

[IT Dept]

I finally figured out my initial question. In order to use the MVC helper classes and methods, You need to do more than just import the kendo.aspnetmvc.js file, you need to also set the datasource type:

 

"dataSource": {
            "type": (function() {
                if (kendo.data.transports['aspnetmvc-ajax']) {
                    return 'aspnetmvc-ajax';
                } else {
                    throw new Error('The kendo.aspnetmvc.min.js script is not included.');
                }
            })(),

 

Looking at the javascript grid code rendered by a grid defined in a cshtml file is helpful to see what the generated versions use for configuration.