Master Details Grid not working

3 posts, 0 answers
  1. Ezequiel
    Ezequiel avatar
    36 posts
    Member since:
    Oct 2011

    Posted 10 Apr 2013 Link to this post

    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. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 10 Apr 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Ezequiel
    Ezequiel avatar
    36 posts
    Member since:
    Oct 2011

    Posted 10 Apr 2013 Link to this post

    thanks. it worked removing the line in web.config...
Back to Top