Load new data to dropdownlist when button click

[soojungParticipant]

Hello, I’m using react-jqxDropDownList.
I successfully get changed data by setState. I can write that data on textbox but dropdownlist doesn’t change inside data. How can I change data to dropdownlist when click button?

// App.js
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);
  }

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

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

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

• This topic was modified 5 years, 3 months ago by  soojung.

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

[soojungParticipant]

Oh! Thank you. Does myDropDownListRefBuilder make dropdownlist to react component? And I’v got an error like below. myDropDownListRefBuilder = (ref) has syntaxError.

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

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

• This reply was modified 5 years, 3 months ago by  assembler.

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

• This reply was modified 5 years, 3 months ago by  assembler.

[soojungParticipant]

OMG! Thank you, assembler. You save me. Now I set new data on jqxDropDownList successfully. Below is my final code.

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

class App extends React.Component {

    constructor(props) {
        super(props);
        this.handleGetEmpName = this.handleGetEmpName.bind(this);
        this.myDropDownListRefBuilder = this.myDropDownListRefBuilder.bind(this);

        this.state = {
          records: ["123", "456"]
        }
    }

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

    handleGetEmpName() {
      this.setState({
        records: ["444", "555"]
      });
    }

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

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

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

[Author]

Posts