hierarchy Grid: Invalid Template

[Pierre]

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

[Pierre]

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

[Pauline]

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