jQuery UI Widgets Forums React jqxtree for react issues

This topic contains 8 replies, has 3 voices, and was last updated by  Ivo Zhulev 7 years, 2 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • jqxtree for react issues #95500

    vmlaskin
    Blocked

    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 visible

    2. 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 visible

    Below 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;
    
    jqxtree for react issues #95519

    Hristo
    Participant

    Hello vmlaskin,

    I tested selectItem and ensureVisible 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 Hristov

    jQWidgets team
    http://www.jqwidgets.com

    jqxtree for react issues #95526

    vmlaskin
    Blocked

    thank 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,

    jqxtree for react issues #95544

    Hristo
    Participant

    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 Hristov

    jQWidgets team
    http://www.jqwidgets.com

    jqxtree for react issues #95548

    vmlaskin
    Blocked

    Hi Hristo,

    Your suggestion in last post (set overflow: ‘auto”) made my test app much worse.

    Best Regards,

    jqxtree for react issues #95560

    Hristo
    Participant

    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 Hristov

    jQWidgets team
    http://www.jqwidgets.com

    jqxtree for react issues #95563

    vmlaskin
    Blocked

    Thanks 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,

    jqxtree for react issues #95678

    vmlaskin
    Blocked

    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,

    jqxtree for react issues #95765

    Ivo Zhulev
    Participant

    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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.