RadPanelBar postback without client-side expand (content of ContentTemplate)

[Shukhrat Nekbaev]

Hi,

I have a RadPanelBar, when panel bar item was clicked it was causing postback:

<telerik:RadPanelBar runat="server" ID="pnlPageComponents" Width="100%" OnClientLoad="componentsPanelClientLoad" onitemclick="pnlAdditionalPageEntities_ItemClick"
    OnClientItemClicked="componentsPanelClientClicked">
    <CollapseAnimation Type="None"></CollapseAnimation>
    <ExpandAnimation Type="None"></ExpandAnimation>
    <Items>
        <telerik:RadPanelItem Height="29px" Text="Components" Value="Components" CssClass="rpHeader1">
            <HeaderTemplate>
                <span class="rpOut rpNavigation" style="cursor:pointer; border-left:1px solid #cccccc; border-right:1px solid #cccccc;">
                    <span class="panelExpandIcon"></span>
                    <span class="rpText">
                        <asp:Label ID="lblHeader0Components" runat="server"></asp:Label>
                        <asp:Label ID="lblItemStatus0Components" CssClass="pageContentComponentsEditorHeaderDescriptionBlue" runat="server"></asp:Label>
                    </span>
                </span>
            </HeaderTemplate>
            <ContentTemplate>
                <asp:UpdatePanel ID="UpdatePanelComponents" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <uc4:Components ID="pageComponentsList" runat="server" />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </ContentTemplate>
        </telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>

in onclick event:
bool shouldRender = e.Item.Expanded = !e.Item.Expanded;
e.Item.PostBack = false; // yes, I don't want it to cause postback on consequent clicks

as you can see I was expanding it manually and depending on shouldRender variable I was doing databinding. This has been around for over 6 month and I was updating your controls regularly for this project. Today I got Q2 2012 and now this logic doesn't work anymore. What happens is that I can see that RadPanelBar first expands itself and then causes a postback, so first I see inner control's unbound view and then when postback completes - I see the data. I had to make a change to onclick event:
bool shouldRender = e.Item.Expanded;// = !e.Item.Expanded; <-- manually setting it *now* was collapsing, cause item was already expanded.

So my question is how to get back to original behavior when I don't want to item to expand itself on client side, but just cause a postback in collapsed state, I will do my stuff on server-side callback and set "expanded" property myself (as I was doing previously)?

Thank you!

P.S.: please check release notes for RadPanelBar for Q2 2012 - this should give you some hints in the "fixed" section.

[Dimitar Terziev]

Hi Shukhrat,

You could use the following overwrite in order to achieve the desired functionality:

Telerik.Web.UI.RadPanelItem.prototype._click = function (e) {
                if (this.get_isSeparator() || !this.get_isEnabled()) {
                    if (e)
                        e.preventDefault();

                    return false;
                }
                if (e && $telerik.$(e.target || e.srcElement).hasClass('rpExpandHandle'))
                    return false;

                var panel = this.get_panelBar();
                var clickingArgs = new Telerik.Web.UI.RadPanelItemClickingEventArgs(this, e);
                panel._raiseEvent("itemClicking", clickingArgs);

                if (clickingArgs.get_cancel()) {
                    if (e)
                        e.preventDefault();
                    return false;
                }

                var javaScriptUrl = false;
                if (this.get_linkElement())
                    javaScriptUrl = this.get_linkElement().href.indexOf("javascript:") == 0;

                var expandedItem = this.get_parent().get_expandedItem();
                var selectedItem = this.get_panelBar().get_selectedItem();

                if (this.get_navigateAfterClick() && !javaScriptUrl) {
                    if (this.get_panelBar().get_singleExpandedItem() && !this.get_panelBar().get_allowCollapseAllItems()) {
                        if (expandedItem) {
                            expandedItem._expanded = false;
                            expandedItem._properties.setValue("expanded", false, true);
                            this.get_panelBar()._unregisterExpandedItem(this);
                        }

                        if (this.get_items().get_count() > 0) {
                            this._expanded = true;
                            this._properties.setValue("expanded", true, true);
                            this.get_panelBar()._registerExpandedItem(this);

                        }

                    }
                    else if (this.get_items().get_count() > 0 && !this._shouldNavigate()) {
                        this.set_expanded(!this.get_expanded());
                    }
                    if (!this._shouldNavigate()) {
                        this.select();
                    }
                    else {
                        if (selectedItem) {
                            selectedItem.set_selected(false);
                        }

                        this.set_selected(true);

                    }

                    var clickedArgs = new Telerik.Web.UI.RadPanelItemClickedEventArgs(this, e);
                    panel._raiseEvent("itemClicked", clickedArgs);

                    if (this._shouldNavigate())
                        return true;

                    if (this._shouldPostBack()) {
                        if (e)
                            e.preventDefault();

                        panel._postback(this._getHierarchicalIndex());
                    }
                    return true;
                }

                if (!this.get_panelBar().get_allowCollapseAllItems() && this.get_panelBar().get_singleExpandedItem()) {
                    if (!this.get_expanded()) this.expand();
                }
                else {
                    this.get_expanded() ? this.collapse() : this.expand();
                }

                this.select();

                panel = this.get_panelBar();
                clickedArgs = new Telerik.Web.UI.RadPanelItemClickedEventArgs(this, e);
                panel._raiseEvent("itemClicked", clickedArgs);

                if (javaScriptUrl)
                    return true;

                if (e && this.get_linkElement())
                    e.preventDefault();

                if (this._shouldPostBack()) {
                    panel._postback(this._getHierarchicalIndex());
                }

                if (this.get_linkElement())
                    return false;

                return true;
            }

All the best,
Dimitar Terziev
the Telerik team

[Shukhrat Nekbaev]

Hi,

just updated to latest controls 2012 Q2 724 and applied this js fix - works.
Thanks!