jsGanttImproved / jsgantt-improved

Javascript Gantt: fully featured gantt chart component built entirely with JS and CSS. No images or external libs required.
https://jsganttimproved.github.io/jsgantt-improved
Other
481 stars 249 forks source link

Keep scrolling position after editing #335

Open CSharpSeraph opened 3 years ago

CSharpSeraph commented 3 years ago

Hi,

great work guys, I'm using it for very big charts that take lots of space both vertical and horizontal. I made the date cells editable so the user can edit the durations live. The problem is that after editing a value, e.g. very low in the scroll top position, the chart gets rendered again and it pulls back the user to x:0 y:0. Is there a "clean" way to keep the scroll position after changing values?

thanks a lot!

mariohmol commented 3 years ago

Well, is possible to add a listener to keep saving the last x,y position.. and then when the render methods runs again, set this 2 values again on the scroll

CSharpSeraph commented 3 years ago

Hi! Yes, I tweaked the .js that way and it works just fine!

mariohmol commented 3 years ago

Awesome!! could u please share with us?

CSharpSeraph commented 3 years ago

Yup!

on

this.Draw = function () {

I have declared the variables:

    var CUR_SCROLL_TOP = 0; 
    var CUR_SCROLL_LEFT = 0;

after declaring the name of the very first container, but BEFORE creating it:

var newId = '#' + this.vDivId + 'gchartbody';

as first thing I save the positions. Please note that the very first time they won't be recorded because the main div does not exist yet, but after the first render I'll have an exising instance of the div to record the position, before the function destroys it and builds it again:

CUR_SCROLL_TOP = $(newId).scrollTop(); CUR_SCROLL_LEFT = $(newId).scrollLeft();

then at the very end, after :

this.drawComplete(vMinDate, vColWidth, bd);

I set the previous positions:

    if (CUR_SCROLL_TOP > 0) {

        $(newId).scrollTop(CUR_SCROLL_TOP);
    }
    if (CUR_SCROLL_LEFT > 0) {

$(newId).scrollLeft(CUR_SCROLL_LEFT);
    }