Initialize Child Grids Rendered in ClientTemplates by Using the DataBound Event

Updated on Jan 15, 2026

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.4.1217

Description

How can I correctly initialize child Grids that are rendered inside a ClientTemplate of a parent Telerik UI for ASP.NET MVC Grid?

When a Grid is rendered inside a ClientTemplate, its initialization script is emitted as a script block and is not executed automatically. As a result, the child Grid does not initialize unless the script is explicitly evaluated after the parent Grid finishes rendering.

Solution

You can achieve this requirement by evaluating the child Grid initialization scripts during the parent Grid DataBound event.

1. Define a parent Grid and render the child Grid inside a column ClientTemplate. Use a unique name for each child Grid instance.

   Razor

    @(Html.Kendo().Grid<TelerikMvcApp35.Models.OrderViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.OrderID).Filterable(false);
            columns.Bound(p => p.Freight);
            columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.ShipName).ClientTemplate(
                Html.Kendo().Grid<TelerikMvcApp35.Models.Test>()
                    .Name("components_#=OrderID#")
                    .Columns(col =>
                    {
                        col.Bound(c => c.TestId);
                        col.Bound(c => c.Name);
                        col.Bound(c => c.CustomText);
                    })
                    .HtmlAttributes(new { style = "width: 200px" })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(20)
                        .Read(read => read.Action("Test_Read", "Grid"))
                    )
                    .ToClientTemplate()
                    .ToHtmlString()
            );
            columns.Bound(p => p.ShipCity);
        })
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .HtmlAttributes(new { style = "height:550px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("Orders_Read", "Grid"))
        )
        .Events(e => e.DataBound("onDataBound"))
    )

2. Handle the parent Grid DataBound event and evaluate the script blocks that initialize the child Grids.

   Razor

    function onDataBound() {
        var grid = this;
   
        grid.table.find("tr").each(function () {
            $(this).find("script").each(function () {
                eval($(this).html());
            });
        });
    }

This approach ensures that each child Grid is initialized only after the corresponding parent row is rendered in the DOM.

Notes

• Always use unique names for child Grids to avoid widget conflicts.
• This approach is required only when rendering Grids inside ClientTemplate.
• The solution works correctly with paging, sorting, and filtering enabled.
• Use eval only for widget initialization scripts.

More ASP.NET MVC Grid Resources

• ASP.NET MVC Grid Documentation
• ASP.NET MVC Grid Demos
• ASP.NET MVC Grid Product Page
• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET MVC
• Server-Side API Reference of the Grid for ASP.NET MVC
• Telerik UI for ASP.NET MVC Knowledge Base