Templates do not work for the third-level grid.

[Wojciech]

Hi all,

I am trying to add custom template for the nested grid, please, take a look on the my code:

next example works pretty 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".

Probably i skipped something in the documentation or i have to pass model from parent grid to child one?

Please advise.

Thanks in advance!

[Rosen]

Hi Wojciech,

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>

Regards,
Rosen
Telerik

 

 

[Wojciech]

Hello Rosen,

Thank you very much, it works like a charm!

Have a good day.