ASP.NET MVC: Telerik Kendo UI Grid – templates do not work for the third-level grid

ASP.NET MVC: Telerik Kendo UI Grid – templates do not work for the third-level gridThis is short article that  shows how to properly read data inside custom template for the nested grid, please, take a look on the my code:

next example workspretty nice:

 

 

 

 

 

@*FIRST GRID*@
@(Html.Kendo().Grid<MyAmazingModel>()
        .Name("FirstGrid")
        .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(someValue)
                    .ServerOperation(true)
                    .Read(read => read.Action("ControllerAction", "ControllerName", new { Area = "AreaName" }).Data("method"))
                 )
        .Columns(columns =>
        {
            columns.Bound(x => x.MyProperty);
        })
        .Sortable()
        .Scrollable(x => x.Height("auto"))
        .Resizable(x => x.Columns(true))
        .Navigatable()
        .ClientDetailTemplateId("first-nested-grid")
      )

@*SECOND GRID*@
<script id="first-nested-grid" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<MyAmazingModel2>()
          .Name("SecondGrid_#=ID#")
          .DataSource(dataSource => dataSource
              .Ajax()
              .ServerOperation(true)
              .Read(read => read.Action("ControllerAction2", "ControllerName", new { Area = "AreaName" }).Data("method"))
          )
          .Columns(columns =>
          {
              columns.Bound(x => x.MyProperty);
          })
          .Sortable()
          .Scrollable(x => x.Height("auto"))
          .Resizable(x => x.Columns(true))
          .Navigatable()
          .ClientDetailTemplateId("second-nested-grid")
          .ToClientTemplate()
          )
</script>

@*THIRD GRID*@
<script id="second-nested-grid" type="text/kendo-tmpl">    
    @(Html.Kendo().Grid<MyAmazingModel3>()
          .Name("ThirdGrid_#=ID#")
          .DataSource(dataSource => dataSource
              .Ajax()
              .ServerOperation(true)
              .Read(read => read.Action("ControllerAction3", "ControllerName", new { Area = "AreaName" }).Data("method")))
                  .Columns(columns =>
                  {
                      columns.Bound(x => x.MyProperty);              
                  })
          .Resizable(x => x.Columns(true))
          .Navigatable()
          .ToClientTemplate()
          )          
</script>

But…. if I add template for the last-level grid, I cannot read data from the properties of “MyAmazingModel3″ model inside template of “ThirdGrid”… it sounds odd, but inside “ThirdGrid” i see data from “SecondGrid”.

So, in order column ClientTemplate of the child grid to be executed in the correct context (its dataItem) the code expression should be escaped. Otherwise, the code expression will be executed as part of the outer template, in which the Grid itself is defined. For example:

@*THIRD GRID*@
<script id="second-nested-grid" type="text/kendo-tmpl">   
    @(Html.Kendo().Grid<MyAmazingModel3>()
          .Name("ThirdGrid_#=ID#") <-- this is evaluated as part of the second-nested-grid template, thus when the grid is created
          .DataSource(dataSource => dataSource
              .Ajax()
              .ServerOperation(true)
              .Read(read => read.Action("ControllerAction3", "ControllerName", new { Area = "AreaName"}).Data("method")))
                  .Columns(columns =>
                  {
                      columns.Bound(x => x.MyProperty).ClientTemplate("\\#=MyProperty\\#"); <-- this should be evaluated when the column is rendered.             
                  })
          .Resizable(x => x.Columns(true))
          .Navigatable()
          .ToClientTemplate()
          )         
</script>

Have a good coding!