Dynamic PanelBar

5 posts, 1 answers
  1. OMER
    OMER avatar
    32 posts
    Member since:
    Dec 2013

    Posted 03 Feb 2014 Link to this post

    Hi,
    I've got a simple panel bar code at: http://plnkr.co/edit/cJsESYQY5Dz4voQcudud?p=preview
    In this code, you can see a panelbar that's limited in size (imagine it has a context) and the panelbar item is much larger.
    What I want to happen is the following:
    1) Panels won't be able to open more than the UL height.
    2) Spread the panels in various heights - so the first would be 75% and the second would be 25%.
    I tried doing it with jquery - changing the heights dynamically - but things got much more comlicated when I had a grid inside one of the panels...
    Is there a smart way to do this?
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 06 Feb 2014 Link to this post

    Hello Omer,

    The described behavior is possible to achieve if you use the widget's expand and collapse events to check which container is visible/expanded/collapsed and adjust the other container's height.

    In order to ensure that the item containers are able to fit random amount of content, they should be scrollable.

    Animations should be disabled.

    If you want to use animations as well, you will need to use custom ones, because the custom resizing logic will interfere with the the native PanelBar animations.

    Here is a demo, which I made to be sure that I can claim the desired behavior is possible to achieve in theory. It is a custom implementation of a generally unsupported scenario, so it is provided "as is".

    http://jsfiddle.net/dimodi/LH2w9/

    Regards,
    Dimo
    Telerik
    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. OMER
    OMER avatar
    32 posts
    Member since:
    Dec 2013

    Posted 10 Feb 2014 in reply to Dimo Link to this post

    Hi,
    It seems cool, if a bit messy (i.e. what happens when you have more than 2-3 panels?).
    But this, along with setting grid height, solved my problem.
    Thanks
  5. OMER
    OMER avatar
    32 posts
    Member since:
    Dec 2013

    Posted 15 Mar 2014 Link to this post

    If anyone is interested in a generic dynamic panel bar here it is:
    http://plnkr.co/edit/wBQFE6vIAGUpLlGUX3qu?p=preview
    In this example it makes all the panels to get the same height, but a minor change in logic can give them different heights (e.g. set an array of weights for each panel and apply it in turn).
    Hope this is helpful :)
  6. OMER
    OMER avatar
    32 posts
    Member since:
    Dec 2013

    Posted 17 Mar 2014 in reply to OMER Link to this post

    And here it is with some static panels in an array. It took some more modification than I thought, so I post it here:
    http://plnkr.co/edit/ykEX8tjWCzQZ3RcCMG8M?p=preview
Back to Top
Kendo UI is VS 2017 Ready