Jak używać danych z modelu do wiązania jako źródła danych kendo

Question

Mam pusty div, który chcę zainicjować w siatce kendo, używając danych z Modelu..it powinien być podobny do następującego, ale nie mogę załadować danych

$("#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> 

Moja Home Controller jest następujący

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

Widziałem przykłady pomocą JSON, ale nie OData ...

Ponadto, istnieją przykłady, aby używać go jak

@(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" } 
    }) 
) 
) 

których nie jestem w stanie zrozumieć/wdrożyć więc proszę ignorować tego rodzaju rozwiązanie.

Obecnie widzę stopkę siatki, która mówi (1 - 2 z 4852 pozycji) bez nagłówka lub zawartości (datariów) na moim ekranie. Co ja robię źle?

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

Teraz siatka z nagłówka jest tam, ale nie dane jest obecny .. Jeśli zmienić działanie na json, zwraca zwykły JSON na stronie

public ActionResult About() 
    { 
    .... 
    return Json(students, JsonRequestBehavior.AllowGet); 
} 

Answer 1

Więc oto co znalazłem to, co powinno być proste :)

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

Po prostu odwiedzam demo telerik. Spróbuj wykonać. Mam nadzieję, że mi pomogę, przyjacielu. Możesz też odwiedzić ten link, aby uzyskać więcej informacji: 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

Czy próbowałeś dodać pola do siatki?

$("#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" 

});