panel bar not collapsing

12 posts, 1 answers
  1. Chuck
    Chuck avatar
    10 posts
    Member since:
    May 2011

    Posted 24 Feb 2015 Link to this post

    Basically what I'm trying to do here is expand and collapse two panels when one panel is expanded and collapsed.

    The flyer panel bar expands just fine when the order panel bar is clicked.

    However, the second time through, when the order panel bar is clicked and collapses, the flyer info panel bar does not also collapse.

    I've looked through the javascript console, no errors are coming up and I've stuck an alert in the collapse portion which pops up, but still it does not collapse.

    What else can I try to get these two panel bars in sync as far as when they expand and collapse?

    $(
    "#orderInfoPanelBar>li").on('click', function (e) {
     
        var flyerInfoPanelBar = $("#flyerInfoPanelBar").data("kendoPanelBar");
        var orderInfoPanelBar = $("#orderInfoPanelBar").data("kendoPanelBar");
     
        /* Expand the flyer panel bar if it is not already expanded */
        if (flyerInfoPanelBar.element.children("li").hasClass("k-state-active") != true) {
            //var panelBar = $("#flyerInfoPanelBar").data("kendoPanelBar");
            $("#flyerInfoPanelBar").data("kendoPanelBar").expand($("#li_flyerInfo1"));
            $("#flyerInfoPanelBar").data("kendoPanelBar").select($("#li_flyerInfo1"));
        }
     
        /* Collapse the flyer panel bar if the order panel bar is being collapsed as well */
        if (orderInfoPanelBar.element.children("li").hasClass("k-state-active") == true &&
            flyerInfoPanelBar.element.children("li").hasClass("k-state-active") == true) {
     
            $("#flyerInfoPanelBar").data("kendoPanelBar").collapse($("#li_flyerInfo1"));
        }
    });
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 26 Feb 2015 Link to this post

    Hello Chuck,

    the DOM click event may not be the correct time for that action. I may suggest that you step through the code and check if the classes are indeed set as expected. Alternatively, you may use the expand/collapse events for that purpose.

    Regards,
    Petyo
    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. Chuck
    Chuck avatar
    10 posts
    Member since:
    May 2011

    Posted 26 Feb 2015 in reply to Petyo Link to this post

    Ok so I moved the code around a bit to utilize the collapse and expand events for the panel bar.

    Here's my collapse event:

    /* Removes the highlighting around the order info panel bar when it is collapsed */
    function onOrderInfoCollapse() {
        var orderpanelBar = $("#orderInfoPanelBar").data("kendoPanelBar");
        var flyerpanelBar = $("#flyerInfoPanelBar").data("kendoPanelBar");
     
        /* Collapse the flyer panel bar if the order panel bar is being collapsed as well */
        if (orderpanelBar.element.children("li").hasClass("k-state-active") == true &&
            flyerpanelBar.element.children("li").hasClass("k-state-active") == true) {
            alert("both are active");
            $("#flyerInfoPanelBar").data("kendoPanelBar").collapse($("#li_flyerInfo1"));
        } else {
            alert("both are not active");
        }
     
        orderpanelBar.select().find("span.k-state-selected").removeClass("k-state-focused");
        orderpanelBar.select().find("span.k-state-selected").removeClass("k-state-selected");
    }

    Here is my expand event:

    /* Update the labels on the order info tab when the order info panel is expanded */
    function onOrderInfoExpand(e) {
     
        var orderLookupGrid = $("#Grid_OrderLookup").data("kendoGrid");
        var selectedItem = orderLookupGrid.dataItem(orderLookupGrid.select());
        var flyerpanelBar = $("#flyerInfoPanelBar").data("kendoPanelBar");
        var orderpanelBar = $("#orderInfoPanelBar").data("kendoPanelBar");
        /* Prevent panel bar from expanding if no selection is made within the order lookup grid */
        if (selectedItem == null) {
            e.preventDefault();
     
            flyerpanelBar.select().find("span.k-state-selected").removeClass("k-state-focused");
            flyerpanelBar.select().find("span.k-state-selected").removeClass("k-state-selected");
     
            orderpanelBar.select().find("span.k-state-selected").removeClass("k-state-focused");
            orderpanelBar.select().find("span.k-state-selected").removeClass("k-state-selected");
            return;
        }
     
        /* Expand the flyer panel bar if it is not already expanded */
        if (flyerpanelBar.element.children("li").hasClass("k-state-active") != true) {
     
            $("#flyerInfoPanelBar").data("kendoPanelBar").expand($("#li_flyerInfo1"));
            $("#flyerInfoPanelBar").data("kendoPanelBar").select($("#li_flyerInfo1"));
        }
     
     
            $.ajax({
                type: 'POST',
                url: '/OrderLookup/UpdateOrderInfoView',
                dataType: 'json',
                data: ({ orderId: selectedItem.OrderID, isYearbookOrder: selectedItem.IsYearBookProgram }),
                success: function (result) {
     
                    if (result.UpdatedOrderModel != null) {
                        updateOrderInfo(result.UpdatedOrderModel);
                    }
                },
                error: function (data) {
                    alert(data.responseText);
                }
            });
    }


    The same thing is still occuring.  When I expand my order info panel, both panels expand.  When I collapse my order info panel, both panels do not collapse.

    There's no javascript errors in the log either.

    I've had others look at this as well and everyone agrees that the panel *should* be collapsing, but it is not.

    It collapses fine when the on click event for my search button fires.

    function CollapseFlyerInfoPanel() {
        var panelBar = $("#flyerInfoPanelBar").data("kendoPanelBar");
     
        if (panelBar != null)
            panelBar.collapse($('#li_flyerInfo1'));
    }
  5. Chuck
    Chuck avatar
    10 posts
    Member since:
    May 2011

    Posted 26 Feb 2015 in reply to Chuck Link to this post

    Sorry I don't know how to edit my previous post:

    What I meant to say was this:

    The same thing is still occuring.  When I expand my order info panel, both panels expand.  When I collapse my order info panel, only the order info panel collapses, the flyer panel does not collapse.
  6. Chuck
    Chuck avatar
    10 posts
    Member since:
    May 2011

    Posted 26 Feb 2015 in reply to Chuck Link to this post

    Edit:

    The same thing is still occuring.  When I expand my order info panel, both panels expand.  When I collapse my order info panel, only the order info panel collapses and not the flyer info panel.
  7. Chuck
    Chuck avatar
    10 posts
    Member since:
    May 2011

    Posted 26 Feb 2015 in reply to Chuck Link to this post

    Edit:

    When I collapse my order info panel, the order info panel collapses but not the flyer info panel.
  8. Chuck
    Chuck avatar
    10 posts
    Member since:
    May 2011

    Posted 26 Feb 2015 Link to this post

    Whoops, sorry for the spam, it kept popping up saying that something wasn't right so I thought my posts weren't going through.
  9. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 02 Mar 2015 Link to this post

    Hi Chuck,

    did you try stepping through the code with a debugger? Most likely a certain condition is not correct. If you are still facing issues with that problem, I may suggest that you isolate it in a Dojo - we will look into it.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Chuck
    Chuck avatar
    10 posts
    Member since:
    May 2011

    Posted 02 Mar 2015 in reply to Petyo Link to this post

    Yeah another developer and I have stepped through a few times and can't seem to find any problems.  I will try to create a dojo for a better example.
  11. Chuck
    Chuck avatar
    10 posts
    Member since:
    May 2011

    Posted 02 Mar 2015 Link to this post

    Here's the dojo you've requested.  Still getting the same behavior as previously discussed.

    http://dojo.telerik.com/iZaBO/2
  12. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 04 Mar 2015 Link to this post

    Hello Chuck,

    your code is correct - the issue here is that the panelbar resides in a hidden tab, which confuses the collapse logic. You can workaround it like this

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Chuck
    Chuck avatar
    10 posts
    Member since:
    May 2011

    Posted 05 Mar 2015 Link to this post

    Excellent!  Thank you very much for your help!
Back to Top
Kendo UI is VS 2017 Ready