jQuery UI Widgets Forums Plugins Data Adapter Reactjs Jqxcombobox not refreshing on Databind

This topic contains 2 replies, has 2 voices, and was last updated by  mrkhanakia 2 years, 9 months ago.

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

  • mrkhanakia
    Participant

    I have jqxcombobox in reactjs and i have a form to add new items but after adding new items i want to refresh and load the new items in combobox via Ajax so i call the method this.dataAdapter.dataBind() but it does not refresh the data in combobox

    
        let source =
            {
                datatype: 'json',
                datafields: [
                    { name: this.props.valueMember },
                    { name: this.props.displayMember }
                ],
                url: this.props.url,
                async: false
            };
        this.dataAdapter = new $.jqx.dataAdapter(source, { async: false });
     <JqxComboBox ref='Combo'
                  width={this.props.width} height={28} selectedIndex={-1} source={this.dataAdapter}
                  displayMember={this.props.displayMember} valueMember={this.props.valueMember}
              />
    • This topic was modified 2 years, 9 months ago by  mrkhanakia.
    • This topic was modified 2 years, 9 months ago by  mrkhanakia.

    Hristo
    Participant

    Hello mrkhanakia,

    I tested the example below and it seems to work fine:
    app.js:

    import React from 'react';
    import ReactDOM from 'react-dom';
     
    import JqxComboBox from '../../jqwidgets-react/react_jqxcombobox.js';
    
    class App extends React.Component {
    	componentDidMount() {		
    		setTimeout(() => {
    			let newData = [
    				{
    					"CustomerID": "ALFKI",
    					"CompanyName": "Alfreds Futterkiste",
    					"ContactName": "Maria Anders",
    					"ContactTitle": "Sales Representative",
    					"Address": "Obere Str. 57",
    					"City": "Berlin",
    					"Country": "Germany"
    				},
    				{
    					"CustomerID": "ANATR",
    					"CompanyName": "Ana Trujillo Emparedados y helados",
    					"ContactName": "Ana Trujillo",
    					"ContactTitle": "Owner",
    					"Address": "Avda. de la Constitucin 2222",
    					"City": "Mxico D.F.",
    					"Country": "Mexico"
    				}
    			];
    			
    			let source2 =
                {
                    datatype: 'json',
    				datafields: [
    					{ name: 'CompanyName' },
    					{ name: 'ContactName' }
    				],
    				localdata: newData
                };
    			let dataAdapter2 = new $.jqx.dataAdapter(source2, { async: false });
    			this.refs.Combo.source(dataAdapter2);
    		}, 2000);
    		
        }
      render () {
        let source =
    	{
    		datatype: 'json',
    		datafields: [
    			{ name: 'CompanyName' },
    			{ name: 'ContactName' }
    		],
    		url: '../sampledata/customers.txt',
    		async: false
    	};
    	let dataAdapter = new $.jqx.dataAdapter(source, { async: false });
    	return (
     
          <JqxComboBox ref='Combo'
             width={200} height={40} source={dataAdapter} selectedIndex={1}
    		 displayMember={'ContactName'} valueMember={'CompanyName'}
          />
     
        )
      }
    }
    
    ReactDOM.render(<App />, document.getElementById('app'));

    Could you provide me more details? Do you receive any error message in the console?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    mrkhanakia
    Participant

    Yes it works now thanks

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.