Kendo widgets two level deep in Razor, inline markup blocks cannot be nested

Question

I´m trying to implement Kendo widgets two level deep but the Razor engine keeps complaining: \"Inline markup blocks (@Content) cannot be nested. Only one level of inlin

Answer 1

I think you probably need to use razor helper at any level. In your case, you probably need to put the grid in another RenderGrid() as shown below:

@(Html.Kendo().TabStrip()
  .Name("tabStrip")
  .Items(tabstrip =>
  {
      tabstrip.Add().Text("Strip1")
          .Selected(true)
          .Content(@<text>
                        @RenderPanelBar()
                    </text>);
      tabstrip.Add().Text("Strip2")
          .Content(@<text>

                    </text>);
  })
  )

@helper RenderPanelBar()
{
@(Html.Kendo().PanelBar()
      .Name("panelBar")
      .ExpandMode(PanelBarExpandMode.Single)
      .Items(panelbar =>
      {
          panelbar.Add().Text("panel1")
              .Expanded(true)
              .Content(@<text>
                            @RenderGrid()
                        </text>
              );
          panelbar.Add().Text("panel2")
              .Content(@<div>
                            //stuff abbreviated
                        </div>
              );
      })
      )
}
@helper RenderGrid()
{
@(Html.Kendo().Grid<UserModel>()
      .Name("GroupGrid")
      .Columns(columns =>
      {
          columns.Bound(c => c.GroupID).Hidden();
          columns.Bound(c => c.Name);
          columns.Command(command =>
          {
              command.Edit();
              command.Destroy();
          });
      })
      .ToolBar(toolbar =>
      {
          toolbar.Create();
          toolbar.Template(@<text>
                                @RenderDropDown()
                            </text>);
      })
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .Scrollable(s => s.Enabled(false))
      .Selectable(s => s.Enabled(true).Mode(GridSelectionMode.Single))
      .DataSource(dataSource => dataSource.Ajax()
          .Read(read => read.Action("Group_Grid_Read", "Home"))
          .Events(events => events.Error("error_handler"))
          .Model(model => model.Id(p => p.GroupID))
          .Create(update => update.Action("EditingInline_Create", "Home"))
          .Update(update => update.Action("EditingInline_Update", "Home"))
          .Destroy(update => update.Action("EditingInline_Destroy", "Home")))
     .Events(e => e.Change("onGroupGridChange").Save("GroupGrid_Save")) 
     )
 }

@helper RenderDropDown()
{
 <div class="toolbar">
                                    <label class="category-label" for="category">Show products by category:</label>
                                    @(Html.Kendo().DropDownList()
                                          .Name("categories")
                                          .OptionLabel("All")
                                          .DataTextField("CategoryName")
                                          .DataValueField("CategoryID")
                                          .AutoBind(false)
                                          .Events(e => e.Change("categoriesChange"))
                                          .DataSource(ds => { ds.Read("ToolbarTemplate_Categories", "Grid"); })
                                          )
                                </div>
 }