[assemblerParticipant]

By the way, I’m also having problems with the version 5.4 of JqWidgets for React in Mozilla Firefox 57 running on Linux Mint.

[assemblerParticipant]

Solved, thanks and sorry for the delay in my response.

[assemblerParticipant]

Mr. Ivo Zhulev,

The problem is as follows: I have a main React component which hosts a lot of other React components. One of those components is a JqxWindow with the autoOpen prop set to false in order to let the main React component to manipulate when this JqxWindow will be open or will be closed. I do that with a boolean variable in the state of the main React component. It works perfectly, the JqxWindow opens and closes when the main React component changes its state. The trouble comes when the JqxWindow gets open and closed several times. I mean: open/close, open../close.., open…./close…., open……./close…….., open…………../close…………… the response time grows, also the Chrome task manager shows me a growing memory consumption. I’m using Linux Mint 18.1 and Brackets if it helps.

Sorry if I don’t share my resting code.

Best regards!

[assemblerParticipant]

Mr. Ivo Zhulev,
Here is the code that opens the JqxWindow in my previous post:

constructor() {
   super();
   this.state = { show: false };
}

componentDidMount() {
   this.button.on('click', () => {
      this.setState({show: true});
   });
}

buttonRef = (ref) => {
   this.button = ref;
}

closing = () => {
   this.setState({show: false});
}

render () {
   return (
      <div>
         <JqxButton ref={this.buttonRef} value={'ok'} width={100} height={24} />
         <MyWindowComponent show={this.state.show} closing={this.closing} />
      </div>
   );
}

Moreover, if it helps you, I’m using Styled-components and React-boilerplate. And, thanks for your time.

[assemblerParticipant]

You don’t say too much with that error. It will be helpful if you post your code.

[assemblerParticipant]

Mr. Ivo Zhulev,
I just found a solution for this. I’m calling myJqxInput.focus() wrapped into a setTimeout function passing it 100 milliseconds. I guess React is taking some time to load other things in the background.
Best regards.

[assemblerParticipant]

Mr. Ivo Zhulev,
Thanks for your response. Try your solution with JqxInput instead of input. Isn’t the same.
Cheers.

[assemblerParticipant]

Mr. Hristo Hristov,
I want to say that I like JQWidgets a lot, that is way I’m testing these widgets, so I’ve found a solution for this. Don’t know if my solution is the best one, but it works for me in every scenario. I placed the splitter within a div, and I developed a function that listens for changes in that div. If the div changes then I call the refresh method of the splitter. That’s it.
My best regards.

[assemblerParticipant]

My previous post occurs only if the browser size changes. Then if I click on the splitter bar it updates. Also, I have to say, all my css are being made with styled-components, if this info is needed.

[assemblerParticipant]

Mr. Hristo Hristov,
I appreciate your time and your code. It works properly for me as well, but my code still doesn’t work as expected. I copied the exact code which is working in your example into my project and still, doesn’t work. Here is an image:

https://drive.google.com/open?id=0B05CCxHemvDaaHVkNkRpZ0ZqaGc

[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!

[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

[assemblerParticipant]

Well I guess I found a solution, since this library is based on jQuery I did a little research in jQuery and then I changed the event change for the input event (which comes from jQuery) and it worked. Sorry, I needed a little bit more of research before asking.

[assemblerParticipant]

Mr. AsterionDB, I want to say that I was struggling with Jqxwidgets, but the main trouble was on my side. I was using an old project for testing React components in order to use another palette. I decided to make a clear brand new React project, this time with Boilerplate and then it worked as expected. Have a nice day!

[assemblerParticipant]

Mr. Hristo, Thanks for your response. I’m building the three on demand, so I can’t tell how big will be the three.

[Author]

Posts