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.
$("#panelbar").data('kendoPanelBar').bind('select', function (e) { e.preventDefault(); });
var
event
= $("#panelbar").data('kendoPanelBar').bind('select', function (e) {
event
.preventDefault(); });
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.
Hi,
my customer like the kendo panelbar and has a wish:
Round edge and a little space between the titles, similar to the Accordion
Do you have some css code to adapt the appearance of the panelbar?
Dojo with the used bootstrap v3 theme: https://dojo.telerik.com/OzeMENIY
Best regards,
Peter