Cascading DropDownList with remote data with Grid editing

Question

Hello TeamWith burned data the control works fine, but I want to bring information from a dependent service to the id I select from the list abovengOnInit() { // Primer DropDown this.TablaSegundaria = { create: () => { this.selecTablaElement = document.createElement('input'); return this.selecTablaElement; }, read: () => { return this.selecTablaObj.text; }, destroy: () => { this.selecTablaObj.destroy(); }, write: async () => { this.selecTablaObj = new DropDownList({ dataSource: this.TablaSegundariaNames, fields: { value: 'id', text: 'nombre' }, change: async () => { this.state = this.cargarDataColumn(this.selecTablaObj.value); debugger this.selecColumnsObj.enabled = true; const tempQuery: Query = new Query().where('idColumn', 'equal', this.selecTablaObj.value); this.selecColumnsObj.query = tempQuery; this.selecColumnsObj.text = null; this.selecColumnsObj.dataBind(); }, placeholder: 'Seleccione una Tabla', floatLabelType: 'Never' }); this.selecTablaObj.appendTo(this.selecTablaElement); } }; // Segundo DropDown this.Columnasargs = { create: () => { this.selecColumnsElement = document.createElement('input'); return this.selecColumnsElement; }, read: () => { return this.selecColumnsObj.text; }, destroy: () => { this.selecColumnsObj.destroy(); }, write: () => { this.selecColumnsObj = new DropDownList({ dataSource: new DataManager(this.state as unknown as Object[]), fields: { value: 'idColumn', text: 'nameColumn' }, enabled: false, placeholder: 'Seleccione una columna', floatLabelType: 'Never' }); this.selecColumnsObj.appendTo(this.selecColumnsElement); } }; // Fin segundo DropDown this.servicio.CargarDatos().subscribe((res: Tabla[]) => { console.log(res); this.data = res; }); } cargarDataColumn(id): any { debugger this.state = this.servicio.llaves(id).pipe( map((results: { [key: string]: Object; }[]) => { debugger console.log(results); return results; }) ); // this.state = [ // { nameColumn: 'id_gen', idColumn: '1' }, // { nameColumn: 'name_gen ', idColumn: '1'}, // { nameColumn: 'lastName_gen', idColumn: '1'}, // { nameColumn: 'id_inv', idColumn: '2'}, // { nameColumn: 'name_inv ', idColumn: '2'}, // { nameColumn: 'last_inv', idColumn: '2'} // ]; }Html:

e-column> e-column> e-columns> ejs-grid>How can I run a service to send the id of the first list and fetch the data from the second list.Thank you very much for the help

Balaji Sekar · Accepted Answer

Hi Cristian, Greetings from syncfusion support. Query : How can I run a service to send the id of the first list and fetch the data from the second list. From your query we could see that you need to change the dataSource ( from server ) of the dropdown in another dropdown’s change event. To do that we need to directly change the dataSource of the ( stateObj ) dropdown object. Please refer the below code example sample for more information. Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/angular_core_dropdown_cascading-1182496790.zip App.component.html

App.component.ts export class FetchDataComponent { --------- ngOnInit(): void { -------- this.countryParams = { create: () => { this.countryElem = document.createElement('input'); return this.countryElem; }, read: () => { return this.countryObj.text; }, destroy: () => { this.countryObj.destroy(); }, write: () => { this.countryObj = new DropDownList({ dataSource: new DataManager(this.country), fields: { value: 'countryId', text: 'countryName' }, change: () => { const commQuery: Query = new Query(); new DataManager({ url: "/Home/UrlDatasource", adaptor: new UrlAdaptor }) .executeQuery(commQuery) .then((a:any) => { // change the datasource of the dropwon element this.stateObj.dataSource =(DataUtil.distinct(a.result, "ShipCity", true)), this.stateObj.query = commQuery; this.stateObj.enabled = true; this.stateObj.dataBind(); }); }, placeholder: 'Select a country', floatLabelType: 'Never' }); this.countryObj.appendTo(this.countryElem); } }; this.stateParams = { create: () => { this.stateElem = document.createElement('input'); return this.stateElem; }, read: () => { return this.stateObj.text; }, destroy: () => { this.stateObj.destroy(); }, write: () => { this.stateObj = new DropDownList({ dataSource: new DataManager(this.state), fields: { value: 'ShipCity', text: 'ShipCity' }, enabled: false, placeholder: 'Select a state', floatLabelType: 'Never' }); this.stateObj.appendTo(this.stateElem); } }; } } Please get back to us, if you need further assistance on this. Regards, Balaji Sekar

Cristian Silva · Answer

Thanks, it works fine.If you wanted the data selected in the second list to no longer be in the list of the next record, what could you do?

Rajapandi Ravi · Answer

Hi Cristian, 

Thanks for the update. 

Based on your update we are unclear about the mentioned query. So, please provide more information like pictorial or video representation of your requirement it will be help us to provide the proper solution. 

Regards, 
Rajapandi R