ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: jeongkongmyeong on October 07, 2019, 08:32:55 am

Title: Automatic leveling when you drag and drop tree structures
Post by: jeongkongmyeong 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!

Title: Re: Automatic leveling when you drag and drop tree structures
Post by: paramvir 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/

Title: Re: Automatic leveling when you drag and drop tree structures
Post by: luckduck 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?)

Title: Re: Automatic leveling when you drag and drop tree structures
Post by: paramvir 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.

Title: Re: Automatic leveling when you drag and drop tree structures
Post by: luckduck 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/

Title: Re: Automatic leveling when you drag and drop tree structures
Post by: paramvir 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/

Title: Re: Automatic leveling when you drag and drop tree structures
Post by: luckduck 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'});
        });

      });     
    },

Title: Re: Automatic leveling when you drag and drop tree structures
Post by: paramvir 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/