CODEWITHSUNDEEP
c#asp.net.net
AtitStack
AtitStack

Reputation: 31

How to disable auto-refresh on UpdatePanel?

Inside an UpdatePanel, I have many Checkboxes and I need to set its 'AutoPostback' to "true".

Issue:

Let's assume I have 100 Checkboxes in the panel and I am ticking #50 checbox then the control automatically goes to the top of the page and I have to come down again to tick another checkbox (say #60).

This is really annoying for the users and I am asked to stop this auto-scrolling so that they can stay at the same place and tick another checkboxes. How can I stop my webpage to go on top every time?

Is there any way to disable such behavior? I guess UpdatePanel could be the issue.. If so, how do I disable auto-refershing?

Upvotes: 1

Views: 3171

Answers (3)

Viriynchi
Viriynchi

Reputation: 1

add below in your page directive

MaintainScrollPositionOnPostback="true"

Upvotes: 0

tam tam
tam tam

Reputation: 1900

There is no built in way to do this. You will have to write a few Javascript functions to accomplish this:

Have a hidden field lets say 'hfScrollvalue' ( to save and reset scroll position )

  • Write a JS method "GetScrollPosition", to get the scroll position of the panel and save in your hidden field

  • Write a JS method "SetScrollPosition" to get the scroll position from the hidden field and set it back to the panel

  • You can then call the SetScrollPosition method when your request is end by adding a handler for this purpose

  • After the request ends the scroll position is set again by update panel. So you can give a bit delay in setting your value to the panel scroll position. You can do so by using setTimeout method of Javascript. so by this delay your saved position will be set on the panel after the ajax processing is done

    function GetScrollPosition() {
    document.getElementById('<%= hfScrollvalue.ClientID %>').value = document.getElementById('<%= Panel1.ClientID %>').scrollTop;

    }

    function SetScrollPosition() { 

            document.getElementById('<%= Panel1.ClientID %>').scrollTop = document.getElementById('<%= hfScrollvalue.ClientID %>').value; 
    } 
} 

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest); 

function EndRequest(sender, args) { 

    setTimeout('SetScrollPosition()', 60); 
}

    If you are working with a TextBox, that is inside an UpdatePanel, that is also tied to a Timer, then you can to something like this:

    Sys.Application.add_init(DownloadInit);

function DownloadInit(sender) {

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);

}

function SetScrollPosition() {

    var textArea = document.getElementById('<%=TextBox1.ClientID%>');

    textArea.scrollTop = textArea.scrollHeight;

}

function EndRequest(sender, args) {

     SetScrollPosition();

}

Upvotes: 0

Thomas Krantz
Thomas Krantz

Reputation: 226

Either stop using the UpdatePanel, or set the UpdateMode to Conditional.

If the UpdateMode property is set to Conditional, the UpdatePanel control’s content is updated when one of the following is true:

  • When the postback is caused by a trigger for that UpdatePanel control
  • When you explicitly call the UpdatePanel control’s Update method
  • When the UpdatePanel control is nested inside another UpdatePanel control and the parent panel is updated
  • When the ChildrenAsTriggers property is set to true and any child control of the UpdatePanel control causes a postback. Child controls of nested UpdatePanel controls do not cause an update to the outer UpdatePanel control unless they are explicitly defined as triggers for the parent panel.

Upvotes: 1

Related Questions