Cascade dropdownlist in grid with remote data

Question

Hi,I'm encountering an issue while trying to implement cascading dropdown lists in my Angular grid with modal editing. The child dropdown list is supposed to fetch data via an Angular service that retrieves it from the backend and populates the dropdown. However, I haven't been able to get this to work.Although the service correctly returns the data, the child dropdown list does not populate as expected. I've tried following the Syncfusion documentation, but the examples provided only cover local data and filtering, not remote data sources.I'm attaching a sample project for reference. I would greatly appreciate any assistance you can provide.Kind regards,

Aishwarya Rameshbabu · Accepted Answer

Hi Gabriel Alva,Based on the shared information, you wanted to update the data of one DropDownList based on another DropDownList within the edit form of the Syncfusion Grid. For the child DropDownList rendered for the column “UoM”, you are fetching the data using the selected “id” value of the parent dropdown rendered for the column “Description”. We have updated your sample according to your requirements using the cell-edit-template feature of the Grid, where we updated the dataSource for the child DropDownList (UoM) in the change event of the parent DropDownList (Description). Please refer to the following code example, sample, and video demonstration for more detailed information. Demo.component.html

………….., …………..,

Demo.component.ts this.materialParams = { create: () => { // to create input element this.materialElem = document.createElement('input'); return this.materialElem; }, read: () => { // return edited value to update data source return (this.materialObj as DropDownList).value; }, destroy: () => { // to destroy the component. (this.materialObj as DropDownList).destroy(); }, write: () => { // to create component this.materialObj = new DropDownList({ dataSource: new DataManager(this.materialList), fields: { value: 'id', text: 'codigoDescripcionCortaMaterial' }, filtering: (e: any) => { let query = new Query(); // set the filter type as 'contains' query = e.text !== '' ? query.where( 'codigoDescripcionCortaMaterial', 'contains', e.text, true ) : query; query = query.take(100); e.updateData(this.materialList, query); }, placeholder: 'Select a Description', change: (e) => { this.setUnitOfMeasurementMaterialValues(e); this.setRequisitionDetailMaterialValues(e); this.calculateTotalCost(e); (this.unitObj as DropDownList).enabled = true; // Updating the data of unitOfMeasurementMaterialList dropdown (this.unitObj as any).dataSource = this.unitOfMeasurementMaterialList; ((this.unitObj as DropDownList).value as string) = ''; (this.unitObj as DropDownList).dataBind(); }, allowFiltering: true, floatLabelType: 'Never' }); this.materialObj.appendTo(this.materialElem); } }; this.unitOfMeasurementMaterialParams = { create: () => { this.unitElem = document.createElement('input'); return this.unitElem; }, read: () => { return (this.unitObj as DropDownList).text; }, destroy: () => { (this.unitObj as DropDownList).destroy(); }, write: () => { this.unitObj = new DropDownList({ dataSource: this.unitOfMeasurementMaterialList as any, fields: { text: 'abreviaturaUnidadMedida', value: 'id' }, enabled: false, floatLabelType: 'Never', placeholder: 'Select a Unit', }); this.unitObj.appendTo(this.unitElem); } }; Updated Sample: angular syncfusion dropdownlist ticket (forked) - StackBlitzVideo Demo: Please find in the attachment.If you need any other assistance or have additional questions, please feel free to contact us.RegardsAishwarya RAttachment: 194096VideoDemo_edead338.zip

Johnson Soundararajan S · Answer

Hi
Gabriel Alva,Greetings
from Syncfusion support.Upon reviewing your query,
we have noticed that you are facing an issue with implementing the Cascading
DropdownList component using remote data binding in the Edit form of the
Syncfusion Grid. Specifically, there is a problem with the child dropdown binding
to the remote service.We have created a sample
based on the shared information. Please refer to the sample below where we used
the Url Data service for binding data in the child dropdown, which loads the
data properly.Sample: Syncfusion-content
- Ej2 Angular Docs (forked) - StackBlitzIf you are still
encountering issues, please ensure that your backend handles the queries
correctly, as the child dropdown data is fetched based on the query parameter
passed from the parent dropdown's change event. Additionally, you mentioned
that you have attached a sample, but we could not find any attachments. So,
Please provide a detailed explanation of the issue you are facing, along with a
sample and video demonstration for further validation.RegardsJohnson S

Gabriel Alva · Answer

Hi,I'm so sorry, I don't know why the sample didn't copy. Here is the StackBlitz link; I would appreciate it if you could check it out.SAMPLE

Aishwarya Rameshbabu · Answer

Hi Gabriel Alva,Upon reviewing the sample, we observed that you are attempting to implement Cascading DropDownList in the Grid's edit form for the columns “Descripcion” and “UoM”. While our documentation covers this topic extensively with local data, you need to apply it using Remote data. We have provided a sample using Remote data for your reference. In your example, you initially bind the child dropdown's data with an empty array and update it during the parent dropdown's change event. This approach only updates the data object associated with the childGrid's dataSource property, without affecting the dataSource of the child dropdown, resulting in no records being displayed. Therefore, we recommend utilizing the cell edit template feature of the Grid to render the Cascading DropDownList in the edit form, as demonstrated in the sample below.Sample: Syncfusion-content - Ej2 Angular Docs (forked) - StackBlitzIn this sample, Cascading DropDownLists have been rendered in the edit form of the Grid for the columns 'Ship Country' and 'Ship State'. Kindly review the following code lines and documentation link for more detailed information. App.Componet.ts

this.countryParams = {

create: () => {

this.countryElem = document.createElement('input'); // to create input element

return this.countryElem;

},

read: () => { // return edited value to update data source

return (this.countryObj as DropDownList).text;

},

destroy: () => { // to destroy the component.

(this.countryObj as DropDownList).destroy();

},

write: () => { // to create component

this.countryObj = new DropDownList({

dataSource: new DataManager(this.country),

fields: { value: 'Designation', text: 'ShipCountry' },

change: () => {

(this.stateObj as DropDownList).enabled = true;

// Creating a filter query to filter the value of parent dropdown with the data bound child dropdown.

const tempQuery: Query = new Query().where('Designation', 'equal', (this.countryObj as any).value);

// Binding the filter query to child dropdown

(this.stateObj as DropDownList).query = tempQuery;

((this.stateObj as DropDownList).text as string) = '';

(this.stateObj as DropDownList).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 as DropDownList).text;

},

destroy: () => {

(this.stateObj as DropDownList).destroy();

},

write: () => {

this.stateObj = new DropDownList({

dataSource: new DataManager({

url: 'https://services.syncfusion.com/js/production/api/UrlDataSource',

adaptor: new UrlAdaptor,

crossDomain: true

}),

fields: { value: 'Employees', text: 'Address' },

enabled: false,

placeholder: 'Select a state',

floatLabelType: 'Never'

});

this.stateObj.appendTo(this.stateElem);

}

};

Gabriel Alva · Answer

Hi Aishwarya,Thank you for your assistance. I’ve reviewed the documentation and examples provided. From what I understand, in those cases, both the parent and child dropdown lists contain all the data, and the parent dropdown filters the child dropdown using a query triggered by the "change" event.In my situation, however, I don't have the full data set for the child dropdown to apply filtering. Instead, I use an Angular service that fetches the child dropdown data based on the parent dropdown's selected ID. Could you kindly update my StackBlitz sample to reflect this scenario? This would help me align it with my full project.I appreciate your continued support!Regards.

Gabriel Alva · Answer

Hi Aishwarya Rameshbabu,Your advice was incredibly helpful, and I was finally able to resolve my issue. I'll mark your last message as the accepted answer.Thank you again for your assistance!Best regards,Gabriel

Aishwarya Rameshbabu · Answer

Hi
Gabriel Alva,You’re
most welcome. We are happy to hear that the provided solution was helpful.
Please get back to us if you need any other assistance.RegardsAishwarya
R