How to generate a treeview from .xml and .xsl file using react.js?

saradalal

Hi,

I am converting asp.net webform to asp.net core and react.js. Currently, webpage displays data in the tree format using tree.xml, tree.xsl and tree.js. I am new to react.js. Please help me in generating treeview in react.js from using .xml, .xsl and .javascript files attached in the zip.

.aspx code

Tree looks like the below picture

Sales
  Item1
    SubItem1
  ITEM2
    SubItem2
  Item3
    SubItem3
Supervisor
  Item1
    SubItem1
  Item2
    SubItem2
  Item3
    SubItem3

Thanks

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vaibhav Chauhan5y ago
In React JS you can use already developed components. which can be installed as npm package.
Run below command in Node command prompt to install it :
npm install react-sortable-tree --save
Below is the example, how you can use the react-Sortable-tree in reactJS
import React, { Component } from 'react';
import SortableTree from 'react-sortable-tree';
import 'react-sortable-tree/style.css'; // This only needs to be imported once in your app

export default class Tree extends Component {
  constructor(props) {
    super(props);

    this.state = {
      treeData: [
        { title: 'Chicken', children: [{ title: 'Egg' }] },
        { title: 'Fish', children: [{ title: 'fingerline' }] },
      ],
    };
  }

  render() {
    return (


          treeData={this.state.treeData}
          onChange={treeData => this.setState({ treeData })}
        />
);
}
}

saradalal5y ago

Not able to understand. PLease help how to generate tree in react.js from xml, xsl and javascript.

Vaibhav Chauhan5y ago

You can use react-sortable-tree npm package create tree view. You just need to install the package,arrange your data in required format and pass that data in SortableTree component.

https://www.npmjs.com/package/react-sortable-tree