This is a migrated thread and some comments may be shown as answers.

Kendo-UI DataSource leveraging Angular $resource

2 Answers 175 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Brandon
Top achievements
Rank 1
Brandon asked on 17 Oct 2013, 06:24 PM
I am attempting to implement a abstraction over a RESTful back-end for my persistence layer and have ran into something I find a little confusing. I am using the angular framework and more specifically the ngResource module to get access to the $resource service. I can execute my queries and work against the back-end without issue. My problem comes when integrating back into my kendo-ui datasource, the datasource never recognizes when the query has returned. From my understanding the $resource will immediately return a empty collection (array) for possible assignment and then populate that array with the results of the query when it finishes. Kendo-ui's DataSource should watch this variable and upon update reflect this back to anyone leveraging the datasource. I have successfully implemented this using a slightly different model (passing a object literal that I update myself as required) and the DataSource has no problem recognizing the updates. Any insight would be helpful!

app.provider('remotePersistence', function () {
      this.$get = function ($resource) {
          var definitions = {
              widgets: $resource('http://127.0.0.1:3000\:3000/widget.json',{},{
                  archive: { method: 'POST', params: { archive: true }},
                  active: { method: 'POST', params: { active: true }}
              })
          };
 
          var datastore = {}
          var namespaces = ['widgets'];
          namespaces.forEach(function (namespace) {
              datastore[namespace] = {
                  endpoint: definitions[namespace],
                  cache: definitions[namespace].query()
              };
          });
          return datastore;
      };
  });
 
  app.controller(
  "WidgetsSearchController",
  function ($scope, remotePersistence){
 
      $scope.widgets = undefined;
 
      $scope.visibleWidgets = new kendo.data.DataSource({
          // data: remotePersistence.widgets.cache,
          transport: {
              read: function (options) {
                  options.success(remotePersistence.widgets.cache);
              }
          }
      });
  });
  //This works but is not desirable style
  //$scope.widgets = remotePersistence.widgets.query(function(){ $scope.visibleWidgets.data($scope.widgets) });

2 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 18 Oct 2013, 07:54 AM
Hi Brandon,

I just replied to your stackoverflow question.

Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brandon
Top achievements
Rank 1
answered on 20 Oct 2013, 03:50 PM
I've gone ahead and updated the SO post with my solution which works great for paging and sorting. Still yet to implement filtering as the backend side of that will take a few more minutes (essentially same mechanism as sorting will need to be applied).
Tags
Data Source
Asked by
Brandon
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Brandon
Top achievements
Rank 1
Share this question
or