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?
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");
});
})
)
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.
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?
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?
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.
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?
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
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
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?