CODEWITHSUNDEEP
javascriptreactjs
Akhil
Akhil

Reputation: 51

Is there any way to scroll to a particular child in react sortable tree?

My app.js component

import React,{Component} from 'react';
import SortableTree from 'react-sortable-tree';
import 'react-sortable-tree/style.css';
import './App.css';




class App extends Component{

  constructor(props) {
    super(props);

    this.state = {
      treeData: [{
        title: 'Chicken',
        children: [{
          title: 'Egg1'
        },{
          title: 'Egg2'
        },{
          title: 'Egg3'
        },{
          title: 'Egg4'
        },{
          title: 'Egg5'
        },{
          title: 'Egg6'
        },{
          title: 'Egg7'
        },{
          title: 'Egg8'
        },{
          title: 'Egg9'
        },{
          title: 'Egg10'
        },{
          title: 'Egg11'
        },{
          title: 'Egg12'
        },{
          title: 'Egg13'
        },{
          title: 'Egg14'
        },{
          title: 'Egg15'
        },{
          title: 'Egg16'
        },{
          title: 'Egg17'
        }]
      }] 
    };
  }

  render() {
    return (
      <div style={{ height: 400 }}>
        <SortableTree
          treeData={this.state.treeData}
          onChange={treeData => this.setState({ treeData })}
          generateNodeProps={clickedNode => ({
            className:clickedNode.node.title,
            id:clickedNode.node.title
          })}
        />
      </div>
    );
  }
}

>

Upvotes: 2

Views: 1497

Answers (2)

Akhil
Akhil

Reputation: 51

react-sortable-tree with version 2.3.0 has a property called "searchQuery" which will scroll to matched node and highlight the node (use unique value for title or subtitle as it use title or subtitle property for searching matches)

Upvotes: 1

Abhisar Tripathi
Abhisar Tripathi

Reputation: 1659

Yeah if you assign an id to that element then we can do something like this -:

var element = document.getElementById("child");
element.scrollIntoView();

here is a working demo... https://stackblitz.com/edit/react-pz9mmu

Upvotes: 3

Related Questions