Accordion Extender - A solution to save / read SelectedIndex after PostBack

Last post 12-24-2009 4:01 PM by nekno. 6 replies.

Sort Posts:

  • Accordion Extender - A solution to save / read SelectedIndex after PostBack

    01-30-2009, 8:09 PM
    • Member
      7 point Member
    • nekno
    • Member since 12-11-2008, 6:45 PM
    • Posts 7

    I'm looking to use the AccordionExtender as a navigation menu in a master page.

    I want to save / read the AccordionExtender SelectedIndex property across PostBacks, in order to keep the same accordion pane open after PostBack.

    I'm wondering why the add_selectedIndexChanged() client-side function doesn't work to add an event handler. Instead, I've had to call my own function on click or mouseover.

    Why the server-side SelectedIndex property doesn't hold the currently selected index, I don't understand (it would make this a lot easier). As it doesn't, I was forced, like many others, to implement a solution to pass the SelectedIndex property from the client-side to the server-side, and then to save and restore it.

    Some have suggested a cookie or session variable to store the selected index; I chose the session variable. Some have suggested a hidden field or textbox to pass the index value from client to server, but I found it always to be null on PostBack after setting the value on the client-side.

    A full PostBack on every SelectedIndex change isn't desirable, so I implemented a Callback event, which requires the code to sit on the server-side, where Page.ClientScript.GetCallbackEventReference() can be called.

    I have the following code, which works, but I'd prefer to bind an event handler directly to the selectedIndexChanged event. I tried various uses of $get and $find to get the AccordionExtender object to use with $addhandler, but none result in an object that allows binding to the selectedIndexChanged event.

    The commented code below seems as though it should work to add the event handler, but doesn't.

    Note that accLeftNav is the AccordianExtender object.

      
     

    1    public partial class Site : System.Web.UI.MasterPage, System.Web.UI.ICallbackEventHandler
    2 {
    3 public void RaiseCallbackEvent(String eventArgument)
    4 {
    5 // Processes a callback event on the server using the event argument from the client.
    6 if (!String.IsNullOrEmpty(eventArgument))
    7 Session["LeftNavSelectedIndex"] = eventArgument;
    8 }
    9
    10 public string GetCallbackResult()
    11 {
    12 // Returns the results of a callback event to the client.
    13 return String.Empty;
    14 }
    15
    16 protected void Page_Load(object sender, EventArgs e)
    17 {
    18 if (Session["LeftNavSelectedIndex"] != null)
    19 {
    20 int selectedIndex = 0;
    21 Int32.TryParse(Session["LeftNavSelectedIndex"].ToString(), out selectedIndex);
    22 accLeftNav.SelectedIndex = selectedIndex;
    23 }
    24
    25 if (!Page.IsPostBack)
    26 {
    27 for (int i = 0; i < accLeftNav.Panes.Count; i++)
    28 {
    29 accLeftNav.Panes[i].HeaderContainer.Attributes.Add("onclick", String.Format("javascript:LeftNavCallback({0}, 'click');", i));
    30 accLeftNav.Panes[i].HeaderContainer.Attributes.Add("onmouseover", String.Format("javascript:LeftNavMouseOver({0}, 'mouseover');", i));
    31 }
    32
    33 // Doesn't work - add_selectedIndexChanged() isn't found for the object
    34 //ScriptManager.RegisterStartupScript(this, this.GetType(), "RegisterLeftNavCallback", String.Format("var leftNav = $find('{0_AccordionExtender}'); leftNav.add_selectedIndexChanged(LeftNavServerCallback);", accLeftNav.ClientID), true);
    35
    36 // See: Implementing Client Callbacks Programmatically Without Postbacks in ASP.NET Web Pages - http://msdn.microsoft.com/en-us/library/ms178208.aspx
    37 // And: How to: Implement Callbacks in ASP.NET Web Pages - http://msdn.microsoft.com/en-us/library/ms366518.aspx

    38 String strCallbackEventReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "");
    39 String strCallbackScript = String.Format("function LeftNavCallback(arg, context) {{ {0}; }}", strCallbackEventReference);
    40 ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "LeftNavCallback", strCallbackScript, true);
    41 ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "ReceiveServerData", "function ReceiveServerData(arg, context) { }", true);
    42 ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "LeftNavMouseOver", String.Format(
    43 "function LeftNavMouseOver(arg, context) {{ $find('{0}_AccordionExtender').set_SelectedIndex(arg); LeftNavCallback(arg, context); }}",
    44 accLeftNav.ClientID), true);
    45 }
    46 }
    47 }
     
  • Re: Accordion Extender - A solution to save / read SelectedIndex after PostBack

    03-06-2009, 8:20 AM
    • All-Star
      63,220 point All-Star
    • TATWORTH
    • Member since 02-04-2003, 1:34 PM
    • England
    • Posts 12,352
    • TrustedFriends-MVPs

     I also have posted a similar question at:  http://forums.asp.net/t/1393747.aspx

    Don't forget to click "Mark as Answer" on the post that helped you.
    This credits that member, earns you a point and marks your thread as Resolved so we will all know you have been helped.
  • Re: Accordion Extender - A solution to save / read SelectedIndex after PostBack

    11-19-2009, 11:38 AM
    • Member
      6 point Member
    • ttroy
    • Member since 11-19-2009, 4:20 PM
    • Posts 3

    Follow Steps:

    All you need is to define the accordion pane inside a Master Page. Inside Accordion Pane Insert a LinkButton that will call a function on server sider with the event OnClick, all you need is to write in the CommandArgument atribute of the LinkButton the url for the page and declare a OnClick function to save the SelectedIndex . Look...

    Client Side:

     

    <ajaxToolkit:Accordion ID="menu" runat="server" HeaderSelectedCssClass="header" HeaderCssClass="content"
                        EnableViewState="true">
                        <Panes>
                            <ajaxToolkit:AccordionPane ID="panel" runat="server" TabIndex="0">
                                <Header>
                                    Menu Header
                                </Header>
                                <Content>
                                    <ul class="nav">
                                        <asp:LinkButton ID="LinkButton18" runat="server" CommandArgument="Page.aspx" OnClick="MenuLinkButton_OnClick" Text="Link Text"></asp:LinkButton>
                                </Content>
                            </ajaxToolkit:AccordionPane>
                             </panes>
    <ajaxToolkit:Accordion>


     

     

    Server Side:

    MenuLinkButton_OnClick: Call SaveMenuIndex, and redirect to a page selected by a user at moment OnClick.

    SaveMenuIndex: Save SelectedIndex of accordion in a Session variable.

    Page_Load: All you need is to write inside Page_Load method the code to refresh Accordion SelectedIndex.

    protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    if (Session["MyAccordion.SelectedIndex"] != null)
                    {
                        Accordion accordioMenu = (Accordion)this.FindControl("menu");
                        accordioMenu.SelectedIndex = (int)Session["MyAccordion.SelectedIndex"];
                    }
                }
            }
    
            public void SaveMenuIndex()
            {
                Accordion accordioMenu = (Accordion)this.FindControl("menu");
                Session["MyAccordion.SelectedIndex"] = accordioMenu.SelectedIndex;
            }
    
            public void MenuLinkButton_OnClick (object sender, EventArgs e){
                SaveMenuIndex();
                Response.Redirect("~/" + ((LinkButton)sender).CommandArgument);
            }


     

     

     

  • Re: Accordion Extender - A solution to save / read SelectedIndex after PostBack

    12-23-2009, 1:13 AM
    • Member
      8 point Member
    • Karthizen
    • Member since 09-25-2009, 5:46 AM
    • Posts 18

    Thanks a ton !! Saved by Time :) 

    Regards,
    Karthi
  • Re: Accordion Extender - A solution to save / read SelectedIndex after PostBack

    12-24-2009, 12:12 AM
    • Member
      7 point Member
    • nekno
    • Member since 12-11-2008, 6:45 PM
    • Posts 7

    @ttroy - Your solution uses a PostBack when clicking a link to save the Accordian Extender's SelectedIndex property.

    That doesn't satisfy one of my requirements to save the open pane without a PostBack, so obviously the solution I implemented is a tad more complicated, but saves the open pane whether the user clicked a link on the menu or not. The user may open the menu but navigate to another page using another link on the page, so a way to save the open pane without clicking a particular link is better, IMHO.

  • Re: Accordion Extender - A solution to save / read SelectedIndex after PostBack

    12-24-2009, 10:39 AM
    • Member
      6 point Member
    • ttroy
    • Member since 11-19-2009, 4:20 PM
    • Posts 3

    Yes i know you can save the selected index implementing java script ore more simple when you click any header of the accordion panel call a method to save the selected index on a sesion variable without saving on an linkbutton. The reason i write that example is because its easy to understand and was only to give an a simple idea of how to resolve it.


    Greetings, and Merry Christmas.

    Ttroy.

  • Re: Accordion Extender - A solution to save / read SelectedIndex after PostBack

    12-24-2009, 4:01 PM
    • Member
      7 point Member
    • nekno
    • Member since 12-11-2008, 6:45 PM
    • Posts 7

    Oh, I see. Fair enough. I had already posted a solution that works in my opening post, and was asking specifically how to implement it better using the client-side functions/events of the AccordionExtender.

    I don't disagree that your post was an easy example of how to save the selected pane in a session variable, it just didn't address the topic of this thread, which was specifically a question about how to add the event handler on the client-side.

    I had already posted a solution using server-side logic to implement client-side callbacks, I just wanted to use the actual client-side functions built into the AccordionExtender class.

Page 1 of 1 (7 items)