Client Template not defined error when contained in ClientDetailTemplate

Question

I'm using a Kendo Grid that will contain a ClientDetailTemplate which contains another Grid. The inner (child) grid contains a column that uses a ClientTemplate.

The ClientTemplate contains a Kendo DropDownList.

The problem is that the ClientTemplate (the dropdown list) is not being recognized - I get a "not defined" error, so the detail area fails to display.

However, if I pull the inner grid out from the parent grid's detail area and place the child grid into it's own div (separate from the parent grid), then it works perfectly. So there's some problem about having a grid with a column client template contained within a parent grid's client detail template that causes it to fail.

Here is what the parent grid looks like:

<div class="row">
@(Html.Kendo().Grid<Rep.Models.BuildingViewModel>()

                  .Name("BuildingValidationGrid")
                  .Columns(columns =>
                  {
                      columns.Bound(b => b.BuildingName);
                      columns.Bound(b => b.Region);
                      columns.Bound(b => b.City);
                      columns.Bound(b => b.Country);
                      columns.Bound(b => b.BuildingStatus);
                      columns.Bound(b => b.DateLastUploaded).Format("{0:dd-MMM-yyyy}");
                  })
                  .HtmlAttributes(new { style = "height: 500px;" })
                  .Sortable()
                  .Scrollable()
                  .Groupable()
                  .ColumnMenu()
                  .Selectable()
                  .Resizable(resize => resize.Columns(true))
                  .ClientDetailTemplateId("plan_client_template")
                  .Pageable(pageable => pageable
                      .Refresh(true)
                      .PageSizes(true)
                      .ButtonCount(5))
                    .Filterable(filterable => filterable
                        .Extra(false)
                        .Operators(operators => operators
                            .ForString(str => str.Clear()
                                .StartsWith("Starts with")
                                .IsEqualTo("Is equal to")
                                .IsNotEqualTo("Is not equal to")
                            ))
                        )
                  .Events(events => events.Change("onChange"))
                  .DataSource(datasource => datasource
                      .Ajax()
                          .Read(read => read.Action("BuildingsForValidation_Read", "Plan"))
                      .PageSize(100)
                      .ServerOperation(true)

                  )
)

Note the client detail template, "plan_client_template".

The plan_client_template is declared as so:

<script id="plan_client_template" type="text/kendo-tmpl">

@(Html.Kendo().Grid<Rep.Models.BuildingChangeValidationViewModel>()
      .Name("CVGrid")
      .Scrollable()
      .Selectable()
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .Columns(columns =>
      {
          columns.Bound(b => b.Field);
          columns.Bound(b => b.OldValue);
          columns.Bound(b => b.NewValue);
          columns.Bound(b => b.DateImported).Format("{0:dd-MMM-yyyy}");
          columns.Bound(b => b.BuildingChangeValidationStatusType).ClientTemplate("#=BuildingChangeValidationStatusType.Value#").Width(250);
          columns.Command(command => command.Custom("Update").Click("updateValidation"));
          columns.Command(command => { command.Edit(); }).Width(172);
      })
      .DataSource(dataSource => dataSource
          .Ajax()
            .Model(model =>
            {
                model.Id(b => b.BuildingId);
                model.Field(b => b.BuildingChangeValidationStatusType).DefaultValue(
                    ViewData["defaultBuildingChangeValidationStatuses"] as Rep.Common.LookupItem);
            })
          .PageSize(5)
        .Read(read => read.Action("BuildingValidations_Read", "Plan", new { buildingId = 0 }))
        .Update(update => update.Action("BuildingValidations_Update", "Plan"))

      )
      .ToClientTemplate()
)

Please note the column containing the ClientTemplate, "BuildingChangeValidationStatusType".

The BuildingChangeValidationStatusType client template is defined as:

@(Html.Kendo().DropDownList()
.Name("BuildingChangeValidationStatusType") // Name of the widget should be the same as the name of the property
.DataValueField("Id") 
.DataTextField("Value")
    .DataSource(
        source => source.Read(read =>
                read.Action("BuildingValidationLookups_Read", "Plan").Data("getBuildingId")
         )
         .ServerFiltering(true)
    )
    .SelectedIndex(0))

Again, the interesting thing is that it works if I make the grid name, "CVGrid" from the client detail area of the parent grid and into it's own div.

Any ideas of what's going on and why the client template column is not seen?

TIA!

Answer 1

The reason this is happening is that the master grid is attempting to parse a template in the child grid. Since this is a child grid, one must use hash tags in the template syntax, e.g.,

columns.Bound(b => b.BuildingChangeValidationStatusType).ClientTemplate("\\#=BuildingChangeValidationStatusType.Value\\#");