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

3 posts, 1 answers
  1. Shukhrat Nekbaev
    Shukhrat Nekbaev avatar
    73 posts
    Member since:
    Oct 2010

    Posted 14 Jun 2012 Link to this post

    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. Answer
    Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 18 Jul 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shukhrat Nekbaev
    Shukhrat Nekbaev avatar
    73 posts
    Member since:
    Oct 2010

    Posted 30 Aug 2012 Link to this post

    Hi,

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