CORS odata grid

[Rostislav]

Hello, 
I am trying to visualize data from our company's server through Kendo Grid. The data itself is avabile through secure WCF service over HTTPS with authentication. Since the server is in another domain and we need the authentication, i have to use CORS. Without authentication it works just fine using jasonp, but unforunattely that's not an option for us. So my code looks something like this:

var DS = new kendo.data.DataSource({

      type: "odataCors",

      transport: {

        read: {

          url: "https://.../TestData",

          crossDomain: true,

          withCredentials: true,

          beforeSend: function (req) {

            req.setRequestHeader("Authorization", "Basic"  + auth);

          }

        }

      }

    });

I am using odataCors extension, which i found somewhere here on the forums. Requestwise it looks allright and it works like it should when i call DS.read() - ajax sends OPTIONS message with Origin, server responds with adequate headers, ajax sends GET message with auth cookie and server returns valid jsonp odata. 

Trouble begins when i want to attach this datasource to the grid. It doesn't work, it seems like it is processing a response from the OPTIONS response and not from the second one, which actually returns data. 

Is there a way to make it work? Any help would be appriciated very much!
Thank you.

[Petur Subev]

Hello Rostislav,

Since you are using a slightly different scenario the Grid would expect that the data will be returned from the first request, did you try to specify the read option as function as shown in this part of the documentation?
Let me know your findings.

Kind Regards,
Petur Subev
the Telerik team

[Rostislav]

Hello Petur, 
i already tried some experiments with that example in the documentation before, but i haven't been successfull, maybe i just don't understand how it should work.

If i change my code to something like this

read: function(options) {

          $.ajax({

             url: "https://.../TestData",

             type: "GET",

             dataType: "json",

             data: options.data,

             beforeSend: function (xhr) {xhr.setRequestHeader("Authorization", auth); },

             crossDomain: true,

             success: function (result) {

              options.success(result);

             }

           });

it doesn't work unfortunattely, i got TypeError: Cannot read property 'length' of undefined error message, which i suppose mean that i have no data avabile to show in my grid. But it's really wierd, because the result variable contains valid jsonp data which i obtained from my server. Maybe i am just missing something ... Can you help me further?
Thank you very much!

EDIT: i found that the error is emitted by the line
options.success(result);
so i am not so sure anymore that it has something to do with empty data. I am a bit confused.

[Petur Subev]

Hello,

Can you confirm that there are actually records inside of that result variable ?

success: function (result) {

              options.success(result);

             }

If there are no records that means your function which retrieves the data has failed for some reason.

If there are values inside, could you share what is the string representation of that result object and also share what is the schema configuration that you used for the Grid?

Regards,
Petur Subev
the Telerik team

[Rostislav]

Hello, 
There was data in the result variable, but you were right to check the exact format of the records inside it. I found that if i use non-authenticated request my jsonp looks a bit different than if i use authentification, so i made some adjustments and now its working fine so far. 
Thank you for your support!