Master Details Grid not working

[Ezequiel]

We're starting to migrate from Telerik MVC Extensions to  Kendo.
As we have the first master detail grid, we begin creating it the same way as the examples that come with installation of Kendo UI.

Here is my view:

@(Html.Kendo()
      .Grid<ShowResumo>()
      .Name("grid")
      .Columns(columns => {
columns.Bound(e => e.MasterId).Hidden(true);
columns.Bound(e => e.Code).Width(110);
columns.Bound(e => e.Description).Width(110);
columns.Bound(e => e.Date).Width(110);
columns.Bound(e => e.Quantity).Width(110);
columns.Bound(e => e.Type);

})
      .Sortable()
      .Pageable()
      .Scrollable()
      .ClientDetailTemplateId("template")
      .HtmlAttributes(new { style = "height:430px;" })
      .DataSource(dataSource => dataSource
.Ajax()
.PageSize(6)
.Read(read => read.Action("ListResumo", "Transportador"))
)
      .Events(events => events.DataBound("dataBound"))
)

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo()
          .Grid<ShowDetails>()
          .Name("grid_#=MasterId#")
          .Columns(columns => {
    columns.Bound(o => o.TransportId).Width(70);
    columns.Bound(o => o.TruckId).Width(110);
    columns.Bound(o => o.Driver);
    columns.Bound(o => o.Plate).Width(200);
    })
          .DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(5)
    .Read(read => read.Action("ListDetails", "Transportador", new { masterId= "#=MasterId#" }))
    )
          .Pageable()
          .Sortable()
          .ToClientTemplate()
    )
</script>
<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

So, it is just like the example, I already even copied it to try to find anything wrong, but I couldn't.
When I run the application and go to this grid, I get the following error:
IE9

Unhandled exception at line 9, column 6594 in http://localhost:60455/Scripts/kendo/2013.1.319/kendo.all.min.js

 

0x800a139e - Microsoft JScript runtime error: Invalid template:'
<div class="k-widget&#32;k-grid" id="grid_#=MasterId#"><table cellspacing="0">


Chrome

Uncaught Error: Invalid template:' <div class="k-widget k-grid" id="grid_#=MasterId#">

Any help?

[Rosen]

Hello Ezequiel,

I suspect that the error you have described is caused by the following line in the web.config:

<httpRuntime targetFramework="4.5" encoderType="System.Web.Security.AntiXss.AntiXssEncoder, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />

This will produce hash("#") symbols inside the script element where detail template is defined  generating an invalid template.

In order to workaround this you may either:
- remove the line from the web.config
- use the following approach when rendering the detail template:

<script id="template" type="text/kendo-tmpl">
    @{var grid = Html.Kendo()
          .Grid<ShowDetails>()
          .Name("grid_#=MasterId#")
          // grid configuration ....
          .ToClientTemplate()
    }
    @Html.Raw(grid.ToHtmlString().Replace(" ", "&\\#32;"))
</script>

Greetings,
Rosen
the Telerik team

[Ezequiel]

thanks. it worked removing the line in web.config...