hierarchy Grid: Invalid Template

3 posts, 0 answers
  1. Pierre
    Pierre avatar
    28 posts
    Member since:
    Jun 2012

    Posted 18 Jan 2013 Link to this post

    Hi,

    I'm trying to use the grid hierarchy feature but I'm not able to make it work.  I'm getting "Invalid template" error no matter what I try.  I've followed the sample at http://demos.kendoui.com/web/grid/hierarchy.html but no lock.  The main grid by itself works fine.

    Here's the HTML:
    @(Html.Kendo().Grid(Model.Cart.Products)
        .Name("ProductGrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.HCode).Title("HCode").Width(90);
            columns.Bound(p => p.VCode).Title("VCode").Width(90);
            columns.Bound(p => p.Desc).Title("Description");
            columns.Bound(p => p.Qty).Title("Qty").Width(70).ClientTemplate("#=dispTextbox(HCode, Qty)#").HeaderHtmlAttributes(new { @style = "text-align:center;" }).HtmlAttributes(new { style = "text-align:center;" });
            columns.Bound(p => p.UPrice).Width(100).Title("Unit<br />Price").Format("{0:c}").HtmlAttributes(new { style = "text-align:right;" }).HeaderHtmlAttributes(new { style = "text-align:center;" }).ClientFooterTemplate("Total:").FooterHtmlAttributes(new { style = "text-align:right;" });
            columns.Bound(p => p.XPrice).Width(100).Title("Extended<br />Price").ClientTemplate("#= kendo.format('{0:c}', Qty * UPrice) #").FooterHtmlAttributes(new { style = "text-align:right;" }).ClientFooterTemplate("#= kendo.format('{0:c}', sum)#").HtmlAttributes(new { style = "text-align:right;" }).HeaderHtmlAttributes(new { style = "text-align:center;" });
        })
        .ClientDetailTemplateId("productsOrderTemplate")
        .Resizable(resizing => resizing.Columns(true))
        .Pageable()
        .Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Single))
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .Aggregates(aggregates =>
            {
                aggregates.Add(p => p.VCode).Count();
                aggregates.Add(p => p.UPrice).Sum();
                aggregates.Add(p => p.XPrice).Sum();
            })
            .Model(model => model.Id(p => p.HCode))
        )
        .Events(events => events.DataBound("dataBoundProds"))
    )
    <script id="productsOrderTemplate" type="text/kendo-tmpl">
        @(Html.Kendo().Grid(Model.Cart.ProductOrders)
                .Name("Orders_#=HCode#")
                .Columns(columns =>
                {
                    columns.Bound(o => o.OrderNo).Width(101).Title("Order Number");
                    columns.Bound(o => o.Date).Width(140).Title("Date");
                    columns.Bound(o => o.Qty).Width(100).Title("Quantity");
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("loadProductsOrder", "OrderEntry", new { HCode = "#=HCode#" }))
                )
                .Sortable()
                .ToClientTemplate()
        )
    </script>
    <script>
        function dataBoundProds() {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        }
    </script>
    Here's the error:

    Error: Invalid template:'
                                        <div class="k-widget k-grid" id="Orders_#=HCode#"><table cellspacing="0"><colgroup><col style="width:101px" /><col style="width:140px" /><col style="width:100px" /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="OrderNo" data-title="Order Number" scope="col"><a class="k-link" href="/OrderEntry/loadProductsOrder?HCode=%23%3DHCode%23&Orders_%23%3DHCode%23-sort=OrderNo-asc">Order Number</a></th><th class="k-header" data-field="Date" data-title="Date" scope="col"><a class="k-link" href="/OrderEntry/loadProductsOrder?HCode=%23%3DHCode%23&Orders_%23%3DHCode%23-sort=Date-asc">Date</a></th><th class="k-header" data-field="Qty" data-title="Quantity" scope="col"><a class="k-link" href="/OrderEntry/loadProductsOrder?HCode=%23%3DHCode%23&Orders_%23%3DHCode%23-sort=Qty-asc">Quantity</a></th></tr></thead><tbody><tr class="t-no-data"><td colspan="3"></td></tr></tbody></table></div><script>
        jQuery(function(){jQuery("\#Orders_#=HCode#").kendoGrid({"columns":[{"title":"Order Number","width":"101px","field":"OrderNo","encoded":true},{"title":"Date","width":"140px","field":"Date","encoded":true},{"title":"Quantity","width":"100px","field":"Qty","encoded":true}],"sortable":true,"scrollable":false,"dataSource":{"transport":{"read":{"url":"/OrderEntry/loadProductsOrder?HCode=#=HCode#"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"type":"aspnetmvc-ajax","filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"Date":{"type":"date","defaultValue":null},"sDate":{"type":"string"},"Qty":{"type":"number"},"OrderNo":{"type":"string"}}}}}});});
    <\/script>
                                    ' Generated code:'var o,e=kendo.htmlEncode;with(data){o='\n                                    <div class="k-widget&';32;k-grid" id="Orders_;o+='=HCode';"><table cellspacing="0"><colgroup><col style="width:101px" /><col style="width:140px" /><col style="width:100px" /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="OrderNo" data-title="Order&;o+='32;Number" scope="col"><a class="k-link" href="/OrderEntry/loadProductsOrder?HCode=%23%3DHCode%23&Orders_%23%3DHCode%23-sort=OrderNo-asc">Order Number</a></th><th class="k-header" data-field="Date" data-title="Date" scope="col"><a class="k-link" href="/OrderEntry/loadProductsOrder?HCode=%23%3DHCode%23&Orders_%23%3DHCode%23-sort=Date-asc">Date</a></th><th class="k-header" data-field="Qty" data-title="Quantity" scope="col"><a class="k-link" href="/OrderEntry/loadProductsOrder?HCode=%23%3DHCode%23&Orders_%23%3DHCode%23-sort=Qty-asc">Quantity</a></th></tr></thead><tbody><tr class="t-no-data"><td colspan="3"></td></tr></tbody></table></div><script>\n\tjQuery(function(){jQuery("#Orders_'+(HCode)+'").kendoGrid({"columns":[{"title":"Order Number","width":"101px","field":"OrderNo","encoded":true},{"title":"Date","width":"140px","field":"Date","encoded":true},{"title":"Quantity","width":"100px","field":"Qty","encoded":true}],"sortable":true,"scrollable":false,"dataSource":{"transport":{"read":{"url":"/OrderEntry/loadProductsOrder?HCode='+(HCode)+'"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"type":"aspnetmvc-ajax","filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"Date":{"type":"date","defaultValue":null},"sDate":{"type":"string"},"Qty":{"type":"number"},"OrderNo":{"type":"string"}}}}}});});\n<\/script>\n                                ';}return o;'

    Thanks

    PT
  2. Pierre
    Pierre avatar
    28 posts
    Member since:
    Jun 2012

    Posted 18 Jan 2013 Link to this post

    I found the solution to the problem on another site!

    I had to remove this line form web.config

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

    Not sure what that's for!

    PT
  3. Pauline
    Pauline avatar
    7 posts
    Member since:
    Sep 2013

    Posted 30 Oct 2013 Link to this post

    Pierre, the AntiXss library is used by default to encode text input/output to your application. It's supposed to protect against cross-site scripting attacks. 
    By my own experience, the "Invalid template" error happens when Kendo UI sees the # character unexpectedly. Try to backslash any # characters your template or script may be using, see this thread for example.
    Hopefully you will not need to disable AntiXss, because this may increase your site vulenrability.

    Cheers
Back to Top