jQuery UI Widgets › Forums › TreeGrid › Drag Drop Rows in Tree

Tagged: , , ,

This topic contains 5 replies, has 2 voices, and was last updated by  Nadezhda 9 years, 12 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Drag Drop Rows in Tree Posts
  • September 24, 2014 at 8:06 pm Drag Drop Rows in Tree #60005

    arossol
    Participant

    Hi there,

    I have a jqxTree that has People as a list of lists. The tree renders correctly and by default there is drag-drop enabled (allowing children to change their ordering and change their parents). I would like to disallow children changing parents, and I would like a way to persistent to the DB the changes to child orderings. What event should I be intercepting to do this?

    Thanks in advance!

    September 24, 2014 at 8:52 pm Drag Drop Rows in Tree #60007

    arossol
    Participant

    To clarify, what on the dragStart or dragEnd should I be checking?

    September 25, 2014 at 8:39 am Drag Drop Rows in Tree #60031

    Nadezhda
    Participant

    Hello arossol,

    In the following example you can learn how to disallow children to change their parents. Please, provide us with more details about your DB question.

    <!DOCTYPE html>
<html lang="en">
<head>    
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxTree
            $('#treeA').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px', 
                dragEnd: function (item, dropItem, args, dropPosition, tree) {
                    if (item.level != dropItem.level && item.parentId != dropItem.parentId)
                        return false;
                }                 
        });                
           
        $('#treeA').css('visibility', 'visible');            

        $("#treeA").on('dragStart', function (event) {
            $("#dragStartLog").text("Drag Start: " + event.args.label);
            $("#dragEndLog").text("");
        });

        $("#treeA").on('dragEnd', function (event) {
            $("#dragEndLog").text("Drag End" + event.args.label);
        });

        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style='float: left;'>
            <div id='treeA' style='visibility: hidden; float: left; margin-left: 0px;'>
                <ul>
                    <li id='home' item-selected='true'>People</li>
                    <li item-expanded='true'>Family
                        <ul>
                            <li>Mother</li>
                            <li>Father</li>
                            <li>Son</li>
                        </ul>
                    </li>
                    <li>Name</li>
                    <li>Gender</li>
                </ul>
            </div>

        </div>
        <div style="font-size: 13px; font-family: Verdana; padding-top: 20px; clear: both;">
            <b>Events Log:</b>
            <div id="dragStartLog">
            </div>
            <div id="dragEndLog">
            </div>         
        </div>
    </div>
</body>
</html>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    September 25, 2014 at 5:21 pm Drag Drop Rows in Tree #60081

    arossol
    Participant

    Hi Nadezhda,

    Thank you very much for your response, I will give the code a try immediately.

    For the DB save, I imagine I will need to create a local var to save the ids and the ordering numbers that are changed. Here’s how the JSON object is setup…

    [id==111 name=alpha path=root/alpha ordering =1]
    [id==222 name=beta path=root/alpha/beta ordering =1]
    [id==333 name=delta path=root/alpha/delta ordering =2]
    [id==444 name=echo path=root/alpha/echo ordering =3]

    So if I drag-drop “echo” to be above “beta” the above needs to become…

    [id==111 name=alpha path=root/alpha ordering =1]
    [id==444 name=echo path=root/alpha/echo ordering =1]
    [id==222 name=beta path=root/alpha/beta ordering =2]
    [id==333 name=delta path=root/alpha/delta ordering =3]

    How is it best to gather the ordering change? I will need to create an ajay call and send the list of changes to the backend, but I will need the list of changed ids and changed ordering.

    September 25, 2014 at 9:23 pm Drag Drop Rows in Tree #60086

    arossol
    Participant

    Sorry below the id=111, those 3 entries should be tabbed over (and it’s id=111 no id==111)

    September 26, 2014 at 8:04 am Drag Drop Rows in Tree #60143

    Nadezhda
    Participant

    Hello arossol,

    Please, find the following topic which contains possible solution for export tree: http://www.jqwidgets.com/community/topic/export-tree-data-to-json/.

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.