panel bar not collapsing

[Chuck]

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

    }

});

[Petyo]

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

 

 

[Chuck]

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'));
}

[Chuck]

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.

[Chuck]

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.

[Chuck]

Edit:

When I collapse my order info panel, the order info panel collapses but not the flyer info panel.

[Chuck]

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

[Petyo]

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

 

 

[Chuck]

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.

[Chuck]

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

http://dojo.telerik.com/iZaBO/2

[Petyo]

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

 

 

[Chuck]

Excellent!  Thank you very much for your help!