Vfrdtyky

I wanted to place kendo grid inside kendo tabstrip content. It gave 'Invalid template' error. If I remove only kendo grid inside purchase tab, it works without error. Is there a workaround for this ?

<script id="invoice-template" type="text/kendo-tmpl">

@(Html.Kendo().TabStrip()

    .Name("tabStrip_#=Id#") // Id -> TransportId

    .SelectedIndex(0)

    .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))

    .Items(items =>

    {

            items.Add().Text("Commercial").Content(@<text>

                <a href="\#" class="k-new-commercial k-link k-button" title="New Commercial"><i class="fa fa-document"></i>&nbsp;&nbsp;New Commercial</a>

            </text>);

            items.Add().Text("Purchase").Content(@<text>

                <a href="\#" class="k-new-purchase k-link k-button" title="New Purchase"><i class="fa fa-document"></i>&nbsp;&nbsp;New Purchase</a>

                <br />

                @(Html.Kendo().Grid<PurchaseInvoiceView>()

                                .Name("grid-purchase_#=Id#")

                                .Columns(columns =>

                                {

                                                    columns.Bound(c => c.InvoiceDate).Title("Date").Width(50).ClientTemplate("#= kendo.toString(InvoiceDate,'dd-MM-yyyy')#");

                                                    columns.Bound(c => c.InvoiceNo).Title("Number").Width(50)

                                                        .Filterable(f => f.Extra(false).Cell(cell => cell.Operator("contains").ShowOperators(false)));

                                                    columns.Bound(c => c.Lot).Title("Lot").Width(40)

                                                        .Filterable(f => f.Extra(false).Cell(cell => cell.Operator("contains").ShowOperators(false)));

                                                    columns.Bound(c => c.Supplier).Title("Group Company").Width(70)

                                                        .Filterable(f => f.Extra(false).Cell(cell => cell.Operator("contains").ShowOperators(false)));

                                                    columns.Bound(o => o.Quantity).Title("Quantity").Width(40).ClientTemplate("#= floatToDouble(Quantity)#");

                                                    columns.Bound(o => o.InvoiceAmount).Title("Amount").Width(40).ClientTemplate("#= floatToMoney(InvoiceAmount)#");

                                                    columns.Bound(c => c.CurrencyAsString).Title("").Width(40);

                                                })

                                .Sortable()

                                .Selectable()

                                .Pageable(pageable => pageable

                                    .Refresh(true)

                                    .PageSizes(true)

                                    .ButtonCount(5))

                                .DataSource(dataSource => dataSource

                                    .Ajax()

                                    .Read(read => read.Action("GetListOfPurchaseInvoice", "PurchaseInvoice", new { Area = "ar", transportId = "#=Id#" }))

                                    .PageSize(200)

                                ).ToClientTemplate())

            </text>);

            items.Add().Text("Cost").Content(@<text>

                <a href="\#" class="k-new-cost k-link k-button" title="New Cost"><i class="fa fa-document"></i>&nbsp;&nbsp;New Cost</a>

            </text>);

    }).ToClientTemplate())

</script>

Your TabStrip already is in a template. If I am not mistaken, you have to escape every single # within the TabStrip's items. Like .Name("grid-purchase_\#=Id\#").