Is there an ability to keep the scroll position after Editing in the pop up modal?

Gulfsav1

I have implemented DataTables Editor and integrated it with the Select extension. If a user selects a row at the bottom of a result set, clicks the edit button, and submits the changes, DataTables reloads the data and returns the scrolling back to the top. I was able to use Scroller for inline editing to keep scroll position but not with the Edit modal. Is there a way to keep position of the scroll after editing in the pop up modal?

kthorngren

Are you using ajax.reload() for this?

If so, there is a resetPaging parameter you can set false to stay on the current page. For example: table.ajax.reload( null, false );

Kevin

Gulfsav1

The issue isn't with staying on the current page, it's staying at a certain scroll position on the current page. If I have a 1000 rows on the page and I edit row 1000 by way of the "Edit" button, the table reload brings me to the top of the table instead of keeping me at the entry I was at (row 1000).

cudzich09

@Gulfsav1

Here's one solution I'm using with two instances of editor. Local instance that makes temporarily save edits and an instance with serverside processing. A workaround for queued edits. I had the same problem once I submitted the queued edits to the server, local instance would reset to the top of the table after re-draw.

You can tap into an event before an edit, obtain the scrolling position, and tap into post edit event to update the current scrolling position.

Step 1:
I'd imagine the preOpen event fires before your form is populated, so listen for the event and obtain scrollingTop position.
(assuming your Editor instance is referenced by editor var and dataTable instance is referenced by table)

editor.on('preOpen', function() {
// Retrieve Scrolling container from DOM inside dataTables container
scrollingContainer = $(table.table().node()).parent('div.dataTables_scrollBody');
// Retrieve scrollTop position
scrollTop = scrollingContainer.scrollTop();

Step 2:
Once the user submits changes in the form, tap into the onSubmitComplete event.
In there you can update the scrolling position of the table.

// Reset Scroll position after submitting data to server on draw
editor.on('submitComplete', function() {
table.on( "draw", function( settings ) {
scrollingContainer.scrollTop(scrollTop);
} );
} );

Make the scrollTop a global variable, available anywhere in the js file. Do not declare it inside the function, the variable will be limited to its local scope and not accessible anywhere else.

Hope that helps.

allan

What styling framework are you using? I've noticed some models will cause the page to jump back to the top when closed before.

Can you give me a link to the page showing the issue?

Thanks,
Allan

Gulfsav1

@cudzich09 helped me realize my problem. The code that was posted worked well. I also had some columns where the text was wrapping and Scroller wasn't able to keep my position due to that. I ended up using some css to make sure all my columns had text that did not wrap and that fixed my issue with editing in the modal.

scottmccosh

@cudzich09 This post helped me a lot! Thanks!