Angular-gridster2: Scroll to added item

[Kalemstorm94]

Hello!

Is it possible to scroll the page to a new added item?

[tiberiuzuld]

Hi @Kalemstorm94 ,
Currently there is no feature to do this.
You can look over the browser api to scroll into view.
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

[Kalemstorm94]

It doesn't work very well. I had the same problem like here 1 and I've resolved the issue by setting the overflowand heightto initial. It still displays pretty well the dashboard. When I add an item at the bottom of the dashboard, I try to scroll down like this public addItem() { auxAddItem(); window.scrollTo(0, 1000000); }

The auxAddItem() function adds the new item, but this is added only after I do the scrollTo. I've tried to insert a wait() function but I still got the same result. It scrolls down first, then the item is added. In conclusion I scroll down to the last element on the page, then I add a new last element, so I don't get the desired scroll effect.

[tiberiuzuld]

Try to scroll after the itemInitCallback is called.

[Kalemstorm94]

Still the same behaviour with public itemCallback(item, itemComponent) { if (this.forScrolling == true) { window.scrollTo(0, 1000000); this.forScrolling = false; } } and itemInitCallback: this.itemCallback.bind(this). The new item is created after the scrollTo function.

[tiberiuzuld]

Try:

itemInitCallback: ()=>{
     setTimeout(()=>{
      window.scrollTo(0, 1000000);
    }, 0);
}

itemInitCallback is called on ngOnInit which is called before the template is inserted in dom by angular.
ngAfterViewInit is called after the template was inserted in dom.

Maybe in the future should test to maybe move the components init in ngAfterViewInit, even though I don't think it will work the best.

[Kalemstorm94]

If I pass this.options.itemInitCallback = () => { setTimeout(() => { window.scrollTo(0, 1000000); },100); } inside the addItem function, it will work only after I add the second element. For the first it does nothing. If i pass the same function to itemInitCallback in ngOnInit, the page will be loaded at it's bottom. If i return to top and add a new element it will work for all of them. I think it may be a problem with the page height, because the real bottom is somewhere near the top, but this was the only way to get rid of the issue I've mentioned in the second comment.

[tiberiuzuld]

Ok will look into this, maybe will try to implement this in the library code.

But no promises, don't know if it will work.

[Kalemstorm94]

Thank you! 👍

[tiberiuzuld]

Hi @Kalemstorm94 ,
Added the option to scroll in v4.3.0

Let me know if works as expected.

Thanks

[Kalemstorm94]

I'll let you know in the week-end. I've been busy this week and I've seen
your post too late. Thank you!

On Sun, Dec 17, 2017 at 5:10 PM, Tiberiu Zuld [e-mail]
wrote:

Hi @Kalemstorm94 https://github.com/kalemstorm94 ,
Added the option to scroll in v4.3.0

Let me know if works as expected.

Thanks

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/tiberiuzuld/angular-gridster2/issues/189#issuecomment-352262325,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWCUv-yWnum3vPqxfqBqVpoIHaYftiAwks5tBS7JgaJpZM4RAUoB
.

[Kalemstorm94]

I've tested it now and it works perfectly. Thank you again!