1. Home
  2. Forum
  3. Angular - EJ 2
  4. Cascading DropDownList with remote data with Grid editing

Cascading DropDownList with remote data with Grid editing

Hello Team


With burned data the control works fine, but I want to bring information from a dependent service to the id I select from the list above


ngOnInit() {

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

<ejs-grid locale="es-CO" [dataSource]='ForeingKeys' [editSettings]='editSettings' [toolbar]='toolbar' style="width: auto;">
<e-columns>
<e-column field='tabla' headerText='tabla' editType='dropdownedit' [edit]='TablaSegundaria' width=150>e-column>
<e-column field='columna' headerText='Columna' editType='dropdownedit' [edit]='Columnasargs' width=150>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


3 Replies 1 reply marked as answer
BS Balaji Sekar Syncfusion Team June 9, 2020 12:27 PM UTC

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. 
 
 
 
App.component.html 

<ejs-grid #grid [dataSource]='data' allowGrouping="true" allowFiltering="true" [editSettings]='editSettings' [toolbar]='toolbar' allowPaging="true" allowSorting="true" height="320"> 
    <e-columns> 
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' isPrimaryKey='true' width=100></e-column> 
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 
        <e-column field='ShipCountry' headerText='Ship Country' editType='dropdownedit' 
                  [edit]='countryParams' width=150></e-column> 
        <e-column field='ShipCity' headerText='Ship State' editType='dropdownedit' [edit]='stateParams' width=150></e-column> 
    </e-columns> 
</ejs-grid> 
 
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 


Marked as answer
CS Cristian Silva June 15, 2020 01:21 PM UTC

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?


RR Rajapandi Ravi Syncfusion Team June 16, 2020 01:06 PM UTC

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 


Loader.
Up arrow icon