viewstate for collapsable panel control

Discussion in 'ASP .Net Building Controls' started by Cappy, Jun 23, 2004.

  1. Cappy

    Cappy Guest

    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
    Cappy, Jun 23, 2004
    #1
    1. Advertising

  2. Cappy

    Teemu Keiski Guest

    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" <> wrote in message
    news:...
    > 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
    Teemu Keiski, Jun 23, 2004
    #2
    1. Advertising

  3. Cappy

    Cappy Guest

    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" <> wrote in message
    news:<>...
    > 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" <> wrote in message
    > news:...
    > > 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
    Cappy, Jun 24, 2004
    #3
  4. Cappy

    Teemu Keiski Guest

    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" <> wrote in message
    news:...
    > 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" <> wrote in message
    > news:<>...
    > > 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" <> wrote in message
    > > news:...
    > > > 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
    Teemu Keiski, Jun 24, 2004
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Brian Henry

    collapsable lists?

    Brian Henry, Mar 30, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    397
    Joseph Byrns
    Mar 31, 2005
  2. Rlrcstr

    Collapsable paragraphs...

    Rlrcstr, May 16, 2005, in forum: ASP .Net
    Replies:
    7
    Views:
    700
    Rlrcstr
    May 17, 2005
  3. Replies:
    2
    Views:
    446
    Andy Dingley
    May 20, 2005
  4. Ulf Meinhardt
    Replies:
    0
    Views:
    609
    Ulf Meinhardt
    Jul 7, 2009
  5. Robin Wenger
    Replies:
    0
    Views:
    2,927
    Robin Wenger
    Aug 18, 2011
Loading...

Share This Page