Hi,Igx-combo won't prepopulate values coming from backend unless we put setTimeOut. Is there any other way around it?
Without setTimeOut it will have the option pre-selected but won't show it in the box but upon expanding the list, it is there and selected too but not in the box itself.HTML:
Hello Sayantan,
Thank you for posting in our community!
I have been looking into your question, however, please note that according to our support policy version 12.2.3 is considered retired and is no longer eligible for Developer Support Services.
Having this in mind, I would suggest updating your application and using any of the currently supported versions of Ignite UI for Angular, which are 14.2.x and 15.1.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.
Additionally, regarding your question, what I could say, as mentioned in our documentation here, is that when the IgxComboComponent is bound to a remote service and there is a predefined selection, its input will remain blank until the requested data is loaded.
Having this in mind, I have prepared a small sample where the combo’s data is received via a remote API and a predefined selection is set. On my side, everything works as expected and when loading the page, the combo’s input remains blank for a short amount of time and after the data is loaded, the predefined selected item is displayed in the input and is marked as selected when opening the combo dropdown.
This could be observed in the attachment below:
Here could be found my sample for your reference. Please test it on your side and let me know how it behaves.
Additionally, as I am not sure how and when the selected value is set or what is the structure of the combo data, it would be highly appreciated if you could provide me with a small sample that demonstrates the behavior on your side.
Having a sample that I can debug on my side will be extremely helpful in further investigating this matter and providing you with a solution as soon as possible.
Thank you for your cooperation. Looking forward to your reply.
Sincerely, Riva Ivanova Associate Software Developer
Hi Riva,Please note of behaviour I mentioned is if we try to bind data to the combo box.In this screenshot, data is coming properly but is not being selected. It needs to show up on the combo box but won't. Upon expansion, it is showing the correct data sent from BE.sample data is an array of objects.here is the code:
Thank you for following up!
I have been looking into your clarifications and what I could say, as demonstrated in out Two-Way Binding section here, is that setting a predefined selection could be achieved via the ngModel and passing an array of items of the same type as the ones in the combobox's selection (based on valueKey).
However, from your initial forums post, I have noticed that you are using reactive forms on your side and, with this in mind, in the previously attached sample, I have set the initial selection like the following when creating the control:
constructor(fb: FormBuilder, ...) { this.registrationForm = fb.group({ // Creating the control with predefined selection based on valueKey // the igx-combo accepts an array of items // so the selcted item/items should be set as an array, e.g. [1] / [1, 3,...] product: [[1], { nonNullable: true }], }); // OR // this.registrationForm.controls['product'].setValue([1]); // this.registrationForm.controls['product'].setValue([1, 3,...]); }
In the abovementioned example, I am setting the predefined selection like the following:
product: [[1], { nonNullable: true }],
as the incoming data has the following structure:
[ { "ID": 1, "ProductName": "Chai", ... }, { "ID": 2, "ProductName": "Chang", ... }, ... ]
and the combo’s valueKey and displayKey properties are set like the following:
<igx-combo #combo [data]="data" displayKey="ProductName" valueKey="ID" formControlName="product" ></igx-combo>
From the above configuration, when the data is loaded, the first record, i.e., { ID: 1, "ProductName": "Chai" }, is marked as selected and displayed in the combo's input.
Additionally, please note, as mentioned in our Handling Selection section here, that:
When the combobox is bound to remote data, setting value/selected items through API will only take into account the items that are loaded in the current chunk. If you want to set an initial value, make sure those specific items are loaded before selecting.
However, as I am not sure of the overall configuration of your application and the isolated sample seems to be working correctly and cannot reproduce the described behaviors, I cannot tell for sure what the reason for this behavior could be without having a working sample that I can debug on my side.
Having this in mind, in order to assist you further, it would be highly appreciated if you could provide me with a small sample demonstrating the behavior on your side. Also, if possible, it would be great if you could try and modify the provided by me sample here, so it reproduces the issue.
Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample. Remove any external dependencies and code that are not directly related to the issue, zip your application, and attach it in this forum thread.