[assemblerParticipant]

Hello, Mr. Hristo,
I thank you for your response. I’ll do as you recommend.
Once again: thank you.

[assemblerParticipant]

Maybe you need to change ref for any other variable name, could be reference… What I gave you is well written but maybe ref is not a good idea to be used as variable name.

[assemblerParticipant]

Hi soojung,

No, myDropDownListRefBuilder is just a function name, it won’t turn anything into a react component. It is just the recommended way to reference a component. JqxDropDownList is a bridge between react and the real jquery component.

  myDropDownListRefBuilder = (ref) => {
     this.myDropDownList = ref;
  }

is just exactly the same to:

  constructor () {
      ...
    this.myDropDownListRefBuilder = this.myDropDownListRefBuilder.bind(this);  
   }

   myDropDownListRefBuilder (ref) {
     this.myDropDownList = ref;
   }

   ...

   render () {
      ...
      return (<JqxDropDownList ref={this.myDropDownListRefBuilder} ... />
      ...
   }

I can’t tell why you are having a syntax error since the code I gave is correct. This way you reference your component with this.myDropDownList.

Also I have to say this is the way I would do it, and it doesn’t mean it is the best way to achieve it.

[assemblerParticipant]

Is there any progress on this?

[assemblerParticipant]

Hi there soojung,
The way you are trying to update your JqxDropDownList would work if your JqxDropDownList were a React component. Try this approach:

import JqxDropDownList from '../jqwidgets-react/react_jqxdropdownlist.js';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
       record: ["123", "345"]
    };

    this.handleGetEmpName = this.handleGetEmpName.bind(this);
  }

  componentDidUpdate (prevProps, prevtState) {
    if (prevState.record !== this.state.record) {
      let dataAdapter = new $.jqx.dataAdapter(this.state.record);
      this.myDropDownList.source(dataAdapter);
    }
  }

  handleGetEmpName(){
    return this.props.getInfoRequest().then(
      () => {
          this.setState({
            record: ["444", "555"]
          });
        }
      }
    );
  }

  myDropDownListRefBuilder = (ref) => {
     this.myDropDownList = ref;
  }

  render(){
      var dataAdapter = new $.jqx.dataAdapter(this.state.record);

      return (
        <div>
        <JqxDropDownList id="123" ref={this.myDropDownListRefBuilder}
            width={200} height={50} source={dataAdapter} />
            <p>{this.state.record}</p>
          <button type="button" onClick={this.handleGetEmpName}>Load Data</button>
        </div>
      );
  }
}

According to React official documentation using ref=’myreference’ is discouraged. They recommend to use a reference like the one in the example. Hope it helps.

[assemblerParticipant]

Is there any advance on this?

[assemblerParticipant]

I found a solution myself, I didn’t realize the column has the initeditor property, so I did as follows:

createeditor: (row, cellvalue, editor) => {
            editor.jqxNumberInput({
              allowNull: false,
              min: 0,
              textAlign: 'right',
              inputMode: 'simple'
            });
          },
          initeditor: (row, cellvalue, editor, celltext, pressedkey) => {
            editor.jqxNumberInput({value: 25, max: 25});
          }

And it works, I needed a little bit more research before posting…

[assemblerParticipant]

Thank you Mr. Hristo and Mr. Peter Stoev, I’ve just send an email to the support service. I’m waiting for your responses.

[assemblerParticipant]

Thank you Mr. Hristo! It worked for me.

[assemblerParticipant]

Hello Mr. Hristo,

I must tell you I’m using React Boilerplate and Lodash. Here is the entire code of my component:

Testing.js file:

import React from 'react';
// import styled from 'styled-components';

import JqxGrid from '../jqwidgets-react/react_jqxgrid';
import isEqual from 'lodash/isEqual';
import {loadData} from './dataAccessFile';

class Testing extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor (props) {
    super(props);
    this.state = {data: []};
  }

  myGridRefBuilder = (myGrid) => {
    this.myGrid = myGrid;
  };

  shouldComponentUpdate (nextProps, nextState) {
    return !isEqual(nextProps, this.props) || !isEqual(nextState, this.state);
  }

  responseData = (data) => {
    if (data.response) {
      this.setState({data: data.response});
    } else {
      console.log('To handle this error ', data);
    }
  };

  componentDidMount () {
    loadData(this.responseData);
  }

  componentDidUpdate (prevProps, prevState) {
    if (!isEqual(prevState.data, this.state.data)) {
      let dataAdapter = this.getGridSource();
      this.myGrid.source(dataAdapter);
    }
  }

  getGridSource = () => {
    let source = {
      datatype: 'array',
      datafields: [
        {name: 'code', type: 'string'},
        {name: 'description', type: 'string'},
        {name: 'input', type: 'int'},
        {name: 'required', type: 'bool'}
      ],
      id: 'id',
      localdata: this.state.data.map(x => {
        return {
          code: x.code,
          description: x.description,
          input: x.input,
          required: x.required
        };
      })
    };
    // eslint-disable-next-line new-cap
    return new window.$.jqx.dataAdapter(source);
  };

  render () {
    let columns = [
      {datafield: 'id', hidden: true},
      {text: 'Code', datafield: 'code', width: '20%'},
      {text: 'Description', datafield: 'description', width: '50%'},
      {text: 'Input', datafield: 'input', width: '20%', align: 'center', cellsformat: 'f2', cellsalign: 'right'},
      {text: 'Required', datafield: 'required', width: '10%', align: 'center', columntype: 'checkbox'}
    ];

    return (
      <div>
        {'This is a grid for testing'}
        <JqxGrid
          ref={this.myGridRefBuilder} columns={columns} theme={'energyblue'} width={'100%'} height={'100%'}
          columnsresize />
      </div>
    );
  }
}

Testing.propTypes = {};

export default Testing;

the loadData function code:

export function loadData (setData) {
  let url = 'url of my api...';
  request(url, buildBaseHeaders('en'))
    .then(response => {
      setData({response});
    })
    .catch(error => {
      setData({error});
    });
}

And finally my App/index.js file:

export default function App () {
  return (
    <div>
      <Switch>
        <Route exact path='/login' name='Login Page' component={Login} />
        {/*<Route path='/' component={restricted(Layout)} />*/}
        <Route path='/' component={Testing} />
      </Switch>
    </div>
  );
}

this is the contents of the data array:

[{id: 1, code: 'Code', description: 'Description', input: 10, required: true}, ... {id: 100, code: 'Code 100', description: 'Description 100', input: 1000, required: true}]

This is my browser screenshot:

https://mega.nz/#!Hx4DgT7Z!ccAOSgDUFUU6lD9LmHwFHB_aDWxcQecw0Sutbvjejaw

Also I have to tell you I’m using Linux Mint 18.2, react-boilerplate 3.5.0, node 8.9.2, npm 5.5.1 and JqxWidgets 5.4. Is this a bug from the grid? Or am I missing something?

[assemblerParticipant]

Mr. Hristo,

I used the columnresized according to your suggestion, like this:

this.grid.on('columnresized', () => {
   this.grid.updatebounddata();
});

and it keeps the form of the grid. Now I will try to do my best to make myself as clear as possible. If I open another widget, for instance a JqxDialog, the grid don’t allow me to change the column size. Also, if I call this.grid.updatebouddata(); after this.grid.source(dataAdapter); without calling the columnresized event, the grid keeps its aspect, which is good, but if I touch any other widget, and with any other widget I mean even the grid pager or the grid filter, or changing its columns size, it shows me something like this:

https://mega.nz/#!vpITFbyA!gQ8fDKlUtyOSCkyg3sYMX3phsamBmyNQ3QJC3qh5_Ok

So, is it a bug or I’m missing something?

[assemblerParticipant]

THank you Mr. Hristo

[assemblerParticipant]

Mr. Hristo,

I appreciate your response, as always. I did as you suggested calling this.grid.updatebouddata();, but anyway if I try to change the columns size the grid do the same weird thing as in the image. This is the scenario: If the columns have a fixed width or if I don’t change the columns width it works fine. Moreover, even if the grid allows me to change the size as expected if I open any other widget and then I try to change the size it collapses as in the image. Also, it shows no error in the console. All the grids I’ve tried do the same thing, even if I connect the grid directly to an api-rest.

I’m thinking your suggestion might work if there is a way to check if the columns change their width

[assemblerParticipant]

Hi, Mr. Ivo Zhulev,

I think I found a way: I’ve tried myself and if I place an object into value instead a single value it works. Something like this:

nodeBuilder = (x) => {
    return {
      id: x.idelement,
      label: x.description,
      value: {elementkey: x.elementkey, firstattr: '1st', myotherattr: 'other'},
      expanded: x.haschildren,
      parentid: x.parentid
    };
  };

Anyway, thanks for your time.

[assemblerParticipant]

Hi Mr. Ivo Zhulev,

Right, it is strange. I’m using react-boilerplate and over it the JqWidgets, and the application collapses when I open it in Firefox 57. This is the console log:

unreachable code after return statement jqx-all.js:24:66726
unreachable code after return statement jqx-all.js:72:6240
unreachable code after return statement jqx-all.js:88:35340
unreachable code after return statement jqx-all.js:118:21308
unreachable code after return statement jqx-all.js:120:15020
unreachable code after return statement jqx-all.js:118:28195

Chrome runs it very well.

[Author]

Posts