[Solved] How to embed a Telerik Treeview into a PanelBar

[Dominique]

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]

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

[Dominique]

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]

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]

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.

[Dimo]

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