the client detail template in kendo UI is not working - asp.net-mvc

Question

i have a kendo grid in an asp .net MVC application. Im following the demos on the kendoui website to build a detail template on my grid. I couldnt make it work. Here's my code.
#(Html.Kendo().Grid<KendoUIMvcApplication2.Models.GetCallDetailResult>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.contactCommunicationCallID).Title("CCCID").Width("20");
columns.Bound(p => p.LocalStartDateTime).Title("Date Time").Format("{0:M/d/yyyy}");
columns.Bound(p => p.LPEmployeeCode).Title("Employee Code").Width("50");
columns.Bound(p => p.AdSource).Title("Ad Source");
columns.Bound(p => p.Status);
columns.Bound(p => p.Duration).Title("Duration");
columns.Bound(p => p.TrackingPhoneNumber).Title("Tracking Number");
columns.Bound(p => p.CallerNumber).Title("Caller Number");
columns.Bound(p => p.RegionName).Title("Region Name");
columns.Bound(p => p.DistrictName).Title("District Name");
columns.Bound(p => p.CampaignName).Title("Campaign Name");
columns.Bound(p => p.AdSourceCategoryName).Title("Ad Source Category");
})
.Pageable(page => page.Enabled(true).PageSizes(new Int32[] { 5, 10, 20, 40 }))
.Sortable()
.HtmlAttributes(new { style = "height: 700px" })
.Scrollable()
.ClientDetailTemplateId("template")
.DataSource(datasource => datasource
.Ajax()
.PageSize(5)
.Read(read => read.Action("CallDetail", "Home"))
)
.Events(ev => ev.DataBound("dataBound"))
)
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("tabStrip_#=contactCommunicationCallID#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Details").Content(#<text>
#(Html.Kendo().Grid<KendoUIMvcApplication2.Models.GetCallDetailResult>()
.Name("grid_#=contactCommunicationCallID#")
.Columns(columns =>
{
columns.Bound(p => p.contactCommunicationCallID).Title("ID").Width(56);
columns.Bound(p => p.SiteName).Width(110);
columns.Bound(p => p.LPFirstName);
columns.Bound(p => p.LPLastName).Width(190);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("ReportList", "Home", new { CCCID = "#=contactCommunicationCallID#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</text>
);
items.Add().Text("Contact Information").Content(
"<div class='employee-details'>" +
"<ul>" +
"<li><label>Country:</label>#= contactCommunicationCallID #</li>" +
"<li><label>City:</label>#= SiteName #</li>" +
"<li><label>Address:</label>#= LPFirstName #</li>" +
"<li><label>Home Phone:</label>#= LPLastName #</li>" +
"</ul>" +
"</div>"
);
})
.ToClientTemplate())
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>
Controller Action Methods:
public ActionResult CallDetail([DataSourceRequest] DataSourceRequest request)
{
var readcalldetails = new DataDataContext().GetCallDetail(1, 762, 1).ToList();
var result = readcalldetails.ToDataSourceResult(request);
return Json(result);
}
public ActionResult ReportList(int CCCID, [DataSourceRequest] DataSourceRequest request)
{
var readreportlist = new DataDataContext().GetCallDetail(1, 762, 1).ToList().Where(cd => cd.contactCommunicationCallID == CCCID);
var result = readreportlist.ToDataSourceResult(request);
return Json(result);
//.Where(cd => cd.ContactCommunicationCallID == CCCID)
}

Answer 1

Actually, I found out by trial and error that the only thing you need to remove from your web.config is the targetFramework="xx" portion from the httpRuntime - you can keep the encoderType portion!