'Invalid template' error for kendo grid inside kendo tabstrip

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\\#").