Automatic leveling when you drag and drop tree structures

[jeongkongmyeong]

hello

1. Automatic leveling when you drag and drop tree structures
① Select and drag a row

② drop a row

③ I would like to know how to change the level value automatically when dragging and dropping.


I will be waiting for your reply. Thank you. : )
Have a good one!

[paramvir]

Level of a node has a special meaning in context of treegrid and signifies nesting of node w.r.t root node,  assuming you mean in same context, level is automatically changed when nodes are dragged and dropped depending upon new parent of node.

Level is auto managed by treegrid while drag & drop and you are not supposed to directly change it.

If you want to move a node to new parent with API, then you can use Tree().moveNodes() method

https://paramquery.com/pro/api#method-Tree

Please share a jsfiddle if you face any issues.

http://jsfiddle.net/h7mctw5q/

[luckduck]

Thank you for your reply !

Level is auto managed by treegrid while drag & drop and you are not supposed to directly change it.
-> I see.  I want to update automatically changed values.
    What methods can I use? (updateRow?)

[paramvir]

I want to update automatically changed values.

Sorry your requirement as such doesn't make sense.

Level of a node depends upon its parent. If a parent has level 0 ( root level ), then all its children have level 1 and all grandchildren have level 2 and so on.

You are not supposed to change level of a node directly as it's auto managed by treegrid depending upon hierarchy of nodes.

jsfiddle to demonstrate the level of nodes: https://jsfiddle.net/t27jufvk/

If you want to change hierarchy of nodes then you can use Tree().moveNodes() API method as mentioned earlier.

[luckduck]

Thank you.

I'm trying to change  "unitLevel" after drag&drop.
"unitLevel" is pq_level + 1.

https://jsfiddle.net/yvfan0cb/1/

[paramvir]

Please use moveNode event ( which is fired after drag & drop ) to update other columns. formulas are also used to fill unitLevel values initially.

Code: [Select]

    moveNode: function(evt, ui){
    //debugger
      var grid = this;
      ui.args[0].forEach(function(rd){
      rd.unitLevel = rd.pq_level+1;
        grid.refreshCell({rowIndx: rd.pq_ri, dataIndx:'unitLevel'})
      })     
    },
    formulas:[
    ['unitLevel', function(rd){
         return rd.pq_level+1;
        }]
    ],

https://jsfiddle.net/1ngt8vp3/

[luckduck]

Thanks for answer.

It works fine when there is only one leaf node.

How do I change the children of "MySQL", "Program Files" and "php" nodes with child nodes?


    moveNode: function(evt, ui){
       //debugger
      var grid = this;
      var Tree = grid.Tree();
      ui.args[0].forEach(function(rd){
         rd.unitLevel = rd.pq_level+1;
        grid.refreshCell({rowIndx: rd.pq_ri, dataIndx:'unitLevel'});

        // how to change children node ??
        Tree.eachChild(Tree.getNode(rd.pq_ri), function(node) {
           console.log("node.name", node.pq_level);
                 node.unitLevel = node.pq_level+1;
                grid.refreshCell({rowIndx: node.pq_ri, dataIndx:'unitLevel'});
        });

      });     
    },

[paramvir]

Good point.

rd is a node itself and can be passed as first argument to Tree.eachChild()

Code: [Select]

    moveNode: function(evt, ui) {   
      var grid = this,
        Tree = grid.Tree();
       
      ui.args[0].forEach(function(rd) {       
        Tree.eachChild(rd, function(node) {         
          node.unitLevel = node.pq_level + 1;
          grid.refreshCell({
            rowIndx: node.pq_ri,
            dataIndx: 'unitLevel'
          });
        });
      })
    },

https://jsfiddle.net/btx2o9m3/1/