Cannot add a custom HTTP header

[Asat]

Hi, 

I just started working with KendoUI mobile and was trying to call a REST Service. Below is my code,

  <script>
                $(document).ready(function() {
                    // create a template using the above definition
                    var template = kendo.template($("#template").html());

                    var dataSource = new kendo.data.DataSource({
                        type: "odata",
                        type: 'POST',
                        transport: {
                            read: "https://172.17.4.172:8443/prt/rest/crmapp/api/CrmGetAccounts",
                            beforeSend: function(xhr)
                                  {
                                          xhr.setRequestHeader('X-token','711761306837443264')
                                  }
                        },
                        change: function() { // to the CHANGE event of the data source
                            // update the max attribute of the "page" input
                            $("#page").attr("max", this.totalPages());

                            $("#products").html(kendo.render(template, this.view()));
                        }
                    });

                    // read data from the remote service
                    dataSource.read();
                });
            </script>


Asyou can see I am trying it our with changing sample code. My issue is the X-token is not getting added to the request header. I want it ot be passed as w HTTP header for the service to work.

Any help would be really appreciated,


Thanks,

Asat

[Alexander Valchev]

Hello Asat,

There is a syntax mistake in configuration properties nesting. Please try the following:

transport: {
    read: {
        url: "https://172.17.4.172:8443/prt/rest/crmapp/api/CrmGetAccounts",
        beforeSend: function(xhr) {
            xhr.setRequestHeader('X-token','711761306837443264')
        }
    }
}

Regards,
Alexander Valchev
Telerik

[Sergiu]

This is for only one datasource, but I have like more than 100 datasources in my application. Is it possible to create a generic setting so that I can add header parameters for every datasource in only one place? Like a global setting.

[Sergiu]

I have found a solution for everyone who is interested:

(function ($, kendo) {
    "use strict";
    kendo.myappns = kendo.myappns || {};
    kendo.myappns.DataSource = kendo.data.DataSource.extend({
        init: function (options) {
            if (options.transport && options.transport.read) {
                options.transport.read.beforeSend = function (xhr) {
                    xhr.setRequestHeader('Auth-Token', mytoken);
                };

            }
            kendo.data.DataSource.fn.init.call(this, options);
        }
    });
})($, kendo);

and then I just replace kendo.data.DataSource with kendo.myappns.DataSource

[David]

 Hi all,

 I don't know whats happening on the below ajax calling. i tried lot but no use

*header*  not work. Please suggest me on the below code.

Note : the below request always goes with "GET" type and without header "token".......

       var url = 'api_url';
        var dataSource = new kendo.data.DataSource({
            type: "odata",
            transport: {
                read: {
                    url: url + 'GetCompanyContacts?UserId=123&CompanyId=123',
                    type:"POST",
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader('TOKEN', 'tekenstring');
                    }
                }

            },
            schema: {
                total: "d.__count"
            },
            sort: {
                field: "SubCategoryCode",
                dir: "desc"
            },
            serverPaging: true,
            serverSorting: true,
            pageSize: 50
        });
thanks in advance