Scroll to selected item on TreeView

[Ivan]

I found an example in KendoUI for jQuery here:

 

https://docs.telerik.com/kendo-ui/knowledge-base/scroll-to-selected-item

How to do it in React TreeView?

[Vessy]

Hi, Ivan,

In a Kendo UI for Vue scenario you can achieve this result by updating the select variable passed to the processTreeViewItems method of the TreeView:

• https://www.telerik.com/kendo-vue-ui/components/treeview/api/processTreeViewItems/ 

For convenience I prepared the following sample that could be used as a base for such implementation:

• https://stackblitz.com/edit/ngzdbw-87bdme?file=src%2Fmain.vue 

    treeDataItems() {
      return processTreeViewItems(this.tree, {
        select: this.select,
        expand: this.expand,
      });
    },
  },
  methods: {
    onItemClick(event) {
      this.select = [event.itemHierarchicalIndex];
    },
    ...
    selectRow() {
      let indexToSelect = '7';
      this.select = [indexToSelect];
    },

Regards,
Vessy
Progress Telerik

[Ivan]

Thanks for the answer, but I asked about KendoReact, and the actual question would be:

If we we've got a large tree and we need to select a 55th row (on component mount  - initial render) and scroll the treeview so the user can see it. How to achieve it in KedoReact?

[Vessy]

Hey, Ivan, 

Apologies for providing a sample for a wrong product.

The same approach can be achieved with KendoReact like demonstrated in the sample below. I also added some scrollIntoView logic to show the selected node once the selection is over, you can check it here:

• https://stackblitz.com/edit/react-fqbx6h?file=app%2Fapp.tsx