Syncfusion Angular ComboBox- Data Source Not Refreshing Based on Another ComboBox Selection

[Buddhi - BLUE LOTUS 360]

Hello,

I am using Syncfusion's Angular ComboBox component and have set up a scenario to demonstrate an issue with refreshing a ComboBox data source based on the selection of another ComboBox. Below are the details:

I have created two ComboBoxes:
Item ComboBox: Allows selection of items.
Unit ComboBox: Should refresh to show relevant units based on the selected item in the Item ComboBox.

When a user selects an item from the Item ComboBox, I call a reloadCombo() method to update the Unit ComboBox’s data source by fetching the corresponding units based on the selected item key. However, this refresh does not seem to work as expected—the data source of the Unit ComboBox is not updating.

Additional Details

1. 
   Simple Simulation: For this example, I’ve created a simple service to simulate server data retrieval based on item keys. In the actual project, I call an API to get unit data based on the selected item key
2. Project Complexity: The example provided here is simplified. My real project involves more complex multi-level parent-child relationships, so I need to follow this structure closely for compatibility with the overall application. Unfortunately, I cannot simplify the ComboBox data update logic further.
3. Methods Tried: I’ve tried calling dataBind() and refresh() on the Unit ComboBox to force an update, but neither resolved the issue.

I’ve attached a working sample of this setup for reference.
https://stackblitz.com/edit/stackblitz-starters-munk4n?file=src%2Fentity%2Fitem-response.ts

Is there a specific approach for dynamically refreshing one ComboBox based on another’s selected value within this structure? Any guidance would be greatly appreciated.

Thank You.

[Yohapuja Selvakumaran]

Hi Buddhi,

Thank you for reaching out to us.

We have carefully reviewed your requirement and would like to provide you with an optimized solution. Instead of directly updating the datasource of the ComboBox component, we recommend dynamically updating the query for each ComboBox within the change event. This method ensures that the data displayed in the dependent ComboBoxes is filtered efficiently based on the selection in the parent ComboBox.

We have created a sample implementation to demonstrate this approach. You can explore the behavior and adapt it to your use case.

Sample:
Fw1mi2 (forked) - StackBlitz

For a deeper understanding of cascading dropdowns and query updates in the Angular ComboBox component, you can refer to our detailed documentation:

Documentation:
Cascading in Angular Combo box component | Syncfusion

Regards,

Yohapuja S