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

hierarchy Grid: Invalid Template

2 Answers 161 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Pierre
Top achievements
Rank 1
Pierre asked on 18 Jan 2013, 07:28 PM
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 Answers, 1 is accepted

Sort by
0
Pierre
Top achievements
Rank 1
answered on 18 Jan 2013, 10:18 PM
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
0
Pauline
Top achievements
Rank 1
answered on 30 Oct 2013, 11:53 AM
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
Tags
Grid
Asked by
Pierre
Top achievements
Rank 1
Answers by
Pierre
Top achievements
Rank 1
Pauline
Top achievements
Rank 1
Share this question
or