Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Sayantan Basu
15
Wont Pre-populate the selected igx-combo-box
posted

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:

<div class="d-flex">
                    <div class="w-100">
                      <igx-combo
                        appComboItemWithTooltip
                        appOpenOnFocus
                        #eventNoCombo
                        [itemsMaxHeight]="250"
                        [data]="eventInfoList"
                        [displayKey]="'eventNumber'"
                        [valueKey]="'eventNumberId'"
                        formControlName="eventNumber"
                        (selectionChanging)="handleEventNumberselection($event)"
                        searchPlaceholder="Enter a {{
                          numberLabel | lowercase
                        }} number to search"
                      >
                      </igx-combo>
                    </div>
                  </div>

TS:
populateEventNumber(eventNo: string): void {
    
    if (eventNo) {
      const eventNumber: string[] = [];
      eventNumber.push(eventNo);
      setTimeout(() => {
        this.upsertEventForm.controls.eventNumber.patchValue(eventNumber);
      }, 350);
    }
  }


because of which this happens:



it loads after a while.

pacakge-json:
 "@igniteui/material-icons-extended": "^2.10.0",
    "@infragistics/igniteui-angular": "^12.2.3",
Please advice.
Parents
No Data
Reply
  • 700
    Verified Answer
    Offline posted

    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

Children