q-Tree auto-scroll to last node

studio511

I have a dynamic tree that is auto-building its nodes when it receives a data.
After creating like 20 nodes, my display remains at the first node while I have to scroll down on my app page to see the end of the tree.
Is there any way that after a tree is built, the tree auto-focus to the last node?

studio511

Could this be scroll-observer instead?

yo

@studio511 yeah I think using observers is the right way to do it !

Can you post your code of the dynamic q-tree replaced by dynamic lorem ipsum ?

Ps : after thinking 30 seconds, observer is an observer so no you can’t do it with it.

I have found the property scroll-target of the q-virtual-scroll.
Maybe you could dynamically create and id to the last html element and del the last one when you create a new tree element. Then scroll-target to it.
Or simply create an empty div/span with end id, but maybe it could create weird display.
Or you could using the last element of a class you created for it.

There’s also Scroll position

When I’ll be on my computer, I’ll try few stuff, that’s if you can share me the code it will be cool !

studio511

hi @yo currently i’m not using the scroll component, the scroll bar was self-created when the page gets extended so when that happens, a class = ‘q-panel-scroll’ got created…
So I’ll thinking if I really needed to include a scroll component in order to control it…
and regarding the dynamics of q-tree, conceptually, I created a computed property to watch the nodes. managed by a delay, I updated the nodes every few seconds and the tree rebuilds itself when it receives the updated nodes

yo

If you don’t want to use a scroll area you can do a dom search to get the scroll area inside your page, then you add a ref argument called ‘myScroll’ (if doesn’t exist yet), then do this after adding a new tree element (if the scroll exist) :

this.$refs.myScroll.setScrollPosition(999999)

Maybe it won’t work cause ref depending on Vue, then use a common Dom id to get the element.

But I don’t think dom manipulation works for mobile (maybe I’m wrong)

studio511

@yo thanks mate! I think you just simplified my problem. I was thinking too deep into how I could control the scroll position until your suggestion. Yes it works for me now. Defaulting the scroll position at the end really worked

yo

@studio511 you’re welcome

pintaf

Hey.

I had more or less the same problem, I wanted to scroll a specific entry of my Qtree.
I followed the instructions here

but I discovered that it was scrolling only a little bit. This is because el.offsetTop return the offset to direct parent.

So I adapted the function a littlebit:

function scrollToElement (el) {
  const target = getScrollTarget(el);
  let offset = 0;
  while (el.id !== "YOURQTREE_ID") {
    offset += el.offsetTop;
    el = el.offsetParent;
  }
  const duration = 1000;
  setScrollPosition(target, offset, duration);
}

in order to have it working, you need to define an id on the Qtree and also the class “scroll” or others such as defined here

and then call this function when you need it:

scrollToElement(YOUR_ELEMENT);

The only bug I see is when you’ve scrolled to the place, if you call the function again it doesn’t work perfectly.
But it’s maybe linked to my setup as I call scrollToElement in mounted(), so I refresh the page to call again the scroll, and in this case, it goes nuts.
It was indeed linked to the page refresh. Otherwise, no problem.

Tell me if unclear and I’ll explain further.

ArkIv

@pintaf said in q-Tree auto-scroll to last node:

while (el.id !== “YOURQTREE_ID”) {
offset += el.offsetTop;
el = el.offsetParent;
}

And if so?
import { dom } from “quasar”;
let offset = dom.offset(el).top

pintaf

Well I though your proposal would be a very good solution, but it is actually not working.
Main problems:

It calculate offset from top of DOM so top of quasar application. If the top of your QTree is not touching the top of your dom, then it will return invalid values (easy to solve though, by subtracting that margin between top dom and top QTree).
Second and main problem:
Let’s imagine you have 100 values in your Qtree all at level/depth 0 (no children), just to make it simple. Let’s say you scrolled manually at the end of your Qtree.
and you want programmatically scroll to the 10th. Well the 10th is above the top of dom, so your method return negative value. And a scroll value is always positive.

studio511

@pintaf hi,

I did not work with offset but practically specify the position. I found some usage during the massive googling and incorporate the following into my code.
in vue: <q-tree ref=“referencetree”>
in script :
var getlast = document.getElementById(‘referencetree’).scrollHeight
document.getElementById(‘referencetree’).scrollTop = getlast

not sure if it works for your case but if you could get the position of your entry, you could modify that ‘getlast’ definition.

pintaf

Hey.

Thanks. but the solution I posted actually works. I do not have issues, I just wanted to share how I did things

No More Posting New Topics!

q-Tree auto-scroll to last node