我有一个空div,我想使用来自Model..it的数据初始化为kendo网格,应该是类似以下内容,但我无法加载数据
$("#mapsDiv").kendoGrid({
sortable: true,
dataSource: {
transport: {
read:"/Home/About",
dataType: "odata"
},
pageSize: 5
},
pageable: true,
resizable: true,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell"
});
About.cshtml
@model List<KendoExample.Entities.ShortStudent>
<div class="row">
<div class="col-md-12 table-responsive" id="mapsDiv">
</div>
我的家庭控制器如下
List<ShortStudent> students = new List<ShortStudent>();
ShortStudent student1 = new ShortStudent();
student1.birthdate = new DateTime(1999, 4, 30);
student1.classname = "1B";
student1.firstname = "Fredie";
student1.surname = "Fletcher";
student1.studentid = 1;
ShortStudent student2 = new ShortStudent();
student2.birthdate = new DateTime(2010, 5, 4);
student2.classname = "1B";
student2.firstname = "Lee";
student2.surname = "Hobbs";
student2.studentid = 2;
students.Add(student1);
students.Add(student2);
return View(students);
我见过使用json但不是odata的例子......
此外,有一些例子可以像
一样使用它@(Html.Kendo().Scheduler<MeetingViewModel>()
.Name("scheduler")
.Editable(false)
.DataSource(ds => ds
.Custom()
.Batch(true)
.Schema(schema => schema
.Model(m =>
{
m.Id(f => f.MeetingID);
m.Field("title", typeof(string)).DefaultValue("No title").From("Title");
m.Field("start", typeof(DateTime)).From("Start");
m.Field("end", typeof(DateTime)).From("End");
m.Field("description", typeof(string)).From("Description");
m.Field("recurrenceID", typeof(int)).From("RecurrenceID");
m.Field("recurrenceRule", typeof(string)).From("RecurrenceRule");
m.Field("recurrenceException", typeof(string)).From("RecurrenceException");
m.Field("isAllDay", typeof(bool)).From("IsAllDay");
m.Field("startTimezone", typeof(string)).From("StartTimezone");
m.Field("endTimezone", typeof(string)).From("EndTimezone");
}))
.Transport(new {
//the ClientHandlerDescriptor is a special type that allows code rendering as-is (not as a string)
read = new Kendo.Mvc.ClientHandlerDescriptor() {HandlerName = "customRead" }
})
)
)
我无法理解/实施,所以请忽略这种解决方案。
目前我看到网格页脚显示(4852项中的1 - 2项),屏幕上没有任何标题或内容(数据行)。我做错了什么?
更新
var dataSource = new kendo.data.DataSource(
{
transport: {
read: {
url: '@Url.Action("About", "Home")',
contentType: "application/json",
dataType: "json"
}
},
schema: {
model: {
fields: {
firstname: { type: "string" },
surname: { type: "string" },
birthdate: { type: "date" },
classname: { type: "string" }
}
}
},
type: "json",
serverPaging: false,
serverFiltering: true,
serverSorting: false
}
);
$("#mapsDiv")
.kendoGrid(
{
sortable: true,
dataSource: {
transport: {
read: dataSource
},
pageSize: 2
},
pageable: true,
resizable: false,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell",
columns:[{
field: "firstname",
},{
field: "surname",
},{
field: "classname",
},{
field: "age",
}]
});
的HomeController
public ActionResult About()
{
....
return View(students);
}
现在带有标题的网格存在,但没有数据存在。 如果我将动作更改为json,它将返回页面上的普通json
public ActionResult About()
{
....
return Json(students, JsonRequestBehavior.AllowGet);
}
答案 0 :(得分:5)
您是否尝试过将字段添加到网格中?
$("#mapsDiv")
.kendoGrid(
{
sortable: true,
dataSource: {
transport: {
read:"/Home/About",
dataType: "odata"
},
pageSize: 5
},
columns: [
{
field: "classname",
title: "Class Name"
},
{
field: "firstname",
title: "First name"
},
{
field: "surname",
title: "Last name"
}
],
pageable: true,
resizable: true,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell"
});
答案 1 :(得分:1)
我只是访问telerik的演示。试试以下。希望能帮到我的朋友。或者,您可以访问此链接以参考更多信息:http://demos.telerik.com/kendo-ui/grid/remote-data-binding。
$("#mapsDiv")
.kendoGrid(
{
sortable: true,
dataSource: {
transport: {
read:"/Home/About",
dataType: "odata"
},
pageSize: 5
},
schema: {
model: {
fields: {
studentid: { type: "number" },
birthdate : { type: "date" },
classname : { type: "string" },
firstname : { type: "date" },
surname : { type: "string" }
}
}
},
pageable: true,
resizable: true,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell"
});
答案 2 :(得分:0)
所以这就是我发现应该直截了当的东西:)
var values = @Html.Raw(Json.Encode(@Model));
$("#MapDetails")
.kendoGrid(
{
sortable: true,
dataSource: {
data:values,
pageSize: 2
},
pageable: true,
resizable: false,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell",
columns:[{
field: "firstname",
},{
field: "surname",
},{
field: "classname",
},{
field
: "age",
}]
});