Embedding a TreeView within various Panels

[Nicholas]

Is it possible to use the PanelBarBuilder to accomplish this? I see that there are various BindTo methods available.

Or..

Can I create PanelBarItem with trees embedded? It seems as though only text is possible.

I'm not even sure where to begin. Can anyone please provide an example to get me started?

[Daniel]

Hello Nicholas,

Yes, it is possible to include a treeview in the content of a panelbar item. The easiest approach will be to use the Razor text tag:

• Using the Items method:
  

  .Items(panelbar =>
  {
      panelbar.Add().Text("Text")
          .Expanded(true)
          .Content(@<text>
                  @(Html.Kendo().TreeView()
                      .Name("treeview")
                      .Items(treeview =>
                      {
                          treeview.Add().Text("main")
                              .Expanded(true)
                              .Items(subnodes =>
                              {
                                  subnodes.Add().Text("sub1");
                                  subnodes.Add().Text("sub2");
                                  subnodes.Add().Text("sub3");
                              });
                      })
                  )
          </text>);

  
  
• Using the BindTo method:
  

  .BindTo(Model, (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<PanelBarItem> mappings) =>
  {
      mappings.For<MyModel>(itemDataBound =>
              itemDataBound.ItemDataBound((panel, model) =>
          {
              panel.Text = model.Text;
              panel.Template.InlineTemplate = @<text>
                         @(Html.Kendo().TreeView()
                              .Name("treeview" + model.Id)
                              .Items(treeview =>
                              {
                                  treeview.Add().Text("main")
                                      .Expanded(true)
                                      .Items(subnodes =>
                                      {
                                          subnodes.Add().Text("sub1");
                                          subnodes.Add().Text("sub2");
                                          subnodes.Add().Text("sub3");
                                      });
                              })
                          )
              </text>;
          }));
  
  })

  
  
  

Alternative solutions are to set an action for the Content and use the Render method for both the PanelBar and the TreeView or convert the TreeView to string via the ToHtmlString method.

Regards,
Daniel
the Telerik team

[Nicholas]

Thanks very much. This is the push in the right direction that I needed. I'm assuming I can apply a similar technique for some of the other widgets also?

[Daniel]

Hello again Nicholas,

Yes, the same approach can be used for all navigational components.

Regards,
Daniel
the Telerik team

[Randy]

Daniel,

How deep can you nest controls. For instance, can you nest a grid inside a panelbar inside a tabstrip? This would certainly simplify the navigation of some pages we are designing.

Randy

[Daniel]

Hello Randy,

There is not limitation on the level of nesting. The only limitation comes from the Razor ViewEngine for nested <text> tags which can be avoided by using the string or action overloads or a helper for the content e.g.

@helper nestedContent(){
    @(
        Html.Kendo().TabStrip().Name("tabstrip")
            .Items(tabItems =>
            {
                tabItems.Add().Text("tab").Content(@<text>
                    content
                </text>);
            })
    )
}

@(Html.Kendo().PanelBar()
    .Name("panelbar")
    .Items(panelbar =>
    {
        panelbar.Add().Text("panel")
            .Expanded(true)
            .Content(o => nestedContent());

Regards,
Daniel
Telerik

 

 

[Keith Jusas]

Can you please give the sample for VB.net

[Dimitar]

Hello Keith,

For a correct Visual Basic (VB) syntax inside the Kendo UI MVC wrapper declarations, please refer to the following documentation article:

• https://docs.telerik.com/aspnet-mvc/getting-started/vb#visual-basic-syntax

Regards,
Dimitar
Progress Telerik