I am using kendo grid with detail template, when the detail template binds to the existing grid row, everything works fine. Now I try to use javascript to add dynamic data and bind to the template, I receive javascript error "Email is not defined". It looks like the template's context is set to the current grid, how can i change it to bind to dynamic data, below is my code
@(Html.Kendo().Grid(Model.Customers)
.Name("GridCustomers")
.Columns(columns =>
{
columns.Bound(p => p.ID).Title("ID");
columns.Bound(p => p.Name).Title("Name");
columns.Bound(p => p.Telephone).Title("Telephone");
columns.Bound(p => p.Extension).Title("Extension");
columns.Bound(p => p.Group).Title("Group");
})
.HtmlAttributes(new { style = "height: 430px;" })
.Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5))
.Sortable()
.Scrollable()
.ClientDetailTemplateId("template1")
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
)
.Events(events => events.DetailExpand("onDetailExpand"))
)
<script id="template1" type="text/html">
<div class='employee-details'>
Contact Details:
<ul>
<li><label>Name:</label>#= Name #</li>
<li><label>Mobile:</label>#= Telephone #</li>
<li><label>E-mail Address:</label>#= Email #</li>
</ul>
</div>
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
function onDetailExpand() {
var javascriptTemplate = kendo.template($("#template1").html());
var javascriptData = {FirstName: "Ziming", Telephone: "12345678", Email: "abc@abc.com"};
$(".employee-details").html(javascriptTemplate(javascriptData));
}
</script>