Templates do not work for the third-level grid.

3 posts, 1 answers
  1. Wojciech
    Wojciech avatar
    2 posts
    Member since:
    Jul 2013

    Posted 29 Oct 2014 Link to this post

    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!





  2. Answer
    Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 31 Oct 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Wojciech
    Wojciech avatar
    2 posts
    Member since:
    Jul 2013

    Posted 04 Nov 2014 in reply to Rosen Link to this post

    Hello Rosen,

    Thank you very much, it works like a charm!

    Have a good day.
Back to Top