detail template bind to dynamic data

3 posts, 0 answers
  1. Ziming
    Ziming avatar
    9 posts
    Member since:
    Mar 2015

    Posted 29 Mar 2015 Link to this post

    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>
  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 01 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. Ziming
    Ziming avatar
    9 posts
    Member since:
    Mar 2015

    Posted 01 Apr 2015 in reply to Nikolay Rusev Link to this post

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