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;
                }

Marek Karbarz · Accepted Answer · 2012-09-06 22:55:59Z

5

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);
                }
            });
        }
     }
}

edited Sep 6, 2012 at 22:55

answered Sep 6, 2012 at 22:01

Marek Karbarz

29.4k6 gold badges55 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Scott Selby Over a year ago

I had it like that, the problem is when I use url: ".." and connect to a webmethod it is not calling my webmethod - it is returning the entire aspx page , like the kendo grid doesn't know how to make ajax call - all it does it request the aspx page - weird , never seen anything like that before

Scott Selby Over a year ago

I could , but I am positive its returning the sample I provided

Scott Selby Over a year ago

posted code , see how I had to make the ajax call in another function ? because putting that in url was not working

Marek Karbarz Over a year ago

See if using the code like my example would work. This basically works exactly like your previous JS function, but in the success handler you're letting Kendo know that the data is ready. Note that I removed your schema definition as well since I'm already returing the d portion in t he success handler.

Scott Selby Over a year ago

sorry I didnt get back sooner , this is still not working , the grid is showing up with no data in it , in firebug I see the requeset to GetEvents and the successfull response - i have no idea whats going on

Travis J · Accepted Answer · 2012-09-06 22:02:40Z

0

Perhaps change your schema defintion:

from this

schema: {
 data: "d"
}

to this

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

answered Sep 6, 2012 at 22:02

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

Collectives™ on Stack Overflow

kendo UI grid datasource asp webforms

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related