Nested kendo panel on a Kendo Tabstrip not Rendering

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.