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

6 posts, 0 answers
  1. oesman
    oesman avatar
    2 posts
    Member since:
    Sep 2011

    Posted 12 Sep 2011 Link to this post

    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.)
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 13 Sep 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. oesman
    oesman avatar
    2 posts
    Member since:
    Sep 2011

    Posted 13 Sep 2011 Link to this post

    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.
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 14 Sep 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. John
    John avatar
    11 posts
    Member since:
    Sep 2011

    Posted 24 Oct 2011 Link to this post

    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");
           

  7. Luka
    Luka avatar
    2 posts
    Member since:
    May 2011

    Posted 24 Nov 2011 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready