Embedding a TreeView within various Panels

6 posts, 1 answers
  1. Nicholas
    Nicholas avatar
    4 posts
    Member since:
    Jun 2012

    Posted 22 Mar 2013 Link to this post

    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?
  2. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 26 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Nicholas
    Nicholas avatar
    4 posts
    Member since:
    Jun 2012

    Posted 26 Mar 2013 Link to this post

    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?
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 28 Mar 2013 Link to this post

    Hello again Nicholas,

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

    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Randy
    Randy avatar
    1 posts
    Member since:
    May 2013

    Posted 25 Mar 2014 Link to this post

    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
  7. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 27 Mar 2014 Link to this post

    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
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready