Unable to load JSON without resorting to a workaround

[Dennis]

I'm unable to load any data from my server into a grid that I'm trying to setup for simple paging without resorting to using the solution posted in the  Kendo Grid Forum that uses a jquery ajax request to directly populate the "data" member directly of the kendo.data.DataSource.  I am returning a simple json response that contains an array and a count to support paging (for example):

{"artists":[{"ID":4471,"Name":"10

Years","Gender":"Male","Category":"Pop/Rock"},{"ID":4391,"Name":"10,000

Maniacs","Gender":"Female","Category":"Pop/Rock"},{"ID":15,"Name":"10cc","Gender":"Male","Category":"Pop/Rock"},"count":2004}

This is my 1st cut at a datasource, and I've verified the server gets called and returns the json as above, but nothing displays in the grid:

var artistSource = new kendo.data.DataSource({

    transport: {

        read: {

            url: "http://localhost:53596/api/Artists?format=json",

            dataType: "jsonp"

        },

        schema: {

            data: "artists",

            total: "count",

            model: {

                fields: {

                    ID: { type: "number"},

                    Name: { type: "string"},

                    Gender: { type: "string"},

                    Category: { type: "string"}

                }

            }

        },

        page: 1,

        pageSize: 50,

        serverPaging: true,

        serverFiltering: true,

        serverSorting: true

    }

});

Following the workaround above, this datasource below works.  From what I can tell, I'm following the examples, but I'm not able to get the datasource populated properly, and I'd really appreciate any help!

// This is the ajax call that is used to populate the data

// member in the dataSource as described in the workaround in the forums:

function GetArtists() {

    var _resData;

 

    $.ajax({

        type: 'GET',

        url: 'http://localhost:53596/api/Artists?format=json',

        dataType: 'json',

        success: function (data) {

            _resData = data.artists;

        },

        data: {},

        async: false

    });

 

    return _resData;

}

 

// This datasource populates the data array via a jquery ajax call,

// bypassing the configuration as done in the original datasource.

var artistSource2 = new kendo.data.DataSource({

    data: GetArtists(),

    schema: {

        model: {

            fields: { ID: { type: "number" }, Name: { type: "string" }, Gender: { type: "string" }, Category: { type: "string" }

            }

        }

    }

 });

 

 // If I use artistSource2 (the workaround), the grid gets populated,

 // but if I use artistSource, nothing shows up in the grid.

 $('#Artists').kendoGrid({

     dataSource: artistSource2,

     height: 600,

     columns: [{ field: "ID" }, { field: "Name" }, { field: "Gender" }, { field: "Category"}],

     pageable: true

 });


[Atanas Korchev]

Hi,

 Your service seems to return valid JSON. Yet you have specified in your data source that it returns jsonp. I think this is the problem. Change the dataType to "json".

Regards,
Atanas Korchev
the Telerik team

[Dennis]

Atanas - thank you for your prompt reply.  If I specify dataType as "json" and not "jsonp", my service doesn't get called.  I'm not sure what to do?  I'm using asp.net MVC with ServiceStack, if that is of any help.  Why would the call succeed with the type being "jsonp" and not "json"?  I can see that the payload is recieved (with dataType: "jsonp") in Fiddler, but nothing for JSON.
Any help is appreciated.

Thanks, Dennis

[Atanas Korchev]

Hello,

The datasource transport.read configuration gets sent' to $.ajax as it is. So the following:

transport: {
     read: {
            url: "http://localhost:53596/api/Artists?format=json",
            dataType: "json"
    }
}

is later executed as 

$.ajax( {
     url: "http://localhost:53596/api/Artists?format=json",
     dataType: "json"
});

You can try adding the rest of the options (sans success).

On a side note there is quite a big difference between JSON and JSONP. The response format is similar but not the same.

Regards,

Atanas Korchev
the Telerik team

[Dennis]

Atanas - thanks for your suggestion, but the ajax call somehow isn't making it's way unless I use dataType: "jsonp".  I've published a test page here if you're willing to look at it.  The service api is here.

Thanks again for your help.

[Atanas Korchev]

Hi,

 I think I know what the problem is. The schema is not defined at the proper place. It should not be inside the transport. Here is how the updated code should look like:

var artistSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://www.letsdokaraoke.com/api/Artists?format=json",

            dataType: "json",
            async: false
        },
    },
    schema: {
        data: "artists",
        total: "count",
        model: {
            fields: {
                ID: { type: "number" },
                Name: { type: "string" },
                Gender: { type: "string" },
                Category: { type: "string" }
            }
        }
    },
    page: 1,
    pageSize: 50,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true
});

Regards,
Atanas Korchev
the Telerik team

[Dennis]

Atanas - thanks for your help and patience.  I owe you a beer!
By the way, l found that with your change, it works when I specify dataType: "jsonp" when running with both the development server as well as when deployed, so I'm going to stick with that.

Thanks again for the great support, and the page looks very nice and is extremely responsive.

Dennis

One thing I think would have really helped me is some sort of intellisense.

[Bahar]

hi Dennis,
I use your Code to populate My grid,but No data show in Kendo grid,
con you plz help me why?
<div id="example" class="k-content">
            <div id="Artists"></div>
    <script>
       
        function GetArtists() {
            var _resData;
       $.ajax({
             type: 'GET',
             url: 'http://www.letsdokaraoke.com/api/Artists?format=json',
             dataType: 'json',
             success: function(data) {
             _resData = data.artists;
             },
             data: {},
             async: false
        });

         return _resData;
     }
     
     
var artistSource2 = new kendo.data.DataSource({
    data: GetArtists(),
    schema: {
        model: {
        fields: { ID: { type: "number" },
        Name: { type: "string" },
        Gender: { type: "string" },
        Category: { type: "string" }
            }
        }
    }
});

 $("#Artists").kendoGrid({

        dataSource: artistSource2,
    
            height: 600,
           scrollable: true,
            sortable: true,
            filterable: false,
            pageable: true,
            columns: [
       { field: "ID" },
       { field: "Name" },
       { field: "Gender" },
       { field: "Category"}],
    pageable: true

});
 </script>

 
</div>
pLz help me as soon as posible,thanks alot,

[Dennis]

Bahar - I have since cleaned up that demo page a bit...  Maybe you can try again?

[Bahar]

thank you for quick Reply,
I try this again,but i have that problem again,no data show in grid!