jQuery UI Widgets Forums React Load new data to dropdownlist when button click

This topic contains 5 replies, has 2 voices, and was last updated by  soojung 5 years, 11 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • soojung
    Participant

    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, 11 months ago by  soojung.

    assembler
    Participant

    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.


    soojung
    Participant

    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;
        }

    assembler
    Participant

    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, 11 months ago by  assembler.

    assembler
    Participant

    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, 11 months ago by  assembler.

    soojung
    Participant

    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>
            );
        }
    }
    
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.