Reset scroll to top when refreshing content

[Daniel]

Hi!

I have a Dialog with a dynamic content. The issue that I have is with the scroll of the Dialog. If in the previous content the scroll was on bottom and then, I open a new Dialog with a new content, the scroll still down. Do you know how to restart the scroll or put it on top? I tried several options with jquery inside the content but it doesn't work.

Thanks, regards!

[Indrajith Srinivasan]

Hi Daniel,

Greetings from Syncfusion support, 

 

We have validated your reported query. Since the contents are alone changed dynamically, the scroll is maintained in the dialog. We suggest you to call the refresh method of the dialog, once the content is changed to reset the scroll position. Check the below code block for reference. 

 

 

ajax.onSuccess = function(data) { 

    $(“#dialogContent”).html(data); 

    dialogObj.refresh();
     dialogObj.show(); 

} 

 

Can you please try the above solution and let us know if it meets your requirements? 

 

Regards, 

Indrajith 

[Daniel]

Hi!

I tried the "refresh" method but is not working, it's throwing me an error when adding this method:

This is the extra line:

Any idea why is this error? I'm using the version 18.2.0.56

Thanks, regards!

[Indrajith Srinivasan]

Hi Daniel,

Good day to you,

Thanks for the update. We suspect that with the dialog refresh method call, the inner components are not rendered properly hence the reported script error occurs. We suggest you to remove the previously suggested refresh method call to reset the scroll. Also can you try the below solution of resetting the scroll to resolve the reported issue. We have also prepared a sample that tries to meet your requirements. 

 

 

ajax.onSuccess = function(data) {  

    $(“#dialogContent”).html(data);  

    document.querySelector('.e-dialog .e-dlg-content').scrollTop = 0;
    dialogObj.show();  

}  

 

 

In the below sample the following are configured,  

• In the opened dialog, scroll the content to end.
• Now click on the button in the header “Change Content”.
• Now the content will be updated with the scroll being reset.

 

Sample:  https://www.syncfusion.com/downloads/support/forum/157952/ze/Dialog_scroll_reset1560701506  

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[Daniel]

Hi!

Thanks for the reply. I tried it and is not working. I saw the attached example but is not exacly my case to replicate the issue.

I attached a new solution based on the attached one with some changes to replicate the same case I have.

In the below sample the following are configured: 

* In the opened dialog, scroll the content to end.

* Close the dialog and open again

* The scroll of the content does not reset. Still at same position.

Thanks, regards!

Attachment: Dialog_scroll_resetEdited_2df9c36f.zip

[Indrajith Srinivasan]

Hi Daniel, 

 

The suggested solution will work for dynamic content update with dialog as opened. In order to achieve your use case with the already provided solution, we suggest you to call the dialog content scroll reset in the open event of the dialog. Check the below code blocks for reference. 

 

 

@Html.EJS().Dialog("dialog").Open("onOpen").Render() 

 

<script> 

 

   function onOpen() { 

        document.querySelector('.e-dialog .e-dlg-content').scrollTop = 0; 

    } 

 

</script> 

 

Please get back to us if you face any difficulties, 

 

Regards, 

Indrajith 

[Daniel]

Hi!

It works with the "Open" method but I see a strong jump when the scroll position is reset from the bottom to the top. Is there a way to restart the scroll before the "dialog" opens? Or maybe to create a new "dialog" instance, so always start from the top.

Thanks, regards!

[Indrajith Srinivasan]

Hi Daniel, 

 

We have validated your reported query. In the Dialog beforeOpen and the close events the ScrollTop is set to zero by default before/after the dialog is shown/hided. It works in the following events open and beforeClose events. With the below suggested solution the scroll will be reset before closing the dialog. 

  

  

@Html.EJS().Dialog("dialog").BeforeClose("onClose").Render()  

  

<script>  

  

   function onClose() {  

        document.querySelector('.e-dialog .e-dlg-content').scrollTop = 0;  

    }  

  

</script>  

  

Regards, 

Indrajith 

[Daniel]

Hi! With the last solution I still see the "ugly" movement when resetting the scroll position before closing the dialog.

I found a way to do it (hiding the movement)... using this from the DynamicContent and loading this content with "html" method.

$(document).ready(function () {

        $('#dialog_dialog-content').scrollTop(0);

});

Regards!

[Indrajith Srinivasan]

Hi Daniel,

Thanks for the update, 

 

We are glad that you found a way to resolve the reported issue. Please get back to us if you need any further assistance. 

 

Regards, 

Indrajith