Forums Ultimate UI for ASP.NET Web Forms
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
Giorgio
120
Saving dimension of SplitterPane among postback
posted

Hi, is there a way to keep the size of the SplitterPane after a user resized among postbacks?

 

If a user collapse/expand a pane or moves the splitbar, after a postback these settings are lost and the properties setted at design time/in code behind are applied. Is there a way to preserve them?

 

Thank You

 

Claudio Mellina

Parents
  • 19693
    Suggested Answer
    posted

    Hello Claudio,

    Thank you for posting in our forums.

    By defaullt the SplitterPane keeps its size during the post backs.

    You should sets its size only during the initial load for the purpose (!IsPostBack section)

    protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack){

                WebSplitter1.Panes[0].Size = new Unit(30, UnitType.Pixel);

                WebSplitter1.Panes[1].Size = new Unit(70, UnitType.Pixel);

                WebSplitter1.Panes[0].Collapsed = true;

                WebSplitter1.Panes[1].ScrollBars = Infragistics.Web.UI.ContentOverflow.Hidden;

                WebSplitter1.Panes[1].EnableRelativeLayout = true;

                ……..

            }

        }

    Another option is to keep the clientHeight/clientWidth and restore them in onLoad on the client.

    The below code snippet shows how to keep the size in % during resize

      <script type="text/javascript">

          function pageOnLoad()

          {

                $addHandler(window, 'resize', onResize);

          }

          function onResize()

          {

                var splitter = $find('<%=webSplitter.ClientID%>');

                var width = splitter.get_element().clientWidth;

                var pane1 = splitter.getPaneAt(0);

                pane1.set_size(width * 0.7);

                var splitterChild = $find('<%=webVerticalSplitter.ClientID%>');

                var height = splitter.get_element().clientHeight;

                var paneChild1 = splitterChild.getPaneAt(0);

                paneChild1.set_size(height * 0.3);

          }

      </script>

    </head>

    <body onload="pageOnLoad()">

        <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>  

           <ig:WebSplitter ID="webSplitter" runat="server" EnableViewState="true" DynamicResize="true" ResizeWithBrowser="true"

    Please let me know if it helps.

Reply Children