detail template bind to dynamic data

[Ziming]

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: "[e-mail]"};
        $(".employee-details").html(javascriptTemplate(javascriptData));
    }
</script>

[Nikolay Rusev]

Hello Ziming,

The template will be automatically bound with the data item from the Grid. That said the grid item should have all three fields from the template - Name, Email, Telephone, otherwise the error will be triggered.

Regards,
Nikolay Rusev
Telerik

 

 

[Ziming]

Thank you for your reply Nikolay, I use jQuery to populate the ul and it works fine :)