Telerik Forums
Kendo UI for jQuery Forum
1 answer
51 views

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?

 

 

Neli
Telerik team
 answered on 09 Nov 2023
1 answer
255 views

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

 

1 answer
48 views

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>
  

Neli
Telerik team
 answered on 30 Jan 2023
1 answer
77 views

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.

Sneha
Top achievements
Rank 1
Iron
 answered on 09 Aug 2022
2 answers
1.1K+ views
I am doing this directly on the ajax demo page. so you can test it for yourself.
I used firebug console and I binded a select hander on the panelbar.
$("#panelbar").data('kendoPanelBar').bind('select', function (e) { e.preventDefault(); });
You can see when you click on a panel, it is expanded and the underlying ajax call is made
The preventDefault is not taken into account.

I had to use recursion to make work as it is supposed to
var event= $("#panelbar").data('kendoPanelBar').bind('select', function (e) { event.preventDefault(); });


John
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 28 Sep 2020
6 answers
288 views

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.

 

Ivan Danchev
Telerik team
 answered on 03 Apr 2020
2 answers
33 views

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

 

Yanjun
Top achievements
Rank 1
 answered on 31 Jan 2020
2 answers
107 views

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.

Paul
Top achievements
Rank 1
 answered on 18 Jul 2019
1 answer
46 views

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

Marin Bratanov
Telerik team
 answered on 04 Dec 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?