Bug report

Regression with 2023.1.314

PanelBar dataItem() method does not return the data item

Reproduction of the problem
1. Open next Dojo: https://dojo.telerik.com/EjIQaSaL

2. Select an item from the Panelbar and expect the console

Expected/desired behavior

panelBar.dataItem(".k-item:first"); shall return the data item


Environment
Kendo UI version: 2023.1.314 or newer
jQuery version: x.y
Browser: [Chrome XX]

Presently, the select event cannot be cancelled. If a user attempts to select a panelbar item, the element will be selected no matter what.

There are scenarios in which it would be helpful to prevent the selection through the select event. For example, if you want the selection to occur only when you click on a particular part of the item. Or if you want to stop the selection based on the title/text of the panel.

Bug report

When the PanelBar is configured in MVVM the contentUrls does not take effect

Reproduction of the problem

1. Open the Dojo example - https://dojo.telerik.com/EGOfUtAy/3

Current behavior

The contentUrls does not take effect and no content is loaded in the PanelBar

Expected/desired behavior

It should be possible to use contentUrls in MVVM scenario.

Environment

• Kendo UI version: 2023.1.117
• Browser: [all]

Allow each item in a PanelBar to be named via Name() and then allow access to the items with alternatives like:
var pb = $("#panelBar").data.("kendoPanelBar");
var item = pb.Items("myName");

or 

var item5 = pb.Items(5);

Further, make the expand. collapse, select methods become methods of the item so that....

$("#panelBar").Items("myItem").expand();

is the way it is done.

I am sure the same principle can be applied to other widgets like Menu, for example.

Hi Team,

I'd like to request to include a Header Template for the Kendo UI PanelBar.  For example, I'd like to include a Kendo UI ComboBox in the Header but it's not accessible with a HeaderTemplate configuration. 

Thank you!

This is a must have. Sooner rather than later please!

In order to be able to use the Paner Bar as an assistant, or to be more polivalent as such, I think that this would be a nice feature to boost the use of Panel Bar

It would be nice If we could bind panel bar with local data properties.

Hi there

We have a panel bar in a fixed size container.  The trouble is that when you scroll using the arrow keys, the active item does not come into view and you continue to scroll until you come back to the top.

Please see this dojo.  By selecting the panel bar and pressing the down arrow key a number of times you can scroll out of the container without knowing what item has focus.

Is there anyway to get the active item within the panel bar to be visible when you scroll to an item below (or above) the confines of the container?

We are working on enterprise product, which uses Progress Telerik jQuery KendoUI components extensively purchased by our Company. In which Kendo PanelBar is used in many modules of our product.

Now a days we are working on Accessibility (i.e. keyboard and screen reader) as part of out-of-box feature of our product.

The Kendo Panel Bar has been made accessible so that it can be navigated using the keyboard arrow keys, once it receives focus via Tab Key.

We have created small example on dojo.telerik.com (i.e. which can be referred on https://dojo.telerik.com/@chiragvidani/EBEPUnoY/3) to explain issue faced by us, when accessing via Screen Reader. Please find issues below:

1. When the panel bar is initialized in expanded state and on receiving focus by Kendo PanelBar widget, screen reader reads Header as well as Content. Now because of this, content is read twice (i.e. second time when we navigate to content using down arrow keys one at a time). Whereas behavior in collapsed state is as expected.
2. Also, to read out the expand/collapse event of PanelBar we need to programmatically remove role attribute from <ul> and <li> tags after initialization of widget.

Secondly when referring WAI-ARIA practices on www.w3.org website (i.e. https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html), we found some differences as explained below:

1. Header of PanelBar or Accordion is surrounded by <button> inside <h3> (i.e. reference link is https://www.w3.org/TR/wai-aria-practices/#accordion)
2. Content of PanelBar or Accordion has an aria-labelledby attribute with value containing ID of respective Header.
3. In WAI-ARIA website PanelBar or Accordion is generated using combination of relevant <div> markup, whereas in Kendo, its generated using <ul> and <li> markup.
4. In current implementation of Kendo PanelBar, focus is set to <ul>, whereas in demo of w3.org website its being set to <button> placed as a header in order to restrict reading of list keyword.

Kindly help us with your assistance.

Thanks,

Chirag Vidani

Fixed height accordians / panels.

http://jqueryui.com/demos/accordion/#fillspace

I have same problem as this guy 

http://www.kendoui.com/forums/ui/panelbar/expand-all.aspx

Via some tricky magic I managed to expand just first sublevel

It will be nice to have an option to render all panelBar item sublevels expanded and a method expandAll

When PanelBar items are disabled they are greyed out and the controls on them are disabled. It would be nice if the user had the option to disable a panelBar but also enable whether they are still expandable\collapsable. This way the user could make the panelBar replicate a readonly View.

Originally jQuery UI accordion control has such property for filling free space of parent control and stretching appropriate accordion item to fill this space. Will be really nice to have this functionality in KendoUI PanelBar control. For now the workaround is to calculate space and set it trough JavaScript which is really naive solution.

On the panelBar I want to set orientation to horizontal. This would make many nice design oppertunities.

It would be awesome if the PanelBar had data binding capability like treeView.

When you place a <label> inside the template of a panelbar, and click on that label, the select event fires twice instead of the expected once.

Note: works as expected on collapsible items, only items without children exhibit the problem.

Reproduction of the problem
reproducible: https://dojo.telerik.com/OXazIKUq

Expected/desired behavior
the event keeps firing only once as if you clicked on any place in the item outside of the label.

Potential workaround: https://dojo.telerik.com/@bratanov/otIVuNag

 

Hello Support,

 

I am using kendo UI panel bar in my page and showing charts into it so I just want to add pagination into too. I have explored to get a solution for this but no luck so could you

please provide me the solution for the same.

 

Thanks,

 

 

 

Add MVVM support for PanelBar, so sections can be added dynamicaly from ViewModel. Currently no MVVM support exists for PanelBar, but there is already MVVM support implemented for TreeView (both of them use hierarchical datasource).