Combobox cascading set value in another Combobox in event change

Hello, how i can set the value from Combobox1 to combobox 2, if combobox dataSource is fired after event change on combobox1 ?

I'm having this error: When i select an option in combobox1 (comboBoxCuenta1) in combobox2 (comboBoxCuenta2) sometimes it shows the value instead of text image above:

I tried to use setTimeOut but is not working properly sometimes... 

  ticket_1.png

functionfillCmbCuenta1() {
comboBoxCuenta1 = newej.dropdowns.ComboBox({
dataSource:newej.data.DataManager({
url:urlAPI + "api/Configuracion/_ct_cmb_cuenta1",
adaptor:newej.data.WebApiAdaptor(),
crossDomain:true
}),
query:newej.data.Query()
.addParams('organizacionId', org)
.addParams('busqueda', '')
.addParams('conex', utf8_to_b64(cadena)),
placeholder:'Selecciona una cuenta',
fields: { text:'text', value:'value' },
itemTemplate:"${text}${cuentaAcumuladora}",
headerTemplate:"CuentaCuenta acumuladora",
allowFiltering:true,
filtering: (e) => {
letquery = newej.data.Query()
.addParams('organizacionId', org)
.addParams('busqueda', e.text)
.addParams('conex', utf8_to_b64(cadena));
query = (e.text !== '') ? query.where('text', 'contains', e.text, true) : query;
e.updateData(newej.data.DataManager({
url:urlAPI + "api/Configuracion/_ct_cmb_cuenta1",
adaptor:newej.data.WebApiAdaptor(),
crossDomain:true
}), query);
},
change: () => {
formObj.validate();
comboBoxCuenta2.query = newej.data.Query()
.addParams('organizacionId', org)
.addParams('busqueda', comboBoxCuenta1.itemData.text)
.addParams('filtroCuenta',comboBoxCuenta1.itemData.filtroCuenta)
.addParams('conex', utf8_to_b64(cadena)),
comboBoxCuenta2.text = null;
comboBoxCuenta2.dataBind();
//setTimeout(function(){
comboBoxCuenta2.value = comboBoxCuenta1.value;
comboBoxCuenta2.text = comboBoxCuenta1.text;
//},2500);

},
popupHeight:'500px',
sortOrder:'Descending',
});
comboBoxCuenta1.appendTo('#cmbCuenta1');
}
functionfillCmbCuenta2() {
comboBoxCuenta2 = newej.dropdowns.ComboBox({
dataSource:newej.data.DataManager({
url:urlAPI + "api/Configuracion/_ct_cmb_cuenta2",
adaptor:newej.data.WebApiAdaptor(),
crossDomain:true
}),
query:newej.data.Query()
.addParams('organizacionId', org)
.addParams('busqueda', '')
.addParams('conex', utf8_to_b64(cadena)),
placeholder:'Selecciona una cuenta',
fields: { text:'text', value:'value' },
itemTemplate:"${text}${cuentaAcumuladora}",
headerTemplate:"CuentaCuenta acumuladora",
allowFiltering:true,
filtering: (e) => {
letquery = newej.data.Query()
.addParams('organizacionId', org)
.addParams('busqueda', e.text)
.addParams('conex', utf8_to_b64(cadena));
query = (e.text !== '') ? query.where('text', 'contains', e.text, true) : query;
e.updateData(newej.data.DataManager({
url:urlAPI + "api/Configuracion/_ct_cmb_cuenta2",
adaptor:newej.data.WebApiAdaptor(),
crossDomain:true
}), query);
},
change: () => {
formObj.validate();
},
popupHeight:'500px',
sortOrder:'Ascending',
});
comboBoxCuenta2.appendTo('#cmbCuenta2');
}

1 Reply 1 reply marked as answer

SP Sureshkumar P Syncfusion Team September 22, 2022 08:26 AM UTC

Hi FRANN LP,

We suggest you update the second component value after loading the data source using actionComplete event to resolve the issue. When setting the value to the component before loading the data source the component loads the value instead of text.

We have created the cascading sample, please find the sample here: https://stackblitz.com/edit/xmvszt?file=index.js

If still, you have faced the same issue, then please replicate the reported issue on the above sample and revert us with detailed issue replication steps. These details will help us to provide an exact solution as earlier as possible.

Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Sureshkumar P


Marked as answer
Loader.
Up arrow icon