jQuery UI Widgets › Forums › React › jqxtree for react issues
Tagged: #jquery-tree, javascript tree, jqwidgets tree, Tree
This topic contains 8 replies, has 3 voices, and was last updated by Ivo Zhulev 7 years, 2 months ago.
-
Authorjqxtree for react issues Posts
-
I am evaluating jqwidgets for react. Number and quality of components are very impressive.
Though I run to some issues with jqxtree component and I am hopping you will help me to understand what I am doing wrong.
Test application was ran with JQWidgets v.5.0.0 in chrome v.60.0.3112.90.
Code for test app is below after issues description.1. Item is not visible after calling EnsureVisible method.
How to replicate:
1. run app
2. click Load button. (items will be loaded to jqxtree)
3. Click “Select Item” button. It will call methods for expanding parents of item “Delete Items3”, selecting item “Delete Items3”, and call “ensurevisible” for item “Delete Items3”
4. Item “Delete Items3” is not visible2. Vertical scrollbar is hidden after component with jqxtree is rendered.
How to replicate:
1. run app
2. click Load button. (items will be loaded to jqxtree)
3. click on items with children and expand them
4. vertical and horizontal scrollbars are visible and they work as expected
5. Click Clear and Load buttons and repeat p.3 and p.4
6. click Render button. As for simplicity it will change text in header.
7. Click Clear and Load buttons and repeat p.3 and p.4
8. At this point vertical scrollbar disappears. It can be restored after reloading app.3. Horizontal scrollbar is hidden in some cases even tree item width is greater than horizontal tree area.
How to replicate:
1. run app
2. click Load button. (items will be loaded to jqxtree)
3. The third item from bottom (Deleted Items1) is not completely visible but horizontal scrollbar is not visibleBelow is code for test app
import React from 'react'; import ReactDOM from 'react-dom'; import JqxTree from './jqwidgets-react/react_jqxtree.js'; const source = [ { icon: './demo_images/mailIcon.png', id: "Mail", label: 'Mail', expanded: true, items: [ {icon: './demo_images/calendarIcon.png', label: 'Calendar'}, {icon: './demo_images/contactsIcon.png', label: 'Contacts', selected: true} ] }, { icon: './demo_images/folder.png', label: 'Inbox', expanded: true, items: [ { icon: './demo_images/folder.png', label: 'Admin1', id: "Admin1", items: [ { icon: './demo_images/folder.png', label: 'Admin2', id: "Admin2", items: [ {icon: './demo_images/folder.png', label: 'Admin3', id: "Admin3"}, {icon: './demo_images/folder.png', label: 'Corporate3'}, {icon: './demo_images/folder.png', label: 'Finance3'}, {icon: './demo_images/folder.png', label: 'Other3'}, {icon: './demo_images/recycle.png', label: 'Deleted Items3',id: "Deleted3",}, ] }, {icon: './demo_images/folder.png', label: 'Corporate2'}, {icon: './demo_images/folder.png', label: 'Finance2'}, {icon: './demo_images/folder.png', label: 'Other2'}, {icon: './demo_images/recycle.png', label: 'Deleted Items2'}, ] }, {icon: './demo_images/folder.png', label: 'Corporate1'}, {icon: './demo_images/folder.png', label: 'Finance1'}, {icon: './demo_images/folder.png', label: 'Other1'}, {icon: './demo_images/recycle.png', label: 'Deleted Items1'}, ] }, {icon: './demo_images/recycle.png', label: 'Deleted Items'}, {icon: './demo_images/notesIcon.png', label: 'Notes'}, {iconsize: 14, icon: './demo_images/settings.png', label: 'Settings'}, {icon: './demo_images/favorites.png', label: 'Favorites'} ]; class App extends React.Component { constructor(){ super() this.state={ header: "Folder", } } onLoadClick(){ this.myTree.addTo(source,null,false) this.myTree.refresh() } onClearClick(){ this.myTree.source("") this.myTree.refresh() // this.setState({header: "cleared"}) } onRenderClick(){ this.setState({header: "rendered"}) } onSelectItemClick(){ const element1=document.getElementById("Admin1") const element2=document.getElementById("Admin2") const element3=document.getElementById("Deleted3") this.myTree.expandItem(element1) this.myTree.expandItem(element2) this.myTree.selectItem(element3) this.myTree.ensureVisible(element3) } componentDidMount() { this.myTree.selectItem(null); } render () { return ( <div style={{margin: '20px' }}> <div style={{ width:'200px', marginBottom: '20px' }} > <button style={{margin: '5px' }} onClick={this.onLoadClick.bind(this)}>Load</button> <button style={{margin: '5px' }} onClick={this.onClearClick.bind(this)}>Clear</button> <button style={{margin: '5px' }} onClick={this.onRenderClick.bind(this)}>Render</button> <button style={{margin: '5px' }} onClick={this.onSelectItemClick.bind(this)}>Select Item</button> </div> <div>{this.state.header}</div> <div style={{ width: '160px', height: '300px', overflow: 'hidden', border: '1px solid black' }} ref={t=>this.divTree=t}> <JqxTree ref={t=>this.myTree=t} width={'100%'} height={'100%'} /> </div> </div> ) } } export default App;
Hello vmlaskin,
I tested
selectItem
andensureVisible
methods with your settings and it seems to work fine.
About the next mentioned issue (with Vertical and Horizontal scrollbar) I created a work item.
Thank you for this feedback.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comthank you for taking care of scrollbar issues.
regarding the issue with calling ensureVisible method (issue #1). It is 100% reproducible on my side.
After loading source, tree items appear with vertical scrollbar and without horizontal scrollbar.
After clicking “Select Item” button, parents of selected item expanded, horizontal scrollbar appears, and selected item is right under horizontal scrollbar. You have to move vertical scrollbar in order to see the item “Deleted Items3”
May be I didn’t include certain dependencies in html file. Below is what I have in html file. No additional css files.<link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="./jqwidgets/styles/jqx.classic.css" type="text/css" /> <script type="text/javascript" src="./jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="./jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="./jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="./jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="./jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="./jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="./jqwidgets/jqxexpander.js"></script>
I am working in create-react-app environment. Is there way to send you my project? What is your suggestion?
Thanks,
Hello vmlaskin,
Thank you for the interest.
We will investigate this.
An option is to create a wrapper container with a style that will have a scrollbar (overflow: 'auto'
) and you should create the Tree without the height. This will create default vertical HTML scrollbar.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHi Hristo,
Your suggestion in last post (set overflow: ‘auto”) made my test app much worse.
Best Regards,
Hello vmlaskin,
It was one suggestion.
Also, as a workaround I would like to suggest you try to use jqxTreeGrid with one column and you could use “selectRow” and “ensureRowVisible” methods.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comThanks for suggestion I will try it.
Though jqxTreeGrid component is more complex than jqxTree and makes code unnecessarily heavier.Could you provide raw estimate on when these jqxTree issues will be resolved?
Regards,
Hi Hristo,
I understand from your answer that “work items” were created for the issues with jqxtree I found.
Could you provide approximate dates when they are going to be fixed.Regards,
Hi vmlaskin,
As I said in the other post of you,
WE can’t give you a deadline for this.
We have other priority tasks to be done first.
It’s noted so it will be fixed.Regards,
Ivo -
AuthorPosts
You must be logged in to reply to this topic.