viewstate for collapsable panel control

C

Cappy

Hi.

I have built a custom control for a collapseable panel. The panel has
an image to which when clicked, fires a client side javascript
function that shows or hides the panel using DHTML. This javascript
funciton is registered to the page on render
This works fine for me except that when a post back occurs for any
reason, because the show/hide all occurs client side, the control
doesnt remember its collapsed state.

I think what I need to do is register an event to the collapse image
thats sets a collapsed propety which is stored in the view state.

I have a property as follows to hold the collapsed state.

[Bindable(true),
Category("Appearance"),
DefaultValue("false")]

public bool Collapsed
{
get
{
if(ViewState["Collapsed"] == null) return false;
return Convert.ToBoolean(ViewState["Collapsed"]);
}
set
{
ViewState["Collapsed"] = value;
}
}

What I need to know is.. how do I make my collapse image button set
this property. Currently.. my image button looks like this.

writer.AddAttribute(HtmlTextWriterAttribute.Name,
"Collapse"+this.UniqueID);
//If started collapsed, show expand image if available, else collapse
image.
if ((Collapsed) && (expandImg.Length > 0))
{
writer.AddAttribute(HtmlTextWriterAttribute.Src, expandImg);
}
else
{
writer.AddAttribute(HtmlTextWriterAttribute.Src, collapseImg);
}
//Javascript Onlick function to show or hide panel body
writer.AddAttribute(HtmlTextWriterAttribute.Onclick,"toggle('"+this.UniqueID+
"_collapse','"+this.UniqueID+"')");

writer.AddAttribute("hspace","3");
//If mouse over add js
if (collapseOnImg.Length > 0)
{
writer.AddAttribute("onMouseOver", "ImgH.swap(this,'Collapse"+
this.UniqueID +"On');");
writer.AddAttribute("onMouseOut", "ImgH.fade(this,'Collapse"+
this.UniqueID +"Off');");
}
writer.RenderBeginTag(HtmlTextWriterTag.Img);
writer.RenderEndTag();

how do I make this image set the property of the control on click?

Regards
Amit
 
T

Teemu Keiski

Hi,

one way could be that at client-side the script writes the collapsed state
to an hidden input field, which your control reads on postback. You'd
probably want to implement postback datahandling for it
(IPostBackDataHandler interface). When it reads that say 'collapsed' is
posted within the hidden form field, it could set the Collapsed property to
true and when such is not posted, it of course sets the property to false.

Here is an example of IPostBackDataHandler:
http://msdn.microsoft.com/library/d...SystemWebUIIPostBackDataHandlerClassTopic.asp
(watch for wrapping)
 
C

Cappy

Hi thanks for your response.

I have been looking at what you suggested but still cant get it to
work.

I have done the javascript part that populates a hidden text box with
the current state.. but I can to the postback data handler part.

The control renders the hidden text box like this

writer.AddAttribute(HtmlTextWriterAttribute.Type, "hidden");
writer.AddAttribute(HtmlTextWriterAttribute.Value,
Collapsed.ToString());
writer.AddAttribute(HtmlTextWriterAttribute.Id,this.UniqueID+
"_collapsedstate");
writer.RenderBeginTag(HtmlTextWriterTag.Input);
writer.RenderEndTag();

then I have the LoadPostData method as follows

public bool LoadPostData(string postDataKey,
System.Collections.Specialized.NameValueCollection postCollection)
{
// TODO: Add CorpPanel.LoadPostData implementation
Collapsed = Convert.ToBoolean(postCollection[this.UniqueID +
"_collapsedstate"]);
return false;
}

but it doesnt work. I have debuged the code and the loadpostdata
method doesnt even seem to fire on post back

Thanks
Amit

Teemu Keiski said:
Hi,

one way could be that at client-side the script writes the collapsed state
to an hidden input field, which your control reads on postback. You'd
probably want to implement postback datahandling for it
(IPostBackDataHandler interface). When it reads that say 'collapsed' is
posted within the hidden form field, it could set the Collapsed property to
true and when such is not posted, it of course sets the property to false.

Here is an example of IPostBackDataHandler:
http://msdn.microsoft.com/library/d...SystemWebUIIPostBackDataHandlerClassTopic.asp
(watch for wrapping)

--
Teemu Keiski
MCP, Microsoft MVP (ASP.NET), AspInsiders member
ASP.NET Forum Moderator, AspAlliance Columnist
http://blogs.aspadvice.com/joteke



Cappy said:
Hi.

I have built a custom control for a collapseable panel. The panel has
an image to which when clicked, fires a client side javascript
function that shows or hides the panel using DHTML. This javascript
funciton is registered to the page on render
This works fine for me except that when a post back occurs for any
reason, because the show/hide all occurs client side, the control
doesnt remember its collapsed state.

I think what I need to do is register an event to the collapse image
thats sets a collapsed propety which is stored in the view state.

I have a property as follows to hold the collapsed state.

[Bindable(true),
Category("Appearance"),
DefaultValue("false")]

public bool Collapsed
{
get
{
if(ViewState["Collapsed"] == null) return false;
return Convert.ToBoolean(ViewState["Collapsed"]);
}
set
{
ViewState["Collapsed"] = value;
}
}

What I need to know is.. how do I make my collapse image button set
this property. Currently.. my image button looks like this.

writer.AddAttribute(HtmlTextWriterAttribute.Name,
"Collapse"+this.UniqueID);
//If started collapsed, show expand image if available, else collapse
image.
if ((Collapsed) && (expandImg.Length > 0))
{
writer.AddAttribute(HtmlTextWriterAttribute.Src, expandImg);
}
else
{
writer.AddAttribute(HtmlTextWriterAttribute.Src, collapseImg);
}
//Javascript Onlick function to show or hide panel body
writer.AddAttribute(HtmlTextWriterAttribute.Onclick,"toggle('"+this.UniqueID
+
"_collapse','"+this.UniqueID+"')");

writer.AddAttribute("hspace","3");
//If mouse over add js
if (collapseOnImg.Length > 0)
{
writer.AddAttribute("onMouseOver", "ImgH.swap(this,'Collapse"+
this.UniqueID +"On');");
writer.AddAttribute("onMouseOut", "ImgH.fade(this,'Collapse"+
this.UniqueID +"Off');");
}
writer.RenderBeginTag(HtmlTextWriterTag.Img);
writer.RenderEndTag();

how do I make this image set the property of the control on click?

Regards
Amit
 
T

Teemu Keiski

Hi,

yes it probably doesn't because Panel itself isn't such control that it
would post something within Form post collection as such. You need manually
to ensure that postback data processing is applied for your control. You can
do it by calling.

Page.RegisterRequiresPostBack(this);

in OnPreRender method of your control. This adds your control to Page's list
of controls which require postback data processing and its LoadPostData will
be called when postback data processing occurs (by the Page).

--
Teemu Keiski
MCP, Microsoft MVP (ASP.NET), AspInsiders member
ASP.NET Forum Moderator, AspAlliance Columnist
http://blogs.aspadvice.com/joteke


Cappy said:
Hi thanks for your response.

I have been looking at what you suggested but still cant get it to
work.

I have done the javascript part that populates a hidden text box with
the current state.. but I can to the postback data handler part.

The control renders the hidden text box like this

writer.AddAttribute(HtmlTextWriterAttribute.Type, "hidden");
writer.AddAttribute(HtmlTextWriterAttribute.Value,
Collapsed.ToString());
writer.AddAttribute(HtmlTextWriterAttribute.Id,this.UniqueID+
"_collapsedstate");
writer.RenderBeginTag(HtmlTextWriterTag.Input);
writer.RenderEndTag();

then I have the LoadPostData method as follows

public bool LoadPostData(string postDataKey,
System.Collections.Specialized.NameValueCollection postCollection)
{
// TODO: Add CorpPanel.LoadPostData implementation
Collapsed = Convert.ToBoolean(postCollection[this.UniqueID +
"_collapsedstate"]);
return false;
}

but it doesnt work. I have debuged the code and the loadpostdata
method doesnt even seem to fire on post back

Thanks
Amit

Teemu Keiski said:
Hi,

one way could be that at client-side the script writes the collapsed state
to an hidden input field, which your control reads on postback. You'd
probably want to implement postback datahandling for it
(IPostBackDataHandler interface). When it reads that say 'collapsed' is
posted within the hidden form field, it could set the Collapsed property to
true and when such is not posted, it of course sets the property to false.

Here is an example of IPostBackDataHandler:
http://msdn.microsoft.com/library/d...SystemWebUIIPostBackDataHandlerClassTopic.asp
(watch for wrapping)

--
Teemu Keiski
MCP, Microsoft MVP (ASP.NET), AspInsiders member
ASP.NET Forum Moderator, AspAlliance Columnist
http://blogs.aspadvice.com/joteke



Cappy said:
Hi.

I have built a custom control for a collapseable panel. The panel has
an image to which when clicked, fires a client side javascript
function that shows or hides the panel using DHTML. This javascript
funciton is registered to the page on render
This works fine for me except that when a post back occurs for any
reason, because the show/hide all occurs client side, the control
doesnt remember its collapsed state.

I think what I need to do is register an event to the collapse image
thats sets a collapsed propety which is stored in the view state.

I have a property as follows to hold the collapsed state.

[Bindable(true),
Category("Appearance"),
DefaultValue("false")]

public bool Collapsed
{
get
{
if(ViewState["Collapsed"] == null) return false;
return Convert.ToBoolean(ViewState["Collapsed"]);
}
set
{
ViewState["Collapsed"] = value;
}
}

What I need to know is.. how do I make my collapse image button set
this property. Currently.. my image button looks like this.

writer.AddAttribute(HtmlTextWriterAttribute.Name,
"Collapse"+this.UniqueID);
//If started collapsed, show expand image if available, else collapse
image.
if ((Collapsed) && (expandImg.Length > 0))
{
writer.AddAttribute(HtmlTextWriterAttribute.Src, expandImg);
}
else
{
writer.AddAttribute(HtmlTextWriterAttribute.Src, collapseImg);
}
//Javascript Onlick function to show or hide panel body
writer.AddAttribute(HtmlTextWriterAttribute.Onclick,"toggle('"+this.UniqueID
+
"_collapse','"+this.UniqueID+"')");

writer.AddAttribute("hspace","3");
//If mouse over add js
if (collapseOnImg.Length > 0)
{
writer.AddAttribute("onMouseOver", "ImgH.swap(this,'Collapse"+
this.UniqueID +"On');");
writer.AddAttribute("onMouseOut", "ImgH.fade(this,'Collapse"+
this.UniqueID +"Off');");
}
writer.RenderBeginTag(HtmlTextWriterTag.Img);
writer.RenderEndTag();

how do I make this image set the property of the control on click?

Regards
Amit
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top