I am very new to Kendo and MVC4. I got the piece where I display the data on a Kendo Grid on my webpage. 
On a single page, I have enabled only 10 items (rows) to be displayed. But when I click on the number "2", the page fantastically fails.
I understand that I am missing some piece of code on the controller side. But due to my lack of knowledge about MVC4, I dont know what to add at what place. Below is the View:
@model IEnumerable<MVC4Trial.Models.vwCallDetail>
@{
ViewBag.Title = "Index";
}
<h2>Call Detail View</h2>
@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.CCCID).Width(50).Title("CCCID");
columns.Bound(p => p.Mp3_Url).Width(50).Title("MP3 URL");
columns.Bound(p => p.Target_Number).Width(50).Title("Target Number");
columns.Bound(p => p.Duration).Width(50);
columns.Bound(p => p.Index).Width(50);
columns.Bound(p => p.LocalTime).Width(50);
columns.Bound(p => p.Site_Name___Address).Width(50).Title("Site Address");
columns.Bound(p => p.Ad_Source_Name).Width(50).Title("Ad Source Name");
columns.Bound(p => p.Tracking_Number).Width(50).Title("Tracking Number");
columns.Bound(p => p.Caller_Number).Width(50).Title("Caller");
columns.Bound(p => p.Available_Feature).Width(50).Title("Features");
})
.Pageable(page => page.Enabled(true).PageSizes(new Int32[] {10, 20, 30, 40}))
.Sortable(sorting => sorting.SortMode(Kendo.Mvc.UI.GridSortMode.SingleColumn))
.Scrollable()
.Filterable()
.DataSource(datasource => datasource
.Ajax()
.Read(read => read.Action("vwCallDetail", "Grid"))
)
.Resizable(resize =>resize.Columns(true))
.Reorderable(reordering => reordering.Columns(true))
)
Below is the controller code
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC4Trial.Models;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
namespace MVC4Trial.Controllers
{
public class CallTrackController : Controller
{
private CallTrackEntities db = new CallTrackEntities();
//
// GET: /CallTrack/
public ActionResult Index()
{
return View(db.vwCallDetails.ToList());
}
public ActionResult vwCallDetails([DataSourceRequest] DataSourceRequest request)
{
return Json(GetCallDetails().ToDataSourceResult(request));
}
private static IEnumerable<vwCallDetail> GetCallDetails()
{
var callDetails = new CallTrackEntities();
return callDetails.vwCallDetails.Select(vwCallDetail => new vwCallDetail
{
CCCID = vwCallDetail.CCCID,
Mp3_Url = vwCallDetail.Mp3_Url,
Index = vwCallDetail.Index,
Target_Number = vwCallDetail.Target_Number,
Duration = vwCallDetail.Duration,
LocalTime = vwCallDetail.LocalTime,
Site_Name___Address = vwCallDetail.Site_Name___Address,
Ad_Source_Name = vwCallDetail.Ad_Source_Name,
Tracking_Number = vwCallDetail.Tracking_Number,
Caller_Number = vwCallDetail.Caller_Number,
Available_Feature = vwCallDetail.Available_Feature
});
}
public ActionResult Details(int id = 0)
{
vwCallDetail vwcalldetail = db.vwCallDetails.Find(id);
if (vwcalldetail == null)
{
return HttpNotFound();
}
return View(vwcalldetail);
}
//
// GET: /CallTrack/Create
public ActionResult Create()
{
return View();
}
//
// POST: /CallTrack/Create
[HttpPost]
public ActionResult Create(vwCallDetail vwcalldetail)
{
if (ModelState.IsValid)
{
db.vwCallDetails.Add(vwcalldetail);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(vwcalldetail);
}
//
// GET: /CallTrack/Edit/5
public ActionResult Edit(int id = 0)
{
vwCallDetail vwcalldetail = db.vwCallDetails.Find(id);
if (vwcalldetail == null)
{
return HttpNotFound();
}
return View(vwcalldetail);
}
//
// POST: /CallTrack/Edit/5
[HttpPost]
public ActionResult Edit(vwCallDetail vwcalldetail)
{
if (ModelState.IsValid)
{
db.Entry(vwcalldetail).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(vwcalldetail);
}
//
// GET: /CallTrack/Delete/5
public ActionResult Delete(int id = 0)
{
vwCallDetail vwcalldetail = db.vwCallDetails.Find(id);
if (vwcalldetail == null)
{
return HttpNotFound();
}
return View(vwcalldetail);
}
//
// POST: /CallTrack/Delete/5
[HttpPost, ActionName("Delete")]
public ActionResult DeleteConfirmed(int id)
{
vwCallDetail vwcalldetail = db.vwCallDetails.Find(id);
db.vwCallDetails.Remove(vwcalldetail);
db.SaveChanges();
return RedirectToAction("Index");
}
protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
}
}
Below is the _Layout.cshtml file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - Kendo UI Sample</title>
<link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")">
<link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.min.css")">
<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>
<link href="@Url.Content("~/Content/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo.dataviz.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-right">
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
</footer>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
Now what changes do I need to make to the View/Model/Controller to make this thing work? Please forgive me if I have omitted any details. Thanks for your help.