Issue Populating Grid With JSON

[Jon]

Hi,

I have a KendoUI grid that I am trying to populate with some JSON data.  Looking in Fiddler the grid is never attempting to access the JSON endpoint URL listed in the datasource filed.  I am sure I am missing something simple, but any help would be appreciated.  I have pasted the JQuery below:

$(document).ready(function () {

            $("#ktsMain").kendoTabStrip();

 

            $("#ktgMain").kendoGrid

            ({

                columns:

                [

                    { field: "ProjectName", title: "Project Name" }

                ]

                , dataSource:

                {

                    type: "json"

                    , transport:

                    {

                        read:

                        {

                            url: "http://localhost:7651/home/summaries"

                            , type: "GET"

                            , contentType: "application/json; charset=utf-8"

                        }

                    }

//                  , schema:

//                  {

//                      data: "ProjectSummaries"

//                  }

                }

                , editable: false

                , height: 500

            });

        });

[Roel Hans Bethlehem]

From the posted code it seems as you are doing a cross domain call. For example if your html page that has your script is at localhost:80 calls localhost:7651 then this is considered a cross domain call. 

You will not see anything in for example Fiddler as jquery silently fails the cross domain call.

You can however issue a jsonp call since this works around the crossdomain issue. Another solution is to move the service to the same domain and the call by home/summaries.

 

[Brian Swiger]

So, I'm doing something VERY similar in that I have a service that is returning JSON.

Using Fiddler, I can use the Composer and see the JSON returning.  I click the TextView and the JSON button and everything looks great.  Example:

{"Description":"John Deere","FclManufacturerKey":"99999","Guid":"94602d64-3446-4eed-b4ff-e0bb6eaf4f6f","Id":2,"Type":0},{"Description":"Test ","FclManufacturerKey":"88888","Guid":"a3fc0e70-2081-4716-b1d3-2adb431d1290","Id":1,"Type":0},

My Web page does run on a different port from the Web service, so as Roel Hans Bethlehem indicated, it is cross-domain. 

I copied the code from the Grid Remote Data example and am using my service and return values:

<div id="example" class="k-content">

            <div id="grid"></div>

            <script>

                var dateRegExp = /^\/Date\((.*?)\)\/$/;

 

                function toDate(value) {

                    var date = dateRegExp.exec(value);

                    return new Date(parseInt(date[1]));

                }

 

                $(document).ready(function () {

                    $("#grid").kendoGrid({

                        dataSource: {

                            type: "jsonp",

                            transport: {

                                read: "http://localhost:61309/EquipmentCatalogService/AssetMakes"

                            },

                            schema: {

                                model: {

                                    fields: {

                                        Id: { type: "number" }

                                    }

                                }

                            },

                            pageSize: 10,

                            serverPaging: true,

                            serverFiltering: true,

                            serverSorting: true

                        },

                        height: 250,

                        filterable: true,

                        sortable: true,

                        pageable: true,

                        columns: [{

                            field: "Id",

                            filterable: false

                        }

                        ]

                    });

                });

            </script>

        </div>

The grid runs and shows up in the Web page, yet no data shows.  Again, examining Fiddler, I see it does make a call to the Web service, but no data is being bound to the grid.

[Jon]

I just wanted to let everyone know that I was able to resolve the issue.  At it's root the problem was that my grid was set as the parent container div for a tab item, rather than being in a sub div for the content div.  I've included a small example below.

//This is BROKEN
<div id="myTabs">
<ul>
<li>My First Tab>
</ul>
<div id="myGrid">
</div>
</div>

//This works
<div id="myTabs">
<ul>
<li>My First Tab>
</ul>
<div>
    <div id="myGrid">
    </div>
</div>
</div>

[Brian Swiger]

Unlike Jon, I'm NOT using tabs...yet am utilizing the Remote Data demo code from the Grid.  I'm hoping to get assistance with this issue to move forward with Telerik and Kendo UI for future projects within my company.

[Brian Swiger]

So, I decided to try a LOCAL data source and copy the return I'm seeing from my Web service into a simple variable.  Doing so, it works just fine.  What does it take to get a REMOTE data source to work correctly, even though it is returning the SAME data as what I paste into my LOCAL variable?

My remote data source returns the same information that is placed in the VAR equipment, just more of the data, of course.

<div id="example" class="k-content">

            <div id="grid"></div>

            <script>

$(document).ready(function () {

var equipment = [{ "Description": "John Deere", "FclManufacturerKey": "9999", "Guid": "6d2d047d-5637-4801-984c-3bfcc3d57653", "Id": 1, "Type": 0 }];

var equipmentCatalogLocalDataSource = new kendo.data.DataSource({ data: equipment, pageSize: 50 });

 

                    var equipmentCatalogServiceBaseUrl = "http://localhost:61309/EquipmentCatalogService",

                        equipmentCatalogRemoteDataSource = new kendo.data.DataSource({

                            transport: {

                                read: {

                                    url: equipmentCatalogServiceBaseUrl + "/AssetMakes",

                                    dataType: "jsonp"

                                },

//                                update: {

//                                    url: equipmentCatalogServiceBaseUrl + "/AssetMakes/Update",

//                                    dataType: "jsonp"

//                                },

//                                destroy: {

//                                    url: equipmentCatalogServiceBaseUrl + "/AssetMakes/Delete",

//                                    dataType: "jsonp"

//                                },

//                                create: {

//                                    url: equipmentCatalogServiceBaseUrl + "/AssetMakes/Create",

//                                    dataType: "jsonp"

//                                },

                                parameterMap: function (options, operation) {

                                    if (operation !== "read" && options.models) {

                                        return { models: kendo.stringify(options.models) };

                                    }

                                }

                            },

                            batch: true,

                            pageSize: 30,

                            serverPaging: true,

                            serverFiltering: true,

                            serverSorting: true,

                            schema: {

                                model: {

                                    id: "Id",

                                    fields: {

                                        Id: { type: "number" }

                                    }

                                }

                            }

                        });

 

 

                    $("#grid").kendoGrid({

                        dataSource: equipmentCatalogLocalDataSource,

                        height: 600,

                        filterable: true,

                        sortable: true,

                        pageable: true,

                        navigatable: true,

                        columns: [

                            {

                            field: "Id",

                            filterable: false

                            },

                            {

                                field: "FclManufacturerKey"

                            },

                            {

                                field: "Guid"

                            },

                            {

                                field: "Type"

                            },

                            {

                                field: "Description"

                            }

                                ]

                    });

                });

            </script>

        </div>

[Brian Swiger]

So, enabling crossDomainScriptAccessEnabled and adding authentication mode to "None" worked for my REMOTE data source.

My concern now is, what if I do NEED authentication?  Is this a security vulnerability and enabling my site to scripting attacks?

<system.web>

    <compilation debug="true" targetFramework="4.0" />

    <authentication mode="None"/>

  </system.web>

<system.serviceModel>

    <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>

    <standardEndpoints>

      <webHttpEndpoint>

        <!--

            Configure the WCF REST service base address via the global.asax.cs file and the default endpoint

            via the attributes on the <standardEndpoint> element below

        -->

        <standardEndpoint name="" helpEnabled="true" automaticFormatSelectionEnabled="false" crossDomainScriptAccessEnabled="true"/>

      </webHttpEndpoint>

    </standardEndpoints>

  </system.serviceModel>

[Atanas Korchev]

Hello,

JSONP is not the same as JSON and the result should look something like this:

callback({ /* JSON response */})

Did your service return similar format? Here is a blog post showing how to enable JSONP responses in WCF.

We are not sure how authentication mode "None" would mitigate the cross domain issue. Are you sure that it is required in order to make it work? What response is returned when authentication is not disabled?

Regards,
Atanas Korchev
the Telerik team

[Brian Swiger]

The blog post you reference was interesting, yet I cannot get it to work.  It fails to load the custom binding and continues to fail, referencing the jsonpMessageEncoding:

<bindings>

<customBinding>

<binding name="jsonpBinding" >

<jsonpMessageEncoding />

I was pointed out by a colleague, the setting defaultOutgoingResponseFormat.  Setting the value to "Json" does allow the outgoing message to be formatted as Json, yet now the values are not being passed in the request.  Here is the JSON being sent now:

jQuery171021729715983383358_1326303869114({"Description":null,"DisplayForLeases":false,"DisplayForLoans":false,"FclManufacturerKey":null,"Id":0});

[Atanas Korchev]

Hi,

The Kendo DataSource expects an array of items in the JSON or JSONP response. Your response however does not contain any arrays - it is just a single object. Please try making your WCF service return an array.

Kind regards,
Atanas Korchev
the Telerik team