Kendo UI for MVC: Rendering a Grid in a PanelBar

Question

MVC 4. When I place a Grid inside a Kendo UI PanelBar it does not work as expected. The View ends up not putting the Grid in the Content(), but rather itself into the panel over and over again recursively forever.

@(Html.Kendo().PanelBar()
  .Name("IntroPanelBar")
  .Items(items =>
      {
          items.Add()
               .Text("papering Reports")
               .Selected(true)
               .Expanded(true)
               .Content(() => Html.RenderAction("Grid"));   

To see if it's my code, I put the Grid outside of the PanelBar and everything renders fine with the gird outside the PanelBar :

@{
   Html.RenderAction("Grid");
}

@(Html.Kendo().PanelBar()
  .Name("IntroPanelBar")
  .Items(items =>
      {
          items.Add()
               .Text("papering Reports")
               .Selected(true)
               .Expanded(true)
               .Content("PLAIN TEXT");

Answer 1

The solution is to use the MVCHtmlString output of the Action instead:

@(Html.Kendo().TabStrip()
  .Name("tabstrip")
  .Items(tabstrip =>
      {
          tabstrip.Add().Text("papering")
                  .Selected(true)
                  .Content(Html.Action("Grid").ToHtmlString());   <---

Answer 2

I tried the below code and it worked. Enclose your grid code in <div> tag in the Content part of PanelBar.

@(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Single)
.Items(panelbar => 
    { 
             panelbar.Add().Text("Devices")
            .Expanded(true)
            .Content(@<div>@(Html.Kendo().Grid(Model)
            ...grid code here
             </div>
            );
            })
            )

Answer 3

I know this is an older question but it popped up when I searched a similar problem. It could be solved by using the Razor helper function. My example shows a Panel with a tab strip that contains a grid.

    <div id="panel">
    @(Html.Kendo().PanelBar()
        .Name("panelbar")
        .ExpandMode(PanelBarExpandMode.Single)
        .Items(panelbar =>
            {
                foreach (var a in Model)  {

                    panelbar.Add().Text(a.dom.fileName)
                        .Content(@<div id="tabs">
                            @RenderTabStrip(a)

                        </div>
                );

                }
            })
    )

    @helper RenderTabStrip(DominguezReport.WebInterface.Models.accModelTest a)
{
    @(Html.Kendo().TabStrip()
        .Name("tabs" +a.dom.recordID)
        .Items(tabstrip =>
        {
            tabstrip.Add()
                .Text("Status")
                .Content(@<div>@RenderStatusGrid(a)</div>);

            tabstrip.Add()
                .Text("Errors")
                .Content(@<div>@RenderErrorGrid(a)</div>);
        })
    );
}

     @helper RenderStatusGrid(DominguezReport.WebInterface.Models.accModelTest a)
{
    @(Html.Kendo().Grid(a.drs)
    .Name("Status")
    .Columns(columns=>
                    {
                        columns.Bound(c => c.currentStatus);
                        columns.Bound(c => c.updateTime);
                    })
                    .Scrollable()
      )
}
    @helper RenderErrorGrid(DominguezReport.WebInterface.Models.accModelTest a)
{
    @(Html.Kendo().Grid(a.dre)
    .Name("Errors")
    .Columns(columns =>
    {
        columns.Bound(c => c.errorType);
        columns.Bound(c => c.errorDetail);
        columns.Bound(c => c.updateTime);
    })
    .Scrollable()
)
}