Don't quite understand how the 'methods' work for this module.

[oesman]

Let's say I want to pre-expand a panel. How would I go about doing that? I tried to utilize the methods per the guide, but with all my efforts I still can't manage to do this. Could I get a direct example in basic html/javascript for how to pre-expand a panel or another method that panels support? I just don't get it :-/ (not a big js guy.)

[Kamen Bundev]

Hi Oesman,

You can specify class="t-state-active" on the LI element that you want to initialize expanded, it will force the PanelBar to initialize it open. Another way is to call the PanelBar expand() method, but it will happen later and more visible.

Kind regards,
Kamen Bundev
the Telerik team

[oesman]

Could you show me how you would call the expand() method, because I'm getting an error from JS saying that function is not a member of the object.

[Dimo]

Hi Oesman,

Expand is called like this:

// with widget initialization
var panelBar = $("#panelbar").kendoPanelBar().data("kendoPanelBar");

// or
// without widget initialization
var panelBar = $("#panelbar").data("kendoPanelBar");

// get first item and expand
var item = $("#panelbar .t-item:eq(0)");
panelBar.expand(item);

For more information and a demo, please refer to:

http://demos.kendoui.com/panelbar/api.html


All the best,
Dimo
the Telerik team

[John]

I also had the same need to default all nodes to expanded and found the examples/documentation unclear.

First I added, class="t-state-active t-state-selected" to all of my root li tags in the panel.  This did not have the expected behavior of defaulting them to open.

The solution that I came up with was to create an each selector and use the index to open the tags.  Not pretty but it works, a better solution is appreciated.

      $(document).ready(function () {
            $('#panelbar .t-state-active').each(function (index) {
                var item = $("#panelbar .t-state-active:eq(" + index + ")");
                panelBar.expand(item);
            });
        });

        var panelBar = $("#panelbar").kendoPanelBar().css({ marginRight: "220px" }).data("kendoPanelBar");
       

[Luka]

I also find documentation a bit unclear. For example to init a widget is enough to write

var dummy = $("#panelbar").kendoPanelBar();

but if you want to use API you must explicitly call data("kendoPanelBar");

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

otherwise you get error message when you call expand/collapse or some other functions. This sort of things are not pointed out in documentation.

another thing
in the configuration section of PanelBar widget is for example explained expandMode

expandMode: String(default: multiple)

but what are the other options. It is somehow logical that it would be single but it's not specified in configuration section.