This is a migrated thread and some comments may be shown as answers.

Master Details Grid not working

2 Answers 211 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ezequiel
Top achievements
Rank 2
Ezequiel asked on 10 Apr 2013, 12:06 PM
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?

2 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 10 Apr 2013, 01:39 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ezequiel
Top achievements
Rank 2
answered on 10 Apr 2013, 02:11 PM
thanks. it worked removing the line in web.config...
Tags
Grid
Asked by
Ezequiel
Top achievements
Rank 2
Answers by
Rosen
Telerik team
Ezequiel
Top achievements
Rank 2
Share this question
or