This is a migrated thread and some comments may be shown as answers.
Using KendoUI Datasource with AngularJS
4 Answers 52 Views
This is a migrated thread and some comments may be shown as answers.
Patrik Johansson
Top achievements
Rank 1
Patrik Johansson asked on 21 Dec 2015, 04:47 PM

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. 

 

4 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 22 Dec 2015, 02:42 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Patrik Johansson
Top achievements
Rank 1
answered on 22 Dec 2015, 02:50 PM

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)

0
Patrik Johansson
Top achievements
Rank 1
answered on 22 Dec 2015, 02:56 PM

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

0
Alexander Valchev
Telerik team
answered on 23 Dec 2015, 05:39 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Asked by
Patrik Johansson
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Patrik Johansson
Top achievements
Rank 1
Share this question
or