Resizing DIV according to collapsiblePanel state

Hello,

I'm trying to resize a div on the moment the collapsiblePanel either expands or collapses.

The page I have is roughly like follows;

1<table>2 <tr>3 <td>4 <div id="cpPanelHeader">5 panel header6 </div>7 <div id="cpPanelContent">8 panel content9 </div>10 <ACT:CollapsiblePanelExtender11 TargetControlID="cpPanelContent"12 ExpandControlID="cpPanelHeader"13 CollapseControlID="cpPanelHeader" />14 </td>15 </tr>16 <tr>17 <td>18 <div id="PageContent">19 main page content20 </div>21 </td>22 </tr>23</table>

the first table cell houses some general information, enclosed in the collapsible panel. the second table cell houses the page content.

on the moment that the collapsible panel collapses or expands i want to make sure the main page content is spread over the available space. therefore i want to be able to set the height property of the PageContent div. I first tried some codebehind to set the style.height of the div, but this prop is read only. then i changed the div into a panel, and set the panel.height prop. this didn't seem to work; the panel did not shrink or grow, no matter what value I set the height to. Then i tried to use client javascript, but i cant get hold of the panelstate inside of the javascript.

Can anyone point out to me how to solve this problem?

Regards,

Francois

Hi Francois,

You can add event handler for the panel's collapsed and expanded event, and resize the div in the handler.

First, assign a behaviorID to the CollapsiblePanelExtender;

Second, retrieve it with $find method;

Third, Add event handler for it;

For instance:

<ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo"BehaviorID="cpe"...... />

function pageLoad()

{

var cpb = $find("cpe");

cpb.add_expanded(myFunction1); cpb.add_collapsed(myFunction2);

}

function myFunction1() {//resize div here}

Hope this helps.

Hello Raymond,

I'm fiddling with your approach. one thing that doesn't work yet is the adding of the event handlers.

the code I have is as follows;

 function OnLoad() { alert('OnLoad'); var cpb = $find('cpBID'); cpb.add_expanded(ResizeDIVOnPanelExpanded); cpb.add_collapsed(ResizeDIVOnPanelCollapsed); } function ResizeDIVOnPanelExpanded() { alert('OnPanelExpanded'); } function ResizeDIVOnPanelCollapsed() { alert('OnPanelCollapsed'); }

I registered this code with the scriptmanager as follows;

protected void Page_Load(object sender, EventArgs e) { ScriptManager.RegisterStartupScript(this,typeof(GS_CasusAanpassen),"start","OnLoad();",true); }

Now, I do get the OnLoad message. but after that it's all quit. is it something I did wrong with adding the event handlers?

Or do I have to set the script on another place?

Kind Regards and thanks for helping out!

Francois

Finally

It seems I was hooking up the wrong events. while searching throught the forum I stumbled accross the following thread;

http://forums.asp.net/p/1112899/1721250.aspx#1721250

Following that thread I solved my problem as follows:

 <script language="javascript" type="text/javascript"> function pageLoad() { var cpb = $find("collapsibleBehavior"); cpb.add_expandComplete( ResizeDIVOnPanelExpanded ); cpb.add_collapseComplete( ResizeDIVOnPanelCollapsed ); } function ResizeDIVOnPanelExpanded() { document.getElementById('MainContentDIV').style.height = '250px'; } function ResizeDIVOnPanelCollapsed() { document.getElementById('MainContentDIV').style.height = '500px'; } </script>

This works well. It would be nice thought if the size would change fluently and not at once. a bit like the collapsible panel itself maybe.

retaining class state.

dear All

I have a checkbox, a dropdownlistbox and a label in 3 separate update panels.

I have autopostback=true for both checkbox and dropdownlist box and write to the label text in their eventhandlers. The checkbox event when fired writes as expected but not the dropdownlistbox.

I have a class called myclass with a string property called "abrev". I want to remember the complete myclass between postbacks. I think there is something called session to do it...but can someone help me on how to do it in the below code?

aspx.cs code.

public partialclass _Default : System.Web.UI.Page { myclass[] pessi =new myclass[10];protected void Page_Load(object sender, EventArgs e) { ScriptManager1.RegisterAsyncPostBackControl(CheckBox1); ScriptManager1.RegisterAsyncPostBackControl(DropDownList1);for (int i = 0; i < 10; i++) { pessi[i] =new myclass(); } }protected void CheckBox1_CheckedChanged(object sender, EventArgs e) { DropDownList1.Items.Clear(); DropDownList1.Items.Add("something"); DropDownList1.Items.Add("something1"); pessi[0].Abrev ="I am in checkbox"; Label2.Text = pessi[0].Abrev; UpdatePanel2.Update(); UpdatePanel3.Update(); }protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { Label2.Text = pessi[0].Abrev; UpdatePanel3.Update(); }}

aspx code 

<form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <br /> <br /> <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server"> <ContentTemplate> <asp:CheckBox ID="CheckBox1" runat="server" autopostback="true" OnCheckedChanged="CheckBox1_CheckedChanged" /> </ContentTemplate> </asp:UpdatePanel> <br /> <br /> <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server"> <ContentTemplate> <asp:DropDownList ID="DropDownList1" autopostback="true" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"> </asp:DropDownList> </ContentTemplate> </asp:UpdatePanel> <br /> <br /> <asp:UpdatePanel ID="UpdatePanel3" UpdateMode="Conditional" runat="server"> <ContentTemplate> <br /> <br /> <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label> </ContentTemplate> </asp:UpdatePanel> </form>

Thank you all in advance,

prasad.. 

Session Variables are what you want. They are are read/write like any other variable, except they persist in memory on the server for the duration of the visitors session. They are also simple to use:

Session["myvar"] = "var";
Response.Write["myvar"]; //will outputvar

hi

Thank you for your reply.

I am a little new to the world of programming and computers as such (not a SW professional). Can you please tell me how to store a complete class?

will this work for my above example?

Session["myname"] = "myclass";

Secondly, where should this session be defined= in pageload? and also when there is a postback?

lastly, I want to be able to change any property of myclass in the code behind when events happen...do these changes automatically take place in the session..

for example...if I change myclass.Abrev (in my example) for a button click event for example then are the session variables updated automatically?

Thank you in advancem

prasad..