Changing items in collapsed panels

7 posts, 1 answers
  1. Zack
    Zack avatar
    112 posts
    Member since:
    Jun 2012

    Posted 06 Jun 2012 Link to this post

    Posting this to ask if it is a bug or expected... and also maybe help others with this issue.
    If you have collapsed panels and try to enable/disable/jQuery.show/jQuery.hide/etc... to elements in the collapsed panel you get no effect or very undesired/buggy effects.

    Here is my solution:
    //get panelbar objects and collapsed/enabled status
     var panelBar = $("#PanelBar").data("kendoPanelBar");
     var editorBar = $('[id^="PanelEditor"]');
     var editorBarIsDisabled = editorBar.hasClass("k-state-default");
     
     //expand panelbars so we can show/hide controls
     if (editorBarIsDisabled) panelBar.expand(editorBar);
     
     // do visual changes here etc...
     
     //collapse panelbars if they were already
     if (editorBarIsDisabled) panelBar.collapse(editorBar);
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 07 Jun 2012 Link to this post

    Hi Zack,

    What are the undesired effects you're getting? Can you elaborate a bit?

    For your code - you may consider using the expand/collapse() second option to disable the animations - something like expand("li:first", false).

    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. Zack
    Zack avatar
    112 posts
    Member since:
    Jun 2012

    Posted 07 Jun 2012 Link to this post

    The main problem was that I have panel bar with a couple levels of children panels, and in about 2 levels deep I have a panel that is a toolbar with some jquery ui buttons.
    If i call jQuery.hide or try to disable them while the panel is collapsed, once the panel is expanded the button is still visible... but it was inconsistent... sometimes it would hide. If I call this workaround to expand them, then apply hide/disable, then collapse them, when the user expands they are hidden as desired 100% of the time.
  5. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 07 Jun 2012 Link to this post

    Hello Zack,

    This is strange - when an item is collapsed - its content just has display: none set and shouldn't be affecting elements in it. You can try setting a class which has display: none instead of show/hide and see how that goes. However about disabling the buttons you should consult jQuery UI documentation if there are any requirements.

    All the best,
    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!
  6. Zack
    Zack avatar
    112 posts
    Member since:
    Jun 2012

    Posted 07 Jun 2012 Link to this post

    You are correct it is leaning towards a jq ui issue at this point, I do see that your collapsed state is simply display:none which you should be able to apply styling to elements within that. Thanks for your input.
  7. Zack
    Zack avatar
    112 posts
    Member since:
    Jun 2012

    Posted 07 Jun 2012 Link to this post

    The workaround causes the panel to no longer be expandable... in internet explorer only of course... I hate how there are so many browsers to deal with. I am trying to track this down... This may be a panel bar issue itself but I think for now I may try to avoid the whole problem by not using jqui buttons...
  8. Zack
    Zack avatar
    112 posts
    Member since:
    Jun 2012

    Posted 07 Jun 2012 Link to this post

    The final solution was to remove the animation duration from the jq hide/show effects. I had a wrapper on the calls that defaulted as 'fast' which actually makes the call a jquery animation. Removing the default duration allows the buttons to hide as expected.
Back to Top
Kendo UI is VS 2017 Ready