This is a migrated thread and some comments may be shown as answers.

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

2 Answers 76 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Shukhrat Nekbaev
Top achievements
Rank 1
Shukhrat Nekbaev asked on 14 Jun 2012, 10:47 AM
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.

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar Terziev
Telerik team
answered on 18 Jul 2012, 09:14 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Shukhrat Nekbaev
Top achievements
Rank 1
answered on 30 Aug 2012, 12:50 PM
Hi,

just updated to latest controls 2012 Q2 724 and applied this js fix - works.
Thanks!
Tags
PanelBar
Asked by
Shukhrat Nekbaev
Top achievements
Rank 1
Answers by
Dimitar Terziev
Telerik team
Shukhrat Nekbaev
Top achievements
Rank 1
Share this question
or