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

Error when binding using AngularJS : TypeError: Unable to get property 'slice' of undefined or null reference

3 Answers 311 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Aarsh
Top achievements
Rank 1
Aarsh asked on 22 Jan 2015, 03:06 PM
I was working on a Code-Library Project.
This is a sample ASP.NET Web API test application.

I do see the success callback function being called, and "data" does seem to carry the expected json object array.

TestContract.cs & TestContoller.cs

public class TestContract
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
}
‚Äč
public class TestController : ApiController
{
    private IEnumerable<TestContract> getTestData()
    {
        return (new TestContract[] {
            new TestContract{ Id = 1, Name = "Name 1", Description = "Description 1" },
            new TestContract{ Id = 2, Name = "Name 2", Description = "Description 2" },
            new TestContract{ Id = 3, Name = "Name 3", Description = "Description 3" },
            new TestContract{ Id = 4, Name = "Name 4", Description = "Description 4" },
            new TestContract{ Id = 5, Name = "Name 5", Description = "Description 5" }
        }).AsEnumerable();
    }
...


app.js ( AngularJS module definition )

var app = angular.module('app', ['kendo.directives']);
 
app.filter("asDate", function () {
    return function (input) {
        return new Date(input);
    }
});

TestService.js AngularJS Service

(function () {
    'use strict';
 
    angular
        .module('app')
        .service('TestService', ['$http', TestService]);
 
    function TestService($http) {
        this.getData = getData;
 
        function getData() {
            return $http.get(rootUrl + 'api/test');
        }
    }
})();


TestController.js AngularJS Controller


(function () {
    'use strict';
 
    angular
        .module('app')
        .controller('TestController', ['$scope', 'TestService', '$http', TestController]);
 
 
    function TestController($scope, service, $http) {
        $scope.title = 'TestController';
 
        $scope.testGridOptions = {
            columns: [
                { field: "Id", title: "Column 1" },
                { field: "Name", title: "Column 2" },
                { field: "Description", title: "Column 2" }
            ],
            dataSource: {
                schema: {
                    data: "d"
                },
                transport: {
                    read: function (e) {
                        service.getData().
                        success(function (data, status, headers, config) {
                            e.success(data)
                        }).
                        error(function (data, status, headers, config) {
                            alert('something went wrong in test grid')
                            console.log(status);
                        });
                    }
                },
                pageSize: 5
            }
        };
    }
})();


Index.cshtml

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
 
<div data-ng-controller="TestController">
 
    <div>Controller: {{title}}</div>
 
    <div>Grid 2 Starts</div>
    <div data-kendo-grid="" data-k-options="testGridOptions"></div>
    <div>Grid 2 Ends</div>
 
</div>


Attachments :

1) Error.PNG
     shows the error I am getting in browser's Dev Tools console after sucess call back

2) transport service success callback has expected data.PNG
    showing the data-tip in Visual Studio with expected data.


If you'd like to investigate, I have a test application ready.
Please let me know if I have to remove something prior to upload.
I am not using any telerik's dlls but I do am using references to Kendo UI CDN libraries.

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 24 Jan 2015, 11:52 AM

Hello Aarsh,

I guess the error is caused by the incorrect schema.data configuration. If I am not mistaken you return the data in array that is not wrapped in a object with key : "d". In this case you need to remove the schema.data configuration and the error should be resolved. If not then provide a runnable sample and we will be happy to help.

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Steven
Top achievements
Rank 1
answered on 30 Apr 2015, 07:43 PM

Hi, I have remote data which is returned in the following format and am trying to populate a kendo grid using angular.  I cant seem to get this to work because of the array/schema ("Solution Summaries").

 

{
    "SolutionSummaries": [
        {
            "SolutionId": 110,
            "QuotationId": 303718,
            "QuotationDate": "2015-04-10T16:47:29.0000000",
            "QuotationNumber": "1000303718",
            "VehicleDescription": "Audi A3 Diesel Saloon (2013 > Present) 1.6 Tdi 110 S Line 4Dr",
            "ReplacingRegistrationNumber": "",
            "Term": 12,
            "CsaRepayment": 289,
            "EmployeeContribution": 289,
            "Status": "Awaiting Driver Signature",
            "CanDownloadPif": false
        },
        {
            "SolutionId": 123,
            "QuotationId": 303748,
            "QuotationDate": "2015-04-14T07:04:27.0000000",
            "QuotationNumber": "1000303748",
            "VehicleDescription": "Audi A1 Diesel Sportback (2012 > 2015) 1.6 Tdi S Line 5Dr",
            "ReplacingRegistrationNumber": "",
            "Term": 12,
            "CsaRepayment": 258.7,
            "EmployeeContribution": 258.7,
            "Status": "Awaiting Driver Signature",
            "CanDownloadPif": false
        },
        {
            "SolutionId": 124,
            "QuotationId": 303749,
            "QuotationDate": "2015-04-14T07:06:36.0000000",
            "QuotationNumber": "1000303749",
            "VehicleDescription": "Audi A4 Diesel Avant (2012 > Present) 2.0 Tdi 150 S Line 5Dr",
            "ReplacingRegistrationNumber": "",
            "Term": 12,
            "CsaRepayment": 442,
            "EmployeeContribution": 442,
            "Status": "Awaiting Driver Signature",
            "CanDownloadPif": false
        },

 

My angular controller code:

 (function () {
    'use strict';

    angular
        .module('app')
        .controller('TestController', ['$scope', 'TestService', '$http', TestController]);


    function TestController($scope, service, $http) {
        $scope.title = 'TestController';

        $scope.testGridOptions = {
            columns: [
                { field: "QuotationId", title: "Quotation Id" },
                { field: "SolutionId", title: "Solution Id" },
                { field: "VehicleDescription", title: "Vehicle Description" }
            ],
            dataSource: {
                schema: {
                    data: "SolutionSummaries"
                },
                transport: {
                    read: function (e) {
                        service.getData().
                        success(function (data, status, headers, config) {
                                e.success(data);
                            }).
                        error(function (data, status, headers, config) {
                            alert('something went wrong in test grid')
                            console.log(status);
                        });
                    }
                },
                pageSize: 5
            }
        };
    }
})();

 

 Ive added some interceptors to the app.js and have uploaded a demo page here.  Does anyone know why I cant read the data from the API?

 http://dev.carbenefitsolutionstest.uk/Driver/PagesClientManagement/kendoangular-grid.html

 

0
Kiril Nikolov
Telerik team
answered on 04 May 2015, 07:35 AM

Hello Steven,

I have managed to bind your data, without problems. Please see this example:

http://dojo.telerik.com/uNeQe

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Aarsh
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Steven
Top achievements
Rank 1
Share this question
or