1

I want to style the rows of my fancytree (which expands using lazy-load, and has a table built in) using the classes 'level1', 'level2', and 'level3'

 ...
 extensions: ["table"],
    
     table: {
          nodeColumnIdx: 1
        },
       
        renderColumns: function (event, data) {
            var node = data.node,
            $tdList = $(node.tr);
            renderRow($tdList,node.getLevel());
         
        },


function renderRow($this,level) {
    
    $this.addClass('level'+(level%3+1));
    ...
}

This code works well for the child nodes, as I expand the tree deeper and deeper. The problem is that the all the parent nodes up to the top of the tree have the classes that I previously added, removed.

Any ideas why?

gordon613
  • 2,770
  • 12
  • 52
  • 81
  • 1
    *Possibly* because [tag:fancytree] is using something like `.classList=` instead of `.addClass`. Exactly which version are you using? – freedomn-m Oct 27 '21 at 14:31
  • OK. Thanks. Amazing. Your answer to not use .addClass [in the conventional way] is exactly what I needed. The answer is to pass the node to the renderRow function and to do `node.addClass('level'+(level%3+1));` If you post that as an answer I will accept it... – gordon613 Oct 27 '21 at 16:09

1 Answers1

1

Thanks to @freedomn-m for the direction.

The answer is to pass the node to the renderRow function and to add the class to the node, (rather than trying to find the <TR> element and add the class to that)

renderRow(node, $tdList,node.getLevel());

node.addClass('level'+(level%3+1));
gordon613
  • 2,770
  • 12
  • 52
  • 81