Reactjs Jqxcombobox not refreshing on Databind

[mrkhanakiaParticipant]

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

[HristoParticipant]

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

[mrkhanakiaParticipant]

Yes it works now thanks

[Author]

Posts