Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > PanelBar > How to embed a Telerik Treeview into a PanelBar

• Dominique

  Posted on Nov 8, 2011 (permalink)

  Hi all,
    What is the correct way to embed a Telerik TreeView as one of the PanelBar items?
  There may also be other items in that section where the Treeview exists.
  I searched on the internet but could not find an example of how to do this.
  
  Thanks,
  
  
  D.
  

• Georgi Tunev Georgi Tunev

  Posted on Nov 9, 2011 (permalink)

  Hello Dominique,

   You can do this by defining the item content. You can see this approach in action in this demo.
  
  
  

  All the best,
  Georgi Tunev
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

• Dominique

  Posted on Nov 9, 2011 (permalink)

  HI Georgi,
    Thanks for taking the time to reply to my query...
  
  I did try...
  

  .Content(@<text>

                       Html.Telerik().TreeView()

                           .Name("TreeView")

                           .Items(item =>

                           {

                               item.Add()

                                   .Text("Mail")

                                   .ImageUrl("~/Content/images/icon_servicemaster.png")

                                   .ImageHtmlAttributes(new { alt = "Mail Icon" });

                           })

                          </text>

                      );

  and
  
  

  .Content(() =>

                     {

                         Html.Telerik().TreeView()

                           .Name("TreeView")

                           .Items(item =>

                           {

                               item.Add()

                                   .Text("Mail")

                                   .ImageUrl("~/Content/images/icon_servicemaster.png")

                                   .ImageHtmlAttributes(new { alt = "Mail Icon" });

                           });                        

                     });

  
  But both of these gave undesirable results. The second gave very unpredictable results.
  
  Also the demos only show really simple scenarios like adding straight HTML tags, and not how to emed controls within controls.

• Dominique

  Posted on Nov 9, 2011 (permalink)

  HI Georgi,
    I've found the error of my ways. I was using @( instead of @{ and that caused loads of issues. can the compiler warn about that sort of thing?
  
  Thanks,
  
  
  D.

• Shanmuga

  Posted on Nov 20, 2011 (permalink)

  I have lot of rendering issues having treeview within panel bar. I am using razer view.
  I have the following code to render Panel Bar:
  
  

  <div id="div1" class="class1">

                      @{ Html.Telerik().PanelBar()

                             .Name("panel1")

                             .HtmlAttributes(new { style = "width: 350px; float: left; margin-bottom: 30px;" })

                             .Items(parent =>

                             {

                                 foreach (var item in Model)

                                 {

                                     parent.Add()

                                     .Text(item.Title)

                                     .LoadContentFrom(Url.Action("ActionName/",sControllerName));

                                 }

                             })

                             .Render();

                      }

                    </div>

  
  I have the following as treeview:
  

  @(Html.Telerik().TreeView()

      .ExpandAll(true)

      .Name("TreeView")

      .BindTo(Model.LoadTree, mappings =>

      {

          mappings.For<Model>(binding => binding

              .ItemDataBound((item, treenode) =>

              {

                        item.Text = treenode.Name

   

                  item.Value = treenode.Id.ToString();

                  if (treenode.Child.Count == 0)

                  {

                      item.HtmlAttributes.Add("class", "childwithclass");

                  }

                  else

                  {

                      item.HtmlAttributes.Add("class", "childwithoutclass");

                  }

              })

              .Children(treenode => treenode.Child.OrderBy(x => x.DisplayOrder)));

      })

  )

  
  It works, but the display and rendering is all over. I tried to read various posts regarding style positioning. But nothing seems to work for me or I am not very clear about where to apply that style. Can some one put me in the right direction please.
  
  

  Attached files

  • treeviewerror.jpg

• Dimo Dimo

  Posted on Nov 21, 2011 (permalink)

  Hello Shanmuga,
  
  Your code snippets work correctly on my side. There may be some additional CSS styles on the page that cause the problem. Please use Firebug to check this out. In case you need further assistance, please provide a runnable demo.
  
  All the best,
  Dimo
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > PanelBar > How to embed a Telerik Treeview into a PanelBar