or
VIEW:
@section ViewModel
{
<
script
type
=
"text/javascript"
>
$(function () {
var a = kendo.observable({
theList: new kendo.data.DataSource({
transport: {
read: "/home/zaza",
dataType: "json",
type: "POST"
},
schema: {
model: {
id: "ID",
fields: {
ID: {
editable: false,
nullable: false
},
Name: {
editable: true,
nullable: true
}
}
}
}
})
});
kendo.bind($("#container"), a);
});
</
script
>
}
<
h2
>@ViewBag.Message</
h2
>
<
div
id
=
"container"
>
<
ul
data-role
=
"listview"
data-template
=
"ul-template"
data-bind
=
"source: theList"
>
</
ul
>
</
div
>
<
script
id
=
"ul-template"
type
=
"text/x-kendo-template"
>
<
li
>
id: <
span
data-bind
=
"text: ID"
></
span
>
name: <
span
data-bind
=
"text: Name"
></
span
>
</
li
>
</
script
>
HOME - CONTROLLER:
public class Place
{
public int ID { get; set; }
public string Name { get; set; }
}
[HttpPost]
public JsonResult zaza()
{
List<
Place
> plases = new List<
Place
>();
plases.Add(new Place() { ID = 0, Name = "Larocque" });
plases.Add(new Place() { ID = 1, Name = "St-Louis" });
plases.Add(new Place() { ID = 2, Name = "Dorval" });
plases.Add(new Place() { ID = 3, Name = "St-Pierre" });
return Json(plases, JsonRequestBehavior.DenyGet);
}
kendo.bind($("#view"), viewModel);)
The grid kendo.Data.DataSource is defined as:
var gridDataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: "@Url.Content(dynDataSource.Url)",
contentType: "application/json; charset=utf-8",
type: "GET",
dataType: "json"
}
},
pageSize: @Model.MaxPageSize,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
filter: ...
}