I've created a website application with a MasterPage that has an Accordion side-menu contained in a Collapsible Panel. It works fine, however, I need a way to hold the state of these controls when the user is redirected to another page.
So, if they have the side-menu collapsed and click a link to another page, when the new page is displayed, the side-menu should remained collapsed...is there anyway to do this? Basically, I just need to set some Session Variables to hold the state whenever the user manipulates the side-menu...
You could probably do it in viewstate? I don't have time to test it out right now, I'll try to get back to this later if nobody else has answered. Basically after you open a collapsible panel you could set something like viewstate("thiscontrolisCollapsed")=false and then on the page load you could do something like
if viewstate("isCollapsed")=false then
' code to open panel
end if
just off the top of my head. Sorry I can't be more technical with it, I'm getting ready to walk out the door and thought I'd throw this out as a suggestion.
Thanks, but the problem is actually being able to hold the state of the collapsible panel on the server side. All the collapsing and expanding is handled in client side javascript, and I'd need to somehow run some server-side code to hold the state after the client script has expanded or collapsed the panel.
I was thinking I need to fire off a client side call-back, but I can't figure out how to trigger it when the collapsible panel is expanded or collapsed...
Ok, I've figured out how to accomplish this. I already had an image that was the ExpandControlID and CollapseControlID, that the user clicks on to expand or collapse the panel. So I simply added an onclick attribute to that image which calls a javascript that initiates a client side call-back, where I pass the Collapsed status of the panel to the server and set a session variable. My code is below:
<script type="text/javascript" >
function holdSideMenuState(){
holdSideMenuStateInSession(!$find("SideMenuBehavior").get_Collapsed());
}function sessionNowHoldsSideMenuState(isSideMenuCollapsed, context){
alert(isSideMenuCollapsed);
}
</script>
<table border="0" cellpadding="0" cellspacing="0" class="SideMenu">
<tr>
<td class="SideMenuExpandCollapse" valign="top">
<asp:Image ID="imgExpandCollapse" runat="Server" ImageUrl="~/images/collapse.jpg" CssClass="ExpandCollapseImage" />
</td>
<td>
<asp:Panel ID="pnlSideMenu" runat="Server">
Side Menu Content goes here....
</asp:Panel>
</td>
</tr>
</table
<ajaxToolkit:CollapsiblePanelExtender ID="cpeSideMenu" runat="server"
TargetControlID="pnlSideMenu"
CollapsedSize="0"
Collapsed="False"
ExpandControlID="imgExpandCollapse"
CollapseControlID="imgExpandCollapse"
AutoCollapse="False"
AutoExpand="False"
ScrollContents="False"
ImageControlID="imgExpandCollapse"
ExpandedImage="~/images/collapse.jpg"
CollapsedImage="~/images/expand.jpg"
ExpandDirection="Horizontal"
BehaviorID="SideMenuBehavior">
</ajaxToolkit:CollapsiblePanelExtender>
protected void Page_Load(object sender, EventArgs e)
{
string callBackReference = Page.ClientScript.GetCallbackEventReference(this,"isSideMenuCollapsed","sessionNowHoldsSideMenuState","context");
string callBackScript ="function holdSideMenuStateInSession(isSideMenuCollapsed, context){" + callBackReference +"}";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"holdSideMenuStateInSession", callBackScript,true);imgExpandCollapse.Attributes["onclick"] +="holdSideMenuState();";
if (!IsPostBack)
{
if (Session["IsSideMenuCollapsed"] ==null) Session["IsSideMenuCollapsed"] =false;cpeMenu.Collapsed = Convert.ToBoolean(Session["IsSideMenuCollapsed"]);
}
}public void RaiseCallbackEvent(string isSideMenuCollapsed)
{
Session["IsSideMenuCollapsed"] = isSideMenuCollapsed;
}public string GetCallbackResult()
{
return Session["IsSideMenuCollapsed"].ToString();
}
I have some more work to do because in my real code, I actually have an Accordion inside the collapsible panel, and I need to hold the state of the accordion as well, but I'll save any questions I have with that for another thread...
No comments:
Post a Comment