This is a migrated thread and some comments may be shown as answers.

Embedding a TreeView within various Panels

7 Answers 123 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Nicholas
Top achievements
Rank 1
Nicholas asked on 22 Mar 2013, 06:28 PM
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?

7 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 26 Mar 2013, 01:39 PM
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!
0
Nicholas
Top achievements
Rank 1
answered on 26 Mar 2013, 03:04 PM
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?
0
Daniel
Telerik team
answered on 28 Mar 2013, 01:52 PM
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!
0
Randy
Top achievements
Rank 1
answered on 25 Mar 2014, 05:28 PM
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
0
Daniel
Telerik team
answered on 27 Mar 2014, 10:59 AM
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.

 
0
Keith Jusas
Top achievements
Rank 1
answered on 19 Jan 2018, 06:28 PM
Can you please give the sample for VB.net
0
Dimitar
Telerik team
answered on 23 Jan 2018, 11:59 AM
Hello Keith,

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


Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
PanelBar
Asked by
Nicholas
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Nicholas
Top achievements
Rank 1
Randy
Top achievements
Rank 1
Keith Jusas
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or