Nested kendo panel on a Kendo Tabstrip not Rendering - kendo-ui

Question

I have a kendo tabstrip which load 3 tab. the first tab loads a kendo panelbar the code is like this
#(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("Transactions")
.LoadContentFrom("getgridpanel", "Grid").Selected(true);
tabstrip.Add().Text("Payments").Encoded(false)
.Content(#<text><div class="dr_detail row">
<br>
<br>
</div></text>);
tabstrip.Add().Text("Browse").Encoded(false).HtmlAttributes(new { style = "float:right !important" })
.Content(#<text><div class="dr_detail row">
<br>
<br>
<br>
<br>
</div></text>);
})
)
and the panel inside the first tab is like this:
#(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Multiple)
.HtmlAttributes(new { style = "width:100%" })
.Items(panelbar =>
{
panelbar.Add().Text("Invoice Details")
.Content(#<text><div class="col-md-2 dr">
<dl>
<dt class="text-left ">Invoice #:</dt>
<dd class="text-left ">
<input class="form-control input-sm" type="text" placeholder="Small Input">
</dd>
</dl>
</div></text>);
panelbar.Add().Text("Payment & Discount");
panelbar.Add().Text("Item Details")
.LoadContentFrom("GetGrid", "Grid", new { grid = Awesome.Web.WebConstants.L_GRID_AGENT });
})
)
when the code is like that it works fine... it renders right but when i try to create a kendo masked textbox in the panelbar like this:
#(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Multiple)
.HtmlAttributes(new { style = "width:100%" })
.Items(panelbar =>
{
panelbar.Add().Text("Invoice Details")
.Content(#<text><div class="col-md-2 dr">
<dl>
<dt class="text-left ">Invoice #:</dt>
<dd class="text-left ">
#(Html.Kendo().MaskedTextBox()
.Name("Invoice")
.Mask("0000000")
)
</dd>
</dl>
</div></text>);
panelbar.Add().Text("Payment & Discount");
panelbar.Add().Text("Item Details")
.LoadContentFrom("GetGrid", "Grid", new { grid = Awesome.Web.WebConstants.L_GRID_AGENT });
})
)
this code gives me a javascript error: "TypeError: undefined is not a function in /Grid/getgridpanel"
both the tabstrip and the panel are partial views
any help?? is this possibly a bug or conflict of Kendo UI.???

Answer 1

You can not have nested templates inside your mvc helper method-call. The code where you have your MaskedtextBox is causing the problem. What I have done in the past is create an html helper that returns a kendo control, then added the remainder of my kendo markup that includes the nested items, in the main page, like so:
<div>
#MyHelper(parameters).Items(...your code for panel bar here)
</div>
Your help method should return type KendoPanelBar. If you need further clarification, let me know. Good luck.