Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Chris Stammen
135
UltraWebListbar expand/collapse
posted

Hi,

In my stripped down aspx page below, i have a listbar with a button in the first (and only) group template. initially the group is "not" expanded (Expanded=false").  i have a client side event handler that toggles the group expand/collapse.  so, clicking the group expands and collapses ok on the client.  After expanding the group, click the button contol in the template to cause a postback and the group remains "expanded".  however, if you click the button in the group template again (a second time), you will see that the group becomes "collapsed" - it should have remained "expanded" just like the first click of the button.  Note that EnableViewState="false" on the listbar.  When I set EnableViewState="true", the expand/collapse is remembered between postbacks.

Q: How do I make the listbar maintain its expand/collapse state across postbacks with EnableViewState="false"? 

Q: When is it appropriate to set EnableViewState="false"?

Q: Is there anything special to consider if place an <asp:UpdatePanel> around all the markup?

Q: Also, should I be using the WARP instead of the UpdatePanel?

(sorry for so many questions)

 thank you!

-chris

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Listbar1.aspx.cs" Inherits="Listbar1" %>

<%@ Register Assembly="Infragistics35.WebUI.UltraWebListbar.v8.3, Version=8.3.20083.1009, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
    Namespace="Infragistics.WebUI.UltraWebListbar" TagPrefix="iglbar" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>

    <script type="text/javascript">
        String.prototype.endsWith = function(s) {
            return (this.match(s + "$") == s);
        }
        function UltraWebListbar1_HeaderClick(oListBar, oGroup, oEvent) {
            var tablegroup0 = document.getElementById(oListBar.Groups[0].Id + "_group");
            if (oGroup.Id.endsWith("Group_0")) {
                if (oGroup.getExpanded()) {
                    oGroup.setExpanded(false);
                } else {
                    oGroup.setExpanded(true);
                    tablegroup0.style.display = "";
                }
            }
        }
    </script>

    <form id="form1" runat="server">
    <div>
        <iglbar:UltraWebListbar ID="UltraWebListbar1" runat="server" EnableViewState="false"
            StyleSetName="Alteer" Width="100%" Height="100%" BarWidth="100%" BorderStyle="None"
            BorderWidth="0px" MergeStyles="True" ViewType="ExplorerBar" GroupSpacing="2px"
            GroupExpandEffect="Slide" Font-Size="11pt" ItemIconStyle="Small" AllowGroupMoving="GroupSwapping"
            HeaderClickAction="None">
            <DefaultGroupStyle BackColor="White" BorderStyle="None" BorderWidth="0px" Font-Size="9pt"
                Font-Names="tahoma" BorderColor="Silver">
            </DefaultGroupStyle>
            <DefaultGroupHeaderAppearance>
                <CollapsedAppearance>
                    <Style Height="22px" Font-Size="11pt" Font-Names="Tahoma" Font-Bold="true" BackColor="#D4D0C8" />
                </CollapsedAppearance>
                <ExpandedAppearance>
                    <Style Height="22px" Font-Size="11pt" Font-Names="Tahoma" Font-Bold="true" BackColor="#D4D0C8" />
                </ExpandedAppearance>
            </DefaultGroupHeaderAppearance>
            <Groups>
                <iglbar:Group Expanded="false" Text="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Panel One">
                    <Template>
                        <table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
                            <tr>
                                <td align="right">
                                    Testing Panel One...<br />
                                </td>
                            </tr>
                        </table>
                        <asp:Button ID="Button1" runat="server" EnableViewState="false" Text="Button" OnClick="Button1_Click" /><br />
                        Testing Panel One...<br />
                        Testing Panel One...<br />
                        Testing Panel One...<br />
                        Testing Panel One...<br />
                    </Template>
                    <HeaderAppearance>
                        <CollapsedAppearance>
                            <Images>
                                <ExpansionIndicatorImage Url="~/images/expand.gif"></ExpansionIndicatorImage>
                                <HeaderImage Url="~/images/RenewalRequest/pharmacy.gif" />
                            </Images>
                        </CollapsedAppearance>
                        <ExpandedAppearance>
                            <Images>
                                <ExpansionIndicatorImage Url="~/images/collapse.gif"></ExpansionIndicatorImage>
                                <HeaderImage Url="~/images/RenewalRequest/pharmacy.gif" />
                            </Images>
                        </ExpandedAppearance>
                    </HeaderAppearance>
                </iglbar:Group>
            </Groups>
            <ClientSideEvents HeaderClick="UltraWebListbar1_HeaderClick" />
        </iglbar:UltraWebListbar>
    </div>
    </form>
</body>
</html>

  • 45049
    posted

    stammencm said:
    if you click the button in the group template again (a second time), you will see that the group becomes "collapsed"

    Since you've disabled ViewState, this result is expected.  On the first click of the button, WebListbar sends back an event notification to the server stating that the group was expanded.  On the second click, no such event notification is sent; in the absence of any other instructions, it will revert back to the state it was when the page was first rendered, and thus becomes collapsed.

    stammencm said:
    Q: How do I make the listbar maintain its expand/collapse state across postbacks with EnableViewState="false"? 

    You would need some way to persist the expanded state of each group across postbacks.  This would generally entail using Session variables, and is likely more work than it is worth when compared to setting EnableViewState to true.

    stammencm said:
    Q: When is it appropriate to set EnableViewState="false"?

    This is a broader question that applies to many ASP.NET controls, not just Infragistics controls.  Whenever you need a control to "rembember" something that has been done to it across multiple postbacks, and whenever that control doesn't use some other state management approach to handle "remembering" this (such as storing data into a database or using Session variables), you want to set EnableViewState to true.  You set EnableViewState to false when you use other methods to make sure that your controls remember their state, and doing so can reduce the amount of HTML that is emitted when your page is rendered.

    Depending on what's on your page and the behavior you need, you might be able to turn off ViewState for individual controls, even if you need to keep using ViewState for others.  To do this, you need to make sure that EnableViewState is set to true on any container controls (including the page itself) that contain any controls where EnableViewState must also be set to true.  In other words, if you set EnableViewState to false on the page, any controls on the page will not use ViewState, regardless of the value of their EnableViewState property.

    stammencm said:
    Q: Is there anything special to consider if place an <asp:UpdatePanel> around all the markup?

    Q: Also, should I be using the WARP instead of the UpdatePanel?

    Not to my knowledge, in either case.  Wrapping an AJAX panel (whether WARP or UpdatePanel) won't change the behavior of a control with respect to its ViewState.