kendo UI grid datasource asp webforms

Question

So I followed the example that Kendo Provides to use an external Data Source , for some reason when you put a URL of Default.aspx/GetEvents (Where GetEvents is a webmethod in Default.aspx) it returns the entire HTML of Default.aspx instead of just calling the webmethod in a normal AJAX call.

So I found a way around that and I use the local data source method , which calls a javascript function - this javascript function does its own ajax call to my webmethod in default.aspx and gets a successfull response

so here is my code

 $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        data: createRandomData(),
                        schema: {
                            data: "d"
                        },
                        pageSize: 10
                    },
                    height: 250,
                    scrollable: true,
                    sortable: true,
                    filterable: true,
                    pageable: {
                        input: true,
                        numeric: false
                    },
                    columns: [
                        {
                            field: "Title",
                            title: "Title",
                            width: 100
                        },
                        {
                            field: "StartDate",
                            title: "StartDate",
                            width: 100
                        },
                        {
                            field: "Keywords",
                            width: 100
                        }
                    ]
                });
            });

Here is the begining of what createRandomData() is returning - it's valid json - I just don't want to paste it all and make this question un-readable

"d" : [
{
    "Title": "Chicago BlackHawks vs. Detroit Redwings",
    "StartDate": "9/7/2012 12:00:00 AM",
    "Keywords": "-- Select --"
},
{
    "Title": "",
    "StartDate": "1/1/1900 12:00:00 AM",
    "Keywords": "-- Select --"
}, .......

I see no reason why this would not be working , right now the grid just says "loading..." and stays like that for ever , no console errors

                    function createRandomData() {
                    $.ajax({
                        type: "POST",
                        url: "MyEvents.aspx/GetEvents",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {                                
                            var rs = msg;
                            return rs;
                        }
                    });
                    return false;
                }

Answer 1

The likely problem is that KendoUI expects a simple javascript call (without AJAX) when using the data element. When you call the JS method it returns right away, but AJAX call takes a little bit longer to finish, but Kendo grid never gets notified when the call is done.

What you could try instead is using the transport.read object on the dataSource here. This way the grid should work fine with the AJAX call.

EDIT: Have you tried something like this:

dataSource: {
    transport: {
        read: function(options) {
            $.ajax({
                type: "POST",
                url: "MyEvents.aspx/GetEvents",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {                                
                    options.success(msg.d);
                }
            });
        }
     }
}

Answer 2

Perhaps change your schema defintion:

from this

schema: {
 data: "d"
}

to this

schema: {
 model: {
  fields: {
    Title: { type: "string" },
    StartDate: { type: "string" },
    Keywords: { type: "string" }
   }
 }
}