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 inline markup is allowed."

Is there a way for the Razor engine to render helpers two level deep?

My code example:

@(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(@<div>
                                    <div>
                                        @(Html.Kendo().Grid<GroupViewModel>()
                                              .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()  //<-- here the error occurs
                                                                        </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"))
                                          )
                                    </div>
                                </div>
                            </div>);
              panelbar.Add().Text("panel2")
                      .Content(@<div>
                                //stuff abbreviated
                                </div>
                  );
          })
  )
}


@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>
}

Andreas

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>
 }

Vogul

Yes you are right. I eventually went that way (after I had given it some thought) ;) – Andreas