Как использовать данные из модели для привязки в качестве источника данных kendo
У меня есть пустой div, который я хочу инициализировать в сетку кэндо, используя данные из Model..it должно быть что-то вроде следующего, но я не могу загрузить данные
$("#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"
});
Примерно.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" }
})
)
)
Которые я не могу понять / реализовать, поэтому, Пожалуйста, игнорируйте этот вид решения.
В настоящее время я вижу нижний колонтитул сетки, который говорит (1 - 2 из 4852 элементов) без какого-либо заголовка или содержимого(datarows) на моем экране. Что я делаю не так?
Обновить
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);
}
3 ответа:
Вы пробовали добавлять поля в сетку?
$("#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" });
Я только что посетил демонстрацию телерика. Попробуйте следовать. Надеюсь помочь, мой друг. Или вы можете перейти по этой ссылке, чтобы узнать больше: 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" });
Итак, вот что я нашел, что должно было быть прямо вперед :)
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", }] });