Remove From My Forums

Need help: maintaining the panel control scrollbar position.

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

Answered by:

Need help: maintaining the panel control scrollbar position.

Question

Answers