AJAX dataSource not working

[Mythox]

This is my code in c#:
public JsonResult SearchRolResults()
        {
            var rol = new Rol { Name = "RolAjax", Domain = "WAF", Id = 123456789 };
            return this.Json(rol);
        }

My code in JS adn HTML:

<ul id="add_window_listview"></ul>

$("#add_window_listview").kendoListView({
        dataSource: {
            transport: {
                read: {
                    url: "/Person/SearchRolResults",
                    type: "GET",
                    dataType: "json",
                    contentType: 'application/json; charset=utf-8'
                }
            }
        },
        template: "<li>${Name} (${Domain})</li>"
    });

The C# ActionMethod is called but the listview not populate !!
How i can debug this scenario??
How i can view the dataSource in debug mode?? (I use chrome now)

Thanks.

[Nohinn]

Not sure, but maybe you have the issue about not having the get method allowed for json.
You can look at it with a debugger like firebug, or the native one in chrome, etc. looking at the network traffic.

return Json(yourdata, JsonRequestBehavior.AllowGet);

[Mythox]

Hello Nohinn:

Thanks for you replie, you are in correct. 

I modify the c# action method to:
public JsonResult SearchRolResults()
{
     var rol = new Rol { Name = "RolAjax", Domain = "WAF", Id = 123456789 };
     return this.Json(rol, JsonRequestBehavior.AllowGet);
}

But for now, not working yet.

I attach a screenshot of chrome showing the network trafic tab. All apear ok, but treeview not populate. In the "Response" tab i get this text:
{"Name":"RolAjax","Domain":"WAF","Id":123456789}

 ¿Where i can obtain more debug info?

I modified my JS too:

$("#add_window_listview").kendoListView({
        dataSource: {
            transport: {
                read: {
                    url: "/Person/SearchRolResults",
                    type: "GET",
                    dataType: "json",
                    contentType: 'application/json; charset=utf-8'
                }
            }
        },
        //dataSource: {
        //    data: [
        //        { Name: "Rol1", Domain: "WAF", Id: "123456" },
        //        { Name: "Rol2", Domain: "Telefónica", Id: "1234356" }
        //    ]
        //},
        template: "<li>${Name} (${Domain})</li>",
        change: function () {
            alert("CHANGE")
        },
        dataBound: function () {
            alert("BOUND")
        }
    });

With declarative dataSource the treeView is populated as well.
When page load the event dataBound is raised correctly.

¿Any idea?

Thanks.

[Nohinn]

Your js code should look like this:

$("#add_window_listview").kendoListView({

        dataSource: {

            transport: {

                read: {

                    url: "/Person/SearchRolResults",

                    type: "GET",

                    dataType: "json",

                    contentType: 'application/json; charset=utf-8'

                }

            }

        },

        template: kendo.template("<li>${Name} (${Domain})</li>"),

        change: function () {

            alert("CHANGE")

        },

        dataBound: function () {

            alert("BOUND")

        }

    });

And in your server method you should return a list of rols, though it only has one item. Don't send the class object, send a list of objects.

public JsonResult SearchRolResults()

{

     var list = new List<Rol>();

     var rol = new Rol { Name = "RolAjax", Domain = "WAF", Id = 123456789 };

     list.Add(rol);

     return this.Json(list, JsonRequestBehavior.AllowGet);

}

[Mythox]

Thanks a lot, now is working ...

:P