Grid with Multiple DataSources

[Perry]

What is the best practice for a binding a grid to multiple datasources?   I have a grid with a few columns form Rest Endpoint A and the rest of the columns from Rest Endpoint B.  Is there any examples on how to do this?

[Alex Hajigeorgieva]

Hello, Perry, 

The Kendo UI Grid can have a single data source. 

A couple of possible solutions are offered in this forum thread on the same topic:

https://www.telerik.com/forums/multiple-datasources-for-one-grid

You could also possibly define the data source transport read as a function and use the $.when() method, merge the responses and call the success callback

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.read

dataSource: {
   transport: {
    read: function(e){
     var callOne = $.ajax({
       url: "/endpointA"
     });

     var callTwo = $.ajax({
       url: "/endpointB"
     });

     $.when( callOne,callTwo).then(function(firstResponse, secondResponse) {
       var firstResult = firstResponse[0];
       var secondResult = secondResponse[0];
       for(var i=0; i< firstResult.length; i++){
        Object.assign(firstResult[i], secondResult[i]);
       }
       e.success(firstResult);
     });
   }
  }
},

https://dojo.telerik.com/iraDUnEp

Kind Regards,
Alex Hajigeorgieva
Progress Telerik