kendo UI网格数据源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" }
   }
 }
}