problem with a tree populated on demand

[assemblerParticipant]

I’m populating a tree on demand. This is a huge tree, so I only keep in memory the node which is expanded. I’m expanding and collapsing nodes constantly and the underlaying array is changing as well. So far so good.

Here comes the trouble. The tree populates itself nicely and quickly, but only renders the visible part. I mean, there is a scrollbar and it scrolls up an down but only showing the nodes that fit in the exterior tree rectangle, even truncating the letters by half. What am I missing here? Is this the correct way to do it?

constructor (props) {
   super(props);
   this.state = {
      tree: []
   };
}

componentDidMount () {
 JqxTree.prototype.componentDidUpdate = function (prevProps, prevState) {
      if (prevProps.source === this.props.source) {
        this.source(this.props.source);
      }
    };

    // here I call the methods that populates the tree
}

treeRefBuilder = (r) => {
   this.myTree = r;
}

render () {
return (
   <JqxTree ref={this.treeRefBuilder} width={'100%'} height={'100%'} source={this.state.tree}  style={{overflow: 'auto', float: 'left'}}     checkboxes hasThreeStates easing={'easeInOutCirc'}/>
);
}

[Ivo ZhulevParticipant]

Hi assembler,

This is normal behavior. You can add tooltips to the items so the user to read them that way. Or the other option is to use jqxTreeGrid and style it as a tree.

Best Regards,
Ivo

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

[assemblerParticipant]

Mr. Ivo Zhulev

Well, I think I was not clear enough. The problem is this: I’m populating the tree, the tree has a lot of items, therefore a vertical scrollbar appears. Then, if I scroll it up or down the tree doesn’t shows the items labels, only blank. I set the checkboxes to true and it shows me these checkboxes, but not the labels. Is that a normal behavior?

Here is a link to the image: https://drive.google.com/open?id=0B3e2J2h56bKEMHlyTFhLRG5mSjg

[Ivo ZhulevParticipant]

Hi assembler,

Yes I didn’t understand you right. This is indeed a very strange behavior. Can you make a working example and share it(just the core needed code/data for it to work).

Best Regards,
Ivo

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

[assemblerParticipant]

Mr. Ivo Zhulev,
I really appreciate your time, and I like JQwidgets. I found a solution, maybe no the greatest one, this is a CSS problem. In my componentDidMount method I do this:

let elements = $('.jqx-widget-content');
$.each(elements, function (index, value) {
  if (value.id.startsWith('panelContentpaneljqxTree')) {
    $(value).css('height', '');
    return false;
  }
});

Nevertheless here is the code:

componentDidUpdate (prevProps, prevState) {
    if (!isEqual(prevState.children, this.state.children)) {
      // here I call the method that populates the tree node on demand
      }
    }
  }

  componentDidMount () {
    let elements = $('.jqx-widget-content');
    $.each(elements, function (index, value) {
      if (value.id.startsWith('panelContentpaneljqxTree')) {
        $(value).css('height', '');
        return false;
      }
    });

    this.tree.on('dblclick', () => {
      this.load(this.parentNode);
    });

    this.tree.on('select', (event) => {
      let item = this.tree.getItem(event.args.element);
      this.parentNode = item.id;
    });

    this.createFirstNode(...);
  }

  addNode (node) {
     // this method adds a node
  }

  lookForNode = (i = undefined) => {
    const id = (i ? i : this.parentNode).toString();
    for (let x of this.tree.getItems()) {
      if (isEqual(id, x.id)) {
        return x;
      }
    }
    return undefined;
  }

  treeRefBuilder = (r) => {
    this.tree = r;
  }

  render () {
    const {width} = this.props;
    return (
        <JqxTree
          ref={this.treeRefBuilder} width={'100%'} height={'100%'} incrementalSearch
          style={{overflow: 'auto', float: 'left'}} checkboxes
          hasThreeStates={this.props.checkboxes} easing={'easeInOutCirc'}/>
    );
  }

I hope my solution could help you. Best regards!

[Author]

Posts