Maintain scroll position checkbox list inside update panel with popup control extender Asp.net?

Question

I am trying to maintain scroll position of checkbox list inside update panel.

I have used textbox , panel and popup extender to built my own control that extends textbox by using panel on click and checkbox list inside panel when mark check box item select in text box but its scroll position do not maintain ?

My code:

<div>
    <asp:UpdatePanel ID="updatepanel1" runat="server" RenderMode="Inline">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:PopupControlExtender ID="TextBox1_PopupControlExtender" runat="server" DynamicServicePath=""
                Enabled="True" ExtenderControlID="" TargetControlID="TextBox1" PopupControlID="Panel1"
                OffsetY="22">
            </asp:PopupControlExtender>
            <asp:Panel ID="Panel1" runat="server" Height="116px" Width="145px" BorderStyle="Solid"
                BorderWidth="2px" Direction="LeftToRight" ScrollBars="Auto" BackColor="#CCCCCC"
                Style="display:none ">
                <asp:CheckBoxList ID="CheckBoxList1" runat="server" DataTextField="holiday_name"
                    DataValueField="holiday_name" AutoPostBack="True" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged" > 
                </asp:CheckBoxList>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

I tried it by using this post,

Maintain Panel Scroll Position On Partial Postback ASP.NET

I used script like,

<script type="text/javascript">
    var xpos, ypos;
    var pra = Sys.WebForms.PageRequestManager.getInstance();

    function BeginRequestHandler(sender, args) {
        alert("hello");
        if ($get('<%=CheckBoxList1.ClientID%>') != null) {
            xpos = $get('<%=CheckBoxList1.ClientID%>').scrollLeft;
            ypos = $get('<%=CheckBoxList1.ClientID%>').scrollTop;
        }
    }

    function EndRequestHandler(sender, args) {
        if ($get('<%=CheckBoxList1.ClientID%>') != null) {
            xpos = $get('<%=CheckBoxList1.ClientID%>').scrollLeft = xpos;
            ypos = $get('<%=CheckBoxList1.ClientID%>').scrollTop = ypos;
        }
    }

    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);
</script>

...but this script not working fine it is not alerting "Hello" perhaps its not calling methods ??

Hoping for suggestions as I have been searching and trying to resolve this issue.

Thanks

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

The script have a bug. You define it as pra and use the prm, change it to:

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);

Also use the window.scrollTo(positionX, positionY); to make the position and the full code will be:

<script type="text/javascript">
    var xpos, ypos;
    var prm = Sys.WebForms.PageRequestManager.getInstance();

    function BeginRequestHandler(sender, args) {
        alert("hello");
        if ($get('<%=CheckBoxList1.ClientID%>') != null) {
            xpos = $get('<%=CheckBoxList1.ClientID%>').offsetLeft;
            ypos = $get('<%=CheckBoxList1.ClientID%>').scrollTop;
        }
    }

    function EndRequestHandler(sender, args) {
        if ($get('<%=CheckBoxList1.ClientID%>') != null) {
            xpos = $get('<%=CheckBoxList1.ClientID%>').offsetLeft= xpos;
            ypos = $get('<%=CheckBoxList1.ClientID%>').scrollTop = ypos;

            window.scrollTo(xpos, ypos);
        }
    }

    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);
</script>

and normally the script can do the work.

Open the debug tools of the browser, to see if you have any other javasript error.

You can also try the function to scroll from this answer https://stackoverflow.com/a/6356328/159270

edited May 23 '17 at 10:26

Community

1
1

answered Sep 09 '14 at 06:22

Aristos

66,005
16
114
150

even not alerting hello – user3664724 Sep 09 '14 at 06:32
Hello is not alerting and i have used you update answer but it is not working – user3664724 Sep 09 '14 at 06:35
i am running it in IE so that is must show error if there is any in JS but it is not mentioning any error in js ? – user3664724 Sep 09 '14 at 06:36
Now it is printing hello but do not maintain position :( – user3664724 Sep 09 '14 at 07:44
1

@user3664724 use the script from here http://stackoverflow.com/questions/6355482/scroll-to-a-specific-position-on-a-page-using-javascript-jquery/6356328#6356328 to move it... – Aristos Sep 09 '14 at 09:11
can you please tell me how to use this script with my mentioned script ? – user3664724 Sep 10 '14 at 06:00
@user3664724 Ok, So please correct the answer with the final solution. I can not help you more as you ask, because I do not have the full solution to check what you try. – Aristos Sep 10 '14 at 07:12
i update it but i am having one issue hat is it is working in Mozilla but not in IE :( – user3664724 Sep 10 '14 at 07:39
@user3664724 Update panel is not move the page.... is update there you are, where do you try to move ? maybe to some other location ? – Aristos Sep 10 '14 at 08:04
Just adding my cents here because I recently had the same problem. Make sure you are using the DIV id, not the checkboxliist id. Also there's no reason to use the window.scrollTo if you simply want to use it for the checkboxlist nad not scroll the entire page down. – Ghost Oct 21 '19 at 12:33

Maintain scroll position checkbox list inside update panel with popup control extender Asp.net?

1 Answers1