locked
Need help: maintaining the panel control scrollbar position. RRS feed

  • Question

  • User975977963 posted

    Hi all,

    Is it possible to maintain the panel1 control scrollbar position?

    I have photo gallery developed in ASP.net page, in the html page the panel1 control is configured with horizontal scrollbars, when I select an image from far right side of panel1 the scrollbar position resets back to the left.

    I tried the following code SmartNavigation="True" into page directive. But that did not work as expected. 

    I also tried java script to maintain the scrollbar position but that cause the panel1 not to load the image to panel2.

    javascript:

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <script type="text/javascript" >
               var xPos, yPos;
               var prm = Sys.WebForms.PageRequestManager.getInstance();
               prm.add_beginRequest(BeginRequestHandler);
               prm.add_endRequest(EndRequestHandler);
               function BeginRequestHandler(sender, args) {
                   xPos = document.getElementById("<%=Panel1.ClientID %>").scrollLeft;
                   yPos = document.getElementById("<%=Panel1.ClientID %>").scrollTop;
               }
               function EndRequestHandler(sender, args) {
                   document.getElementById("<%=Panel1.ClientID %>").scrollLeft = xPos;
                   document.getElementById("<%=Panel1.ClientID %>").scrollTop = yPos;
               }
     </script>

    here is my aspx page:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <!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>Photo Gallery</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div align="center">
        
            <asp:FileUpload ID="FileUpload1" runat="server" />
            <asp:Button ID="btnUpload" runat="server" onclick="btnUpload_Click" 
                Text="Upload" />
            <br />
            <br />
            <asp:Panel ID="Panel2" runat="server" Width="800px" Height="500px" 
                BorderStyle="Solid" BorderColor="Navy">
                <asp:Image ID="Image1" runat="server" Height="500px" Width="800px" />
            </asp:Panel>
            <asp:Label ID="LblFileName" runat="server" Font-Bold="True" ForeColor="Navy"></asp:Label>
            <br />
            <asp:Panel ID="Panel1" runat="server" BorderColor="Navy" BorderStyle="Solid" Height="130px" 
                ScrollBars="Horizontal" Width="900px" Wrap="False">
            </asp:Panel>
    
        </div>
        </form>
    </body>
    </html>
    

    Code Page:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.IO;
    
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           UploadFile();
        }
        protected void btnUpload_Click(object sender, EventArgs e)
        {
            if (FileUpload1.HasFile)
            {
                string fileName = FileUpload1.FileName;
                FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Images/" + fileName));
            }
            Response.Redirect("~/Default.aspx");
        }
    
        private void UploadFile()
        {
            foreach (string strFileName in Directory.GetFiles(Server.MapPath("~/Images/")))
            {
                ImageButton imageButton = new ImageButton();
                FileInfo fileInfo = new FileInfo(strFileName);
                imageButton.ImageUrl = "~/Images/" + fileInfo.Name;
                imageButton.Width = Unit.Pixel(100);
                imageButton.Height = Unit.Pixel(100);
                imageButton.Style.Add("padding", "5px");
                imageButton.Click += new ImageClickEventHandler(imageButton_Click);
                Panel1.Controls.Add(imageButton);
            }
        }
        void imageButton_Click(object sender, ImageClickEventArgs e)
        {
            Image1.ImageUrl = (((ImageButton)sender).ImageUrl);
            var image = Path.GetFileName(((ImageButton)sender).ImageUrl.ToString());
            LblFileName.Text = image;
        }
    
    }

    I appreciate any help.

    Thanks in advance.

    Monday, July 27, 2015 12:05 PM

Answers

  • User1724605321 posted

    Hi Matt ,

    Is it possible to maintain the panel1 control scrollbar position?

    Please try to add hidden input tag to store/restore the scrollLeft/scrollTop value of panel , and when page load you could restore the position of panel ,and set hidden value when scroll the scrollbar by setting "onscroll" function .Code below is for your reference:

     <script type="text/javascript">
            function Pageload() {
                hid1 = document.getElementById("HiddenField1");
                hid2 = document.getElementById("HiddenField2");         
            }
            function SetPosition() {
                hid1.value = document.getElementById("<%=Panel1.ClientID %>").scrollLeft;
                hid2.value = document.getElementById("<%=Panel1.ClientID %>").scrollTop;
            }
            function GetPosition() {
                document.getElementById("<%=Panel1.ClientID %>").scrollLeft = hid1.value;
                document.getElementById("<%=Panel1.ClientID %>").scrollTop = hid2.value;
            }
        </script>
    <body onload="Pageload();GetPosition();">
        <form id="form1" runat="server">
            <div align="center">
    
                <asp:FileUpload ID="FileUpload1" runat="server" />
                <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click"
                    Text="Upload" />
                <br />
                <br />
                <asp:Panel ID="Panel2" runat="server" Width="800px" Height="500px"
                    BorderStyle="Solid" BorderColor="Navy">
                    <asp:Image ID="Image1" runat="server" Height="500px" Width="800px" />
                </asp:Panel>
                <asp:Label ID="LblFileName" runat="server" Font-Bold="True" ForeColor="Navy"></asp:Label>
                <br />
                <asp:Panel ID="Panel1" runat="server" BorderColor="Navy" BorderStyle="Solid" Height="130px"
                    ScrollBars="Horizontal" Width="900px" onscroll="SetPosition();">
                    111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                </asp:Panel>
    
            </div>
            <asp:Button ID="Button1" runat="server" Text="Button" />
            <asp:HiddenField ID="HiddenField1" runat="server" />
            <asp:HiddenField ID="HiddenField2" runat="server" />
            <div>
            </div>
        </form>
    </body>

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 28, 2015 3:49 AM