Hi there,
Actually I wanted to use the DataManager for loading my remote data but I did not manage to lazy load children into their parents. So I tried a custom approach. The below code works but it seem to fire twice. Of course I could ignore the second shot with some hacking but I´m curious what causes this. If anyone has an idea how I can fix this or how I get the WebApiAdapter working that would be great. I´m thankful for any advice.
import './RemotePane.css';
import { ItemDirective, ItemsDirective, ToolbarComponent, TreeViewComponent } from '@syncfusion/ej2-react-navigations';
import { useEffect, useState } from 'react';
function RemotePane() {
let tree;
const [data, setData] = useState([]);
const loadRootData = dir => {
if(!dir) dir = ".";
fetch('http://localhost:8080/ListFolders')
.then(res => res.json())
.then(res => setData(res.Items));
}
const loadChildData = node => {
const target = node.nodeData.text;
fetch('http://localhost:8080/ListFolders?parent='+target)
.then(res => res.json())
.then(res => {
console.log(res)
tree.addNodes(res.Items, target)
});
}
useEffect(() => {
loadRootData();
}, []);
const fields = { dataSource: data, id: 'name', text: 'name', iconCss: 'icon', hasChildren: 'hasChildren'};
return (
<>
<div className='header-remote-pane'>Remote Drive</div>
<ToolbarComponent id='toolbar'>
<ItemsDirective>
<ItemDirective prefixIcon='e-icons e-arrow-down' text="Download" />
<ItemDirective prefixIcon='e-icons e-close-6' text="Delete" />
<ItemDirective prefixIcon='e-icons e-folder' text="New Folder" />
</ItemsDirective>
</ToolbarComponent>
<TreeViewComponent fields={fields} nodeExpanding={node => loadChildData(node)} ref={elm => tree = elm} />
</>
);
}
export default RemotePane;
