title: How to use data from Model to bind as kendo datasource
body: <p>i have an empty div that i want to initialize into a kendo grid using data from Model..it should be something like the following but i am unable to load data</p>
  
  <pre><code>$("#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"
  });
  </code></pre>
  
  <p><strong>About.cshtml</strong></p>
  
  <pre><code>@model List&lt;KendoExample.Entities.ShortStudent&gt;
  
  &lt;div class="row"&gt;
  &lt;div class="col-md-12 table-responsive" id="mapsDiv"&gt;        
  &lt;/div&gt;
  </code></pre>
  
  <p>My <strong>Home Controller</strong> is as follows</p>
  
  <pre><code>List&lt;ShortStudent&gt; students = new List&lt;ShortStudent&gt;();
  
  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);
  </code></pre>
  
  <p>I have seen examples using json but not odata...</p>
  
  <p>Also, there are examples to use it like  </p>
  
  <pre><code>@(Html.Kendo().Scheduler&lt;MeetingViewModel&gt;()
  .Name("scheduler")
  .Editable(false)
  .DataSource(ds =&gt; ds
      .Custom()
      .Batch(true)
      .Schema(schema =&gt; schema
          .Model(m =&gt;
          {
              m.Id(f =&gt; 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" }
      })
  )
  )
  </code></pre>
  
  <p>which i am unable to understand/implement so please ignore this kind of a solution. </p>
  
  <p>Currently i see a grid footer that says (1 - 2 of 4852 items) without any header or content(datarows) on my screen. What am I doing wrong?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <pre><code>  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",
          }]
      });
  </code></pre>
  
  <p><strong>HomeController</strong></p>
  
  <pre><code> public ActionResult About()
      {
     ....
       return View(students);
   }
  </code></pre>
  
  <p>Now the grid with header is there but no data is present..
  If i change action to json, it returns plain json on the page </p>
  
  <pre><code>public ActionResult About()
      {
     ....
       return Json(students, JsonRequestBehavior.AllowGet);
   }
  </code></pre>