How binding AngularJS & Kendo with $http Service.

[Oren]

Hi,
We have a angularJS project and we work also with Kendo UI (Grid)
We want to bind the Grid dataSource with $http Service.
All the official examples of AngularJS & Kendo are binding to local dataSource or WCF(.svc) links:
http://demos.telerik.com/kendo-ui/grid/angular (attached src1) 

Can you show me or send a reference for best practice way to bind kendo with $http Service.  

thanks in advance. 

[Lars]

In case you still need this, here is one example that I got from Telerik support for a similar question:
http://dojo.telerik.com/@pesho/EyOn

[Petur Subev]

Hello Guys,

I added this as a small example into the documentation regarding the Grid when used with Angular:

http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/AngularJS/the-grid-widget#how-to-bind-the-grid-using-the-http-service

Regards,
Petur Subev
Telerik

 

 

[Aarsh]

I've another issue using Professional Kendo UI, binding Grid with AngularJS $http service

I've modified the demo and shared here :

http://dojo.telerik.com/EHUzu

1)    If I change a demo project I at-least see a network activity for http://filltext.com
2)    But I do NOT see a grid on page !


if I try the code below

01.$scope.getMessageQueueKendo = function () {
02.    var v = 'test';
03.    $scope.gridOptions = {
04.        columns: [
05.            { field: "Id" },
06.            { field: "Data_Contract_Field_1" },
07.            { field: "Data_Contract_Field_2" },
08.            { field: "Data_Contract_Field_3" },
09.            { field: "Data_Contract_Field_4" },
10.            { field: "Data_Contract_Field_5" }
11.        ],
12.        dataSource: {
13.            schema: {
14.                data: "d"
15.            },
16.
17.            transport: {
18.                read: function (e) {
19.                    service.getData(0, -1).success(function (data, status, headers, config) {
20.                        e.success(data);
21.                    }).
22.                    error(function (data, status, headers, config) {
23.                        alert('error');
24.                        console.log('Error getting message queue. Server returned status : ', status);
25.                        console.log(data);
26.                    });
27.                }
28.            }
29.        },
30.        pageSize: 5
31.    }
32.};

 

[Aarsh]

... if I try the code snippet above for my actual project, which is asp.net web api project running on .NET 4.5.2, the controller is not getting hit, nor I see any activity for that URL in fiddler or dev toools.

Nor, I see the grid view at all !

Any idea what's happening ?

[Aarsh]

Let me also mention that the example is from http://docs.telerik.com/kendo-ui/AngularJS/the-grid-widget#how-to-bind-the-grid-using-the-http-service

Also, the AngularJS service function call I've mentioned in the code snippet above, has the following definition.

function getData() {
    return $http({
        url: baseUrl + 'Get',
        method: 'GET'
    });
}

[Kiril Nikolov]

Hello Aarsh,

 

In your example the schema.data option is not needed, since you return the data in an array, without an object with a "d" key. Here is the working example:

 

http://dojo.telerik.com/@Kiril/iPiSO

 

Regards,
Kiril Nikolov
Telerik

 

 

[AFIS Team]

Hi,

I'm trying to do the same as in the examples you posted, but also for the create method of the datasource transport object.

So, in my create method, I use the angular $http library and in the corresponding success and error callbacks, I do options.success() and options.error() respectively (where options is the argument to the create method).

However, what I notice is that when I have an error returned from the $http call, which triggers the error callback, an empty grid line is added to the grid anyway, and subsequent clicks on the button to re-send the data seem to trigger more AJAX calls (one more for each click, so on the 5th click it will trigger 5 failed AJAX calls).

What could I be doing wrong?

My create method looks something like this:

create: function(options) {
  return $http({
    url: myUrl,
    method: 'POST',
    data: myData
  })
  .success(function(response) {
    options.success();
  })
  .error(function(response) {
     options.error();
  })
}

[Kiril Nikolov]

Hello,

Would it be possible to open a separate ticket and send us a runnable sample where the issue can be reproduced, and we will be happy to help.

Regards,
Kiril Nikolov
Telerik by Progress