Professional Web Applications Themes

viewstate for collapsable panel control - ASP.NET Building Controls

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. ...

  1. #1

    Default viewstate for collapsable panel control

    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.Onclic k,"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
    Cappy Guest

  2. #2

    Default Re: viewstate for collapsable panel control

    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:
    [url]http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpref/html/frlrfSystemWebUIIPostBackDataHandlerClassTopic.asp[/url]
    (watch for wrapping)

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



    "Cappy" <amitc4ppy.net> wrote in message
    news:2f79b0ae.0406230156.4651a521posting.google.c om...
    > 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.Onclic k,"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

    Teemu Keiski Guest

  3. #3

    Default Re: viewstate for collapsable panel control

    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,thi s.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" <jotekeaspalliance.com> wrote in message
    news:<u0K59KVWEHA.1164tk2msftngp13.phx.gbl>...
    > 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:
    > [url]http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpref/html/frlrfSystemWebUIIPostBackDataHandlerClassTopic.asp[/url]
    > (watch for wrapping)
    >
    > --
    > Teemu Keiski
    > MCP, Microsoft MVP (ASP.NET), AspInsiders member
    > ASP.NET Forum Moderator, AspAlliance Columnist
    > [url]http://blogs.aspadvice.com/joteke[/url]
    >
    >
    >
    > "Cappy" <amitc4ppy.net> wrote in message
    > news:2f79b0ae.0406230156.4651a521posting.google.c om...
    > > 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.Onclic k,"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
    Cappy Guest

  4. #4

    Default Re: viewstate for collapsable panel control

    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
    [url]http://blogs.aspadvice.com/joteke[/url]


    "Cappy" <amitc4ppy.net> wrote in message
    news:2f79b0ae.0406240758.8bc10f6posting.google.co m...
    > 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,thi s.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" <jotekeaspalliance.com> wrote in message
    > news:<u0K59KVWEHA.1164tk2msftngp13.phx.gbl>...
    > > 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:
    > >
    [url]http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpref/html/frlrfSystemWebUIIPostBackDataHandlerClassTopic.asp[/url]
    > > (watch for wrapping)
    > >
    > > --
    > > Teemu Keiski
    > > MCP, Microsoft MVP (ASP.NET), AspInsiders member
    > > ASP.NET Forum Moderator, AspAlliance Columnist
    > > [url]http://blogs.aspadvice.com/joteke[/url]
    > >
    > >
    > >
    > > "Cappy" <amitc4ppy.net> wrote in message
    > > news:2f79b0ae.0406230156.4651a521posting.google.c om...
    > > > 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.Onclic k,"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

    Teemu Keiski Guest

Similar Threads

  1. Failed to load viewstate. The control tree into which viewstate...
    By Josema in forum ASP.NET Building Controls
    Replies: 5
    Last Post: April 13th, 07:48 AM
  2. viewstate and custom control
    By dave in forum ASP.NET Building Controls
    Replies: 1
    Last Post: July 5th, 08:57 AM
  3. Nested control in Web Custom Control and ViewState
    By Ryan Jordan in forum ASP.NET Building Controls
    Replies: 1
    Last Post: September 13th, 01:36 PM
  4. dynamic control and viewState
    By Teemu Keiski in forum ASP.NET Building Controls
    Replies: 1
    Last Post: September 11th, 10:51 AM
  5. Page and Control ViewState
    By Eric Sullender in forum ASP.NET Building Controls
    Replies: 4
    Last Post: October 10th, 07:20 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139