Martin,

There are a few possibilities for the cause here:

• My data is being populated dynamically from the back-end rather than being statically stored and reassigned in the UI, as with your example
• I am also filtering the data of the second dropdown based on correlative values within the object selected in the first dropdown
• I am assigning the first entry in either list initially (and when the modal is re-opened, effectively resetting its base values)

Here is a basic example of the data being presented for both lists:

public designs:{name:string, facilities:string, id:number}[] = []; //filled with back-end process
public facilities:{name:string, id:number}[] = []; //filled with back-end process
public filteredFacilities:{name:string, id:number}[] = []; //filled with filterFacilities below
public newDf:{design:string, facility:string}; // built initially from designs[0], filteredFacilities[0];

filterFacilities(design:string) {
    this.filteredFacilities = this.facilities.filter(a => this.designs.filter(d => d.name == design)[0].facilities.indexOf(a.name) > -1);
    this.newDf.facility = this.filteredFacilities[0].name;
    this.newDf.facilityId = this.filteredFacilities[0].id;
};

The [(ngModel)] for the dropdowns is the newDf (design for the design dropdown; facility for facility dropdown) and as mentioned, initial values are design[0] and filteredFacilities[0]. As design changes, filteredFacilities changes, but the first entry is always the initially selected value. This is because 90% of the time, the user will go with the first value in filteredFacilities.

The error happens when a Design is chosen that does not contain the previously selected value of the Facility dropdown.

Another issue I'm facing is that I am unable to concatenate for the initial display value of another dropdown that displays the list of available Design + Facility mappings:

public dfMappings: {design:string, facility:string, id:number}[] = []; //initialized by back-end process
public fromMapping: {design:string, facility:string, id:number}; //initialized as dfMappings[0]

I have tried the below in initializing the input's view (note, once dropdown is opened, all dfMappings show as "<design> for <facility>":

• {{fromMapping.design + ' for ' + fromMapping.facility}}
• {{fromMapping.design}} for {{fromMapping.facility}}
• {fromMapping.design}} + ' for ' + {{fromMapping.facility}}

I put the above as values for [value], using the (dropdown id) fromMap.selectedItem?.value notation for fromMapping and directly using fromMapping.

[(ngModel)]="fromMapping" and value passed to the input from the dropdown is a mapping of the same structure.

Hello Chris,

Thank you for getting back to me!

I’m glad that you have managed to achieve your requirements.

Thank you for using Infragistics Components!

Best Regards,
Martin Evtimov
Associate Software Developer
Infragistics, Inc.

That works, slightly differently than implemented (I used e.newValue !== undefined) to process new values.

Ok, so I've rooted out another issue related to dropdowns. The (onSelection) is firing when it's being created because it is being pre-populated with a value. Is there a way to prevent the onSelection action during render?

I have a grid that waits for user input to populate, but one of the dropdowns fires on render and on occasion, the grid populates without interaction, and without any useful data. I'm hoping to prevent this for improved user experience.

Hello Chris,

I’m glad that you find the provided information helpful.

Thank you for using Infragistics Components!

Best Regards,
Martin Evtimov
Associate Software Developer
Infragistics, Inc.