Using KendoUI Datasource with AngularJS

[improwise]

As many developers probably have before me, considering when building an app with AngularJS and Kendo UI if I should use the Kendo UI Datasource "all the way" or instead mix it with Angulars $http/$resource. Or to be more specific, how to handle transfer of data to and from the Kendo UI datasource, as the Datasource would probably be used no matter what as it plays nice with the Kendo UI widgets. As of now we've build (kind of) a service that returns a Kendo UI Datasource complete with URLs for read, update, create, destroy and model/schema info so we don't have to have that code in our controllers (or even worse, views) which work fine but we are considering if we should change that to a more AngularJS like services using $http or $resource. But we are a bit wary of what kind of problems we might run into in the future by doing so. At the same time, having a "pure" AngularJS handling of data is also tempting. 

 

It would be nice if Telerik could provide some summary of pros and cons of using each method, what to look out for and what might not work if using $http/$resource compared to the "normal" Kendo UI way. 

 

[Alexander Valchev]

Hello Patrik,

You may use AngularJS $http/$resource with DataSource custom transport. There is no difference if you use a custom or the default transport, both basically do the same thing - they retrieve data from a remote endpoint and pass it to the `success` method of the transport.

transport: {
  read: function(o) {
    //use AngularJS $http/$resource to fetch the data
    //when data is fetched call o.success(result); where result is the data array
  },
  update: function(o) {
    //use AngularJS $http/$resource to fetch the data
    //when data is fetched call o.success(); where result is the data array
  }
  //etc.
}

In the function arguments you will find all the needed information about requested page, the pageSize, sort order, filters, groups, modified or destroyed records and etc.

The build-in Ajax transport of the DataSource uses the same approach so there should be no difference between the two. Which one you would use is a matter of personal preference or project specifications.

Regards,
Alexander Valchev
Telerik

 

 

[improwise]

Thank you Alexander. 

Will there be any different when it comes to automatic handling of events etc? Like would I have to create some own event handlers to handle a SaveChanges() if the Datasource is defined using $http/$resoure compared to "normal" Kendo UI way or just wire it up in the Datasource how to handle transfer of data? Would the data property still be available for updates and deletes like in:

 

                    update: {

                        url: data => this.webAPIBaseUrl + moduleName + "/" + data.Id,
                        type: "PUT",
                        dataType: "json"
                    },
                    destroy: {
                        url: data => this.webAPIBaseUrl + moduleName + "/" + data.Id,
                        type: "DELETE",
                        dataType: "json"
                    }

 

(We are using TypeScript if anyone wonders why the code looks different)

[improwise]

Also, do you have some good and updated examples of how to use Kendo UI Datasource with AngularJS and $http or $resource?

[Alexander Valchev]

Hello Patrik,

The DataSource will automatically execute the corresponding custom transport functions. For example if a record is edited the update transport will be called and the dataSource will pass needed parameters.

There is no need to develop custom event handlers.

Regards,
Alexander Valchev
Telerik