Connecting a DataSource with Authentication

[Dave]

Hi,

 I am new to Kendo and Telerik and I have been having a play to see if I can connect it to Unleashed (an inventory management application which I am evaluating).  In order to access the API, I have to pass some authorization parameters in the header.

I believe I have got this to work because I am not getting an authentication error, however I am getting the following error and I have tried a few different code changes and I have exhausted the google search results on the subject.

 The error I am getting is:  Uncaught TypeError: e.slice is not a function [kendo.all.min.js - line 11]

 Can anyone shed an light on why I am getting this error?

 

 

            <div class="demo-section k-content wide">
                <div id="listView"></div>
                <div id="pager" class="k-pager-wrap"></div>
            </div>

            <script type="text/x-kendo-template" id="custtemplate">
                <div class="cust">
                    <h3>#:CustomerName#</h3>
                </div>
            </script>

           <script>
            $(function () {
                //alert($("#lblCrypto").text);
                var dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "https://api.unleashedsoftware.com/Customers",
                            headers: {
                                "Content-Type": "application/json",
                                "Accept": "application/json",
                                "api-auth-id": "​***********************",
                                "api-auth-signature": "************************"
                            },
                            dataType: "json"
                        }
                    },
                    pageSize: 21
                });

                $("#listView").kendoListView({
                    dataSource: dataSource,
                    template: kendo.template($("#custtemplate").html())
                });
            });
           </script>​

 

 

I have also tried adding this to the dataSource section, but it didnt make any difference

                            success: function (result) {
                                console.log(result);
                                var pass = result.data;
                                $("#listView").data("KendoGrid").data.data(pass);
                            }

 

Any help would be greatly appreciated.

Dave

[Dave]

The json data being returned from the API is as follows - I have reduced this to a simple form because it was too long.

{
    "Pagination": {
        "NumberOfItems": 5,
        "PageSize": 200,
        "PageNumber": 1,
        "NumberOfPages": 1
    },
    "Items": [
        {
            "Addresses": [],
            "CustomerCode": "C​O1",
            "CustomerName": "Company 1",

        },
        {
            "Addresses": [
                {
                    "AddressType": "Postal",
                    "AddressName": "​HQ",
                    "StreetAddress": "10 B​ACK STREET",
                    "Suburb": "QUEENSTOWN",
                    "City": null,
                    "Region": null,
                    "Country": "New Zealand",
                    "PostalCode": "9600"
                },
                {
                    "AddressType": "Physical",
                    "AddressName": "Warehouse",
                    "StreetAddress": "10 BACK STREET",
                    "Suburb": "QUEENSTOWN",
                    "City": null,
                    "Region": null,
                    "Country": "New Zealand",
                    "PostalCode": "9600"
                }
            ],
            "CustomerCode": "​CO2",
            "CustomerName": "​Company 2",
        },
        {
            "Addresses": [
                {
                    "AddressType": "Postal",
                    "AddressName": "Head Office",
                    "StreetAddress": "13​ Main Street",
                    "Suburb": "Auckland City",
                    "City": "Auckland",
                    "Region": null,
                    "Country": "New Zealand",
                    "PostalCode": "1030"
                },
                {
                    "AddressType": "Shipping",
                    "AddressName": "Victoria Park",
                    "StreetAddress": "1​ West Street",
                    "Suburb": "Auckland City",
                    "City": "Auckland",
                    "Region": null,
                    "Country": "New Zealand",
                    "PostalCode": "1030"
                }
            ],
            "CustomerCode": "​CO3",
            "CustomerName": "​Company 3",
        }
    ]
}

[Dave]

NumberOfItems in the Pagination section should be 3.

[Rosen]

Hello Dave,

The error you are getting is due to the server response being an object instead of an array. In this case you should set the appropriate schema's data and total (if paging is enabled) options in order to instruct where the data is located within the response. For example:

  var dataSource = new kendo.data.DataSource({
      transport: {
          /*..*/
      },
      schema: {
        total: "Pagination.NumberOfItems",
            data: "Items"
      },
      pageSize: 21
  });

Regards,
Rosen
Telerik

 

 

[Dave]

Hi Rosen,

Thank you for replying and for giving me the answer.

I had worked this out only a couple of hours previously, but I appreciate you confirming this for me.

Regards

Dave