如何使用数据从模型绑定为剑道数据源

Question

我有一个空的div，我想初始化成使用来自Model..Data的数据的剑道网格应该是类似于以下内容，但我无法加载数据

$("#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）。我究竟做错了什么？

UPDATE

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

Answer 1

因此，这里是我发现什么应该是简单的:)

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", 
     }] 

    }); 

Answer 2

我刚访问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" 

    }); 

Answer 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" 

});