Hello,

Thank you for posting into our community!

I have been looking into your question and I need to ask for some additional information. Could you please clarify what do you refer to with “update values from backend”? Do you mean that you are binding the IgxCombo’s data property to a new set of data?

I am asking this question as in an effort to reproduce the described behavior, I have prepared a small sample where I am changing the combo data on button click, however, on my side, everything works as expected and the data is displayed successfully when opening the combo dropdown. This could be observed in the below attachment:

Additionally, since I am now sure how and when you are updating the data on your side, what I could assume is that the IgxCombo’s displayKey property is not set to the appropriate field in the data source. For example:

<igx-combo
    #combo
    [data]="data"
    displayKey="name"
    valueKey="id"
></igx-combo>

this.data = [
    { id: 1, productName: "Ignite UI for Angular"},
    { id: 2, productName: "Indigo Design"},
    { id: 3, productName: "Ignite UI for jQuery"},
];

The value used for displayKey is “name”, however, the field in the data source is “productName” and in such cases the values in the combo dropdown will be displayed as empty. Having this in mind, please verify if the correct field name is provided to the displayKey property.

Additionally, if the correct field is provided and the behavior is still reproducible, it would be extremely helpful if you could provide me with a sample that demonstrates the behavior on your side. Also, if it is possible, it would be great if you could try to modify the provided by me sample, so it reproduces the issue. Having a working sample, which I could debug on my side, will be highly appreciated and extremely helpful in providing you with a solution as soon as possible.

Here could be found my sample for your reference. Please test it on your side and let me know how it behaves.

Looking forward to your reply.

Sincerely,
Riva Ivanova
Entry Level Software Developer

Furthermore, you have mentioned that you are assigning a new set of values and since I am not sure how and when this is performed on your side, I have prepared another sample where I am fetching remote data, binding it to the IgxCombo’s data and then after a few seconds the data is changed with new values. The result is the same and everything works as expected. This could be observed in the below attachment:

Additionally, you have mentioned that this behavior is occurring when the data is updated. Does this mean that when the data is bound initially everything works properly and the values are displayed as expected?

If the displayKey and valueKey properties are set accordingly, there is no reason for it not to work properly even after updating the values. However, as previously mentioned, without having a sample that I can debug on my side it is almost impossible to investigate this further, as all assumptions would not be well-grounded.

Additionally, I have noticed that you have provided the configuration of the combo, however, it would be extremely helpful if you could provide the structure of your data, populated with some test records, as well as explain how the values are updated on your side.

Also, I would strongly encourage you to try and modify the provided by me sample or provide a sample app of your own that reproduces the described behavior as it is going to be very helpful in finding the root cause of this behavior.

Thank you for your cooperation. Looking forward to your reply.

Sincerely,
Riva Ivanova
Entry Level Software Developer

Regarding the version, please keep in mind that version 8.2.17 is considered retired and with this in mind I would suggest updating your application to a newer and supported version (currently 12.3.x, 13.2.x, and 14.0.x) in order to take advantage of all new features, functionalities, and developer support. For more information, you can refer to our official Update guide.

Furthermore, regarding your query, I have looked into the provided code snippet and prepared a sample with a similar configuration. However, as there are few custom variables for which I have no knowledge of, i.e., this.testvall, this.selectedquery, checkboxinactive, I cannot tell for sure what could be the reason for this behavior.

Here could be found my sample where I have used a similar configuration for adding new items to the combo’s data source array. However, it is based only on the provided code snippets and on my side, I cannot reproduce this behavior and the data is added successfully.

Please test it on your side and check if it has a similar configuration as yours. If yes, I would strongly encourage you to try and modify it with any important aspects from your setup (mainly in the .ts file) in order to reproduce the issue.

In order to modify it, you should click the “Fork” button, apply your code wherever needed, save the changes, copy the link to it and attach the link to this forum thread.

Thank you for your cooperation. Looking forward to your reply.

Sincerely,
Riva Ivanova
Entry Level Software Developer