Hi Team,

There's a keyboard issue on the panel bar using the keyboard as focus is going to hidden list item.

Working example Link: https://dojo.telerik.com/AzURoTUJ/3

Case 1: If  Panel Group 1 i.e. Project is expanded, if there's no Panel  Group 2 only panel content is there like Monday, Tuesday & Wed. and if i'm using a keyboard, focus gets lost after the sales report when i press down arrow key and after pressing 2nd time arrow keys focus is go to the Monday which is part of the Panel Group 2.

Case 2: If  Panel Group 1 i.e. Project is collapsed, and if there's no Panel Group 2 {unnamed} and  only panel group 2 content is there like Monday, or Tuesday & Wed. and if I'm using a keyboard, the focus is getting lost after the projects when  I press down arrow key and after pressing 2nd time down arrow keys focus is going to the Monday which is part of the Panel Group 2.

Expected Behavior:

1. Focus should not go to the hidden element, focus should move to the visible content in the list.

Also, if there's any fix around this please let us know where we can change it to make it behave like above?

Hi,

On the roadmap page there is a "Dock Manager Component" listed, but I don't see any information on this anywhere.

Anyone have more information or an ETA on this?

Thanks

Christopher

Does anyone know how to correctly configure the PanelBar to work with AJAX content when instantiating via MVVM?

Dojo Example MVVM PanelBar with AJAX content

This code instantiates the PanelBar but does not load the AJAX content

  <div id="example">
    <ul 
        data-role="panelbar"
        data-content-urls="['https://demos.telerik.com/kendo-ui/content/web/panelbar/ajax/ajaxContent1.html']" >
      <li>MVVM Ajax Test
        <div></div>
      </li>
    </ul>
  </div>
  
  
  <script>
     kendo.bind($("#example"));
  </script>
  

I am trying to populate the kendo panel control using the below json

var jsondata = { "Heading 1": 
[{ "ID": 1, "Name": "TEST 1" }, { "ID": 2, "Name": "TEST 2" }, 
{ "ID": 3, "Name": "TEST 3" }, { "ID": 4, "Name": "TEST 4" }, 
{ "ID": 5, "Name": "TEST 5" }, { "ID": 6, "Name": "TEST 6" },
],
 "Heading 2": 
 [{ "ID": 1, "Name": "TEST 1" }, { "ID": 2, "Name": "TEST 2" },
 { "ID": 3, "Name": "TEST 3" }], 

 "Heading 3": [{ "ID": 1, "Name": "TEST 1" }, 
 { "ID": 2, "Name": "TEST 2" },
 { "ID": 3, "Name": "TEST 3" }] };

Heading 1, Heading 2, Heading 3 will be the heading of the panels and the "Name" will be the subitems

JS FILE :

$(document).ready(() => {
    $("#pageLoader").hide();

    $("#panelbar").kendoPanelBar();
    var panelBar = $("#panelbar").data("kendoPanelBar");



    $.each(Object.keys(jsondata), function (i, row) {
      // trying to get all the names into an array
        let array = new Array(Object.values(jsondata)[i].length);

        $.each(Object.values(jsondata)[i], function (j, datarow) {

            array[j] = Object.values(jsondata)[i][j].Name;
        });



        panelBar.append([
            {
                text: row,
                items:  ??? 

            }
        ]);
    });
}); 

Below are the things I have tried :

items : array (subitems are populated but they are shown as "undefined")

items : [{text :  array }] (all the subitems are displayed as one item with comma separated values)

How are we supposed to give:

items : [{

text : "TEXT 1"

},

{

text : "TEXT 2"

}

]

I want to do the above thing but not hard code. In a loop or something.

Hello

I would ask about possibility to close last panel when expandmode is single. Multiple expand mode allows close all panels, single not.

How to close all panels in single mode.

ver.2020 R1

https://dojo.telerik.com/AvenepoV

ver.2019 R3 SP1

https://dojo.telerik.com/alaWEjIs/2

See ver.2020 R1 sample , click Google or Kendo link is not working
but ver.2019 R3 SP1 is normal

I have a panel bar based on a remote data source which all works fine. One of the attributes in the feed combined with a form field on the screen will determine if either the user can click on a child item in the panelbar and navigate through to the url, or gets a warning dialogue and navigation fails.

I am using the following technique to capture the given json attribute in the feed and associate it with each item in the panel:

$("#panelbar").kendoPanelBar({

        dataSource: haRepList,
        template: "<span class=''repType'' data-url=''#= item.type #''>#= item.name #</span>",
        select: function(panel){
           var classId =  $(panel.item).find(".repType").data(''url'');
           if (classId !== ''undefined'') {
           alert(classId);
           }
        },
        dataTextField: ["name", "name"]
    });

So when I click on the given item, I get an alert telling me what the type attribute is (just for debugging!). I now need to tell the panel "Do not allow the click through url to work" based upon both this value, and another field on the screen.