Author Topic: Automatic leveling when you drag and drop tree structures  (Read 86 times)

jeongkongmyeong

  • Newbie
  • *
  • Posts: 2
    • View Profile
Automatic leveling when you drag and drop tree structures
« on: October 07, 2019, 08:32:55 am »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 4076
    • View Profile
Re: Automatic leveling when you drag and drop tree structures
« Reply #1 on: October 07, 2019, 09:49:28 am »
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

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 9
    • View Profile
Re: Automatic leveling when you drag and drop tree structures
« Reply #2 on: October 08, 2019, 03:55:06 pm »
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?)
« Last Edit: October 08, 2019, 04:04:14 pm by luckduck »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 4076
    • View Profile
Re: Automatic leveling when you drag and drop tree structures
« Reply #3 on: October 08, 2019, 05:06:25 pm »
Quote
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.
« Last Edit: October 08, 2019, 05:33:39 pm by paramvir »

luckduck

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 9
    • View Profile
Re: Automatic leveling when you drag and drop tree structures
« Reply #4 on: October 10, 2019, 10:15:05 am »
Thank you.

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

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




paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 4076
    • View Profile
Re: Automatic leveling when you drag and drop tree structures
« Reply #5 on: October 10, 2019, 11:36:04 am »
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/
« Last Edit: October 10, 2019, 11:41:40 am by paramvir »

luckduck

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 9
    • View Profile
Re: Automatic leveling when you drag and drop tree structures
« Reply #6 on: October 10, 2019, 01:36:45 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 4076
    • View Profile
Re: Automatic leveling when you drag and drop tree structures
« Reply #7 on: October 10, 2019, 09:58:59 pm »
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/
« Last Edit: October 10, 2019, 10:02:24 pm by paramvir »