jQuery UI Widgets Forums Navigation Tree Dropping to an empty tree — cannot get dropped item.

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 9 years, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • kohowski
    Participant

    Hi, below is a min working example of the issue I have.

    I need to drag items from one tree and drop to another. E.g. from a toolbox to the actual tree.

    I have this issue if only if the target tree is initially empty.

    After dropping to the target tree, I cannot get the corresponing tree item in the on ‘select’ handler, which is triggered on drop. Also, the item does not get the selected (highlighted, colored) state.

    There is no issue if the targed tree contains any single item at the beginning.

    Can someone please advise if I’m missing smth?

    <html>
    <head>
        <link rel="stylesheet" href="lib/jqwidgets/styles/jqx.base.css"
              type="text/css"/>
        <script type="text/javascript"
                src="lib/scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxdragdrop.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="lib/jqwidgets/jqxtree.js"></script>
    </head>
    <body>
    <div id='btnTree'>
        <ul>
            <li>Drag Me</li>
        </ul>
    </div>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div id='jqxTree'>
        <ul>
            <!--<li>Single Item</li>--> <!-- try uncommenting this line, so the target tree has some nodes or does not -->
            <!-- more items can be here -->
        </ul>
    </div>
    <script type="text/javascript">
        $('#jqxTree').jqxTree({
            height: '300px',
            width: '300px',
            allowDrop: true
        });
    
        $('#btnTree').jqxTree({
            height: '50px',
            width: '100px',
            allowDrag: true
        });
    
        $('#jqxTree').on('select', function(event) {
            var args = event.args;
            console.log(args.element);
            var item = $('#jqxTree').jqxTree('getItem', args.element);
            console.log(item); // null
            item = $('#btnTree').jqxTree('getItem', args.element);
            console.log(item); // null
        });
    </script>
    </body>
    </html>

    Peter Stoev
    Keymaster

    Hi kohowski,

    thank you for the feedback. we’ll look into that.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.