Telerik Forums
UI for ASP.NET Core Forum
1 answer
1.0K+ views

I have a PanelBar control with 3 panels, each holding a Chart control with column items.  I am using the HtmlHelper build the charts.  The PanelBar is in a container that spans 100% of the screen.  By default, the charts in the panels render at about 25% of the width - and that means charts with a lot of categories are seriously compressed and unreadable.

I've tried using the Width option of ChartArea (inside Chart), and while that works, I can't always be sure the double I set this to will be right for all user's browsers.  There is no string option, so Width has to be a number of pixels.

Using HtmlAttributes (adding style) also has no effect.

How can I get the charts to occupy 100% of the container other than just guessing using ChartArea's Width or resorting to JavaScript to redraw the chart after the page is rendered?

Stoyan
Telerik team
 answered on 15 Aug 2022
1 answer
141 views

Hey guys,

we're using the panelbar as navigation on our website. Every item has a link behind which you can simply access by clicking on the item.

Since we have to check for accessibility we're in trouble with the panelbar because toggling the item with keyboard doesn't toggle the link/action behind it. 

Do you have a best practice how to implement such a function?


@(Html.Kendo().PanelBar()
                        .Name("panelbar")
                        .ExpandMode(PanelBarExpandMode.Multiple)
                        .Items(panelbar =>
                        {
                            panelbar.Add().Text("Angebote")
                                .Items(angebot =>
                                {
                                    angebot.Add().Text("Anlegen").Action("Create", "Offer");
                                    angebot.Add().Text("Bearbeiten").Action("Update", "Offer");
                                    angebot.Add().Text("Löschen");
                                });
                        })
                    )

Tsvetomir
Telerik team
 answered on 27 Sep 2021
1 answer
124 views

Is there a way to create an Combobox in the PanelBar header? We want to reload content of the PanelBar after changing the Combobox value.

I haven't found a function or Property like HeaderTemplate() or something similar.

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 30 Aug 2021
1 answer
163 views

Hey guys,

I'm using the PanelBar for side navigation. For describing my issue the following simple setup should work too.

@(Html.Kendo().PanelBar()
                    .Name("panelbar")
                    .ExpandMode(PanelBarExpandMode.Multiple)
                    .Items(panelbar =>
                    {
                        panelbar.Add().Text("Home").Action("Index", "Home");
                        panelbar.Add().Text("Offers")
                             .Items(offers=>
                             {
                                 offers.Add().Text("Show").Action("Index", "Offers");
                             });
                    })
                )

Each item in the PanelBar is connected to an action. When loading "/Home/Index" the selected item in the PanelBar after loading the page is the first item "Home". It works like expected.

But when loading "/Offers/Index", there will be nothing selected in the PanelBar. So in the end only the items in the highest item level are selected by it's action. You can see it when putting the "Offers/Index" directly under "Home/Index".

panelbar.Add().Text("Home").Action("Index", "Home");
panelbar.Add().Text("Offers").Action("Index", "Offers");

Currently I'm using "2021.2.616". I know from a previous project that this behavior wasn't yet in version "2021.1.119". There the subitems were also selected if the current url matched the href of the item.

Maybe a bug?

Aleksandar
Telerik team
 answered on 09 Aug 2021
2 answers
155 views

I am trying to put in a panel bar that is collapsed by default. I took the demo and changed the expanded value to false.

<kendo-panelbar name="project">
    <items>
        <panelbar-item text="Storage" expanded="false">
            <items>
                <panelbar-item text="Wall Shelving"></panelbar-item>
                <panelbar-item text="Floor Shelving"></panelbar-item>
                <panelbar-item text="Kids Storag"></panelbar-item>
            </items>
        </panelbar-item>
    </items>
</kendo-panelbar>

 

The panel bar items are collapsed but the icon is set to "k-i-arrow-60-up" so it looks like it can still be collapsed.

I am also wanting to put content other than <panelbar-item> in there, so I was going to use the <content> tag instead f the <items> tag an then put a treeview in there. When I use the <content> tag, the content is always show, so I must be using this incorrectly. I know I can do it with the html helpers, but I like how the tag helpers look. Can I still do this with the tag helpers?

Ivan Danchev
Telerik team
 answered on 19 Aug 2020
2 answers
117 views

Hi,
I have a kendo-panelbar and for SOME of theirs items I would like to load on demand partial views, using tagHelper syntax.

For the kendo-tabstrip & tabstrip-item it was very simple by using this sequence:

<tabstrip-item text="Great Job, Telerik"
                                                  asp-action="GetMyPartialView"
                                                  asp-controller="FromMyController"
                                                  asp-route-id="@Model.MyId">
</tabstrip-item>

Can you provide me an example to use in the panelbar-item context?

Thanks.

Catalin
Top achievements
Rank 1
Veteran
 answered on 11 May 2020
5 answers
189 views

I have a multi-step UI that requires the user select a group from a TreeList.  That group selection must then be used to feed into a Grid that is populated by People that are in that selected Group.

How do I do this?  I've been using the PanelBar up to this point to perform multi-step processes.  However, I've never had to base the data selection in step 2 with the selection from step 1.  Can I late bind the Grid so it will go get its data when the host Tab is selected?

Nencho
Telerik team
 answered on 16 Apr 2020
11 answers
482 views

Is there a way to have multiple lines (with different styles)?  Kinda like this:

 

Main Text LIne

This is my Sub Text

 

Thanks for your help,

Joel

Ivan Danchev
Telerik team
 answered on 29 Jan 2020
1 answer
120 views

hello -- I'm using a panel bar in an MVC app and would like for it to fill the available space,whether the user is looking at the app on a big screen or phone. Specifically, I would like for the panelbar's height to be the same as the viewport and then, when the page is loaded, each of the 5 sections in the panel bar should shrink or grow dynamically to fill the entire panelbar control with no white space left underneath.

Is there a way to accomplish this?

 

thanks

Yvette Whitaker

 

Petar
Telerik team
 answered on 23 Jan 2020
1 answer
92 views

Hi All

 

I'm using the panelbar in an asp.net core project, like so:

 

        @(Html.Kendo().PanelBar().Name("s").Items(p =>
        {

p.Add().Text("Manufacturers").Content(@<text>

 

However, I have noticed that nothing appears on the page in the browser. Please advise?

 

 

Aleksandar
Telerik team
 answered on 21 Oct 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?