Custom Template is not rendering in Combobox

[Deepak Jain]

[Deepak Jain]

Hello Team,

Custom Template is not rendering in  Combobox

 

 

                [fields]='{text:control.AutoCompleteModel.TextColumn, value: control.AutoCompleteModel.ValueColumn}'

                cssClass="e-outline"

                formControlName="{{index!=undefined? control?.FieldName+index: control?.FieldName}}" autocomplete="off"

                [ngClass]="{ 'is-invalid':  control.form.submitted && f[control.FieldName].errors, disabled: control?.IsReadOnly }"

                [allowFiltering]='true' [enabled]="!control?.IsReadOnly"

                [popupWidth]="control.AutoCompleteModel.Width+'%'" [popupHeight]='popupHeight'

                [placeholder]="control?.PlaceHolder" [itemTemplate]='itemTemplate' (created)="controlCreated(select)"

                (focus)="focusColorService.focusIn($event, select, control); controlFocus(control, select)" (change)="controlChange($event, control, select)"

                (keydown)="controlKeyDown($event , control, select)" (filtering)="controlFiltering($event, select)"

                (blur)="focusColorService.focusOut($event, select, control); controlBlur($event, select, control);"

                (beforeOpen)="popupBeforeOpen($event, select)" (keyup)="controlKeyup($event, control, select)">

               

                   

                        *ngIf="control.AutoCompleteModel.Columns!=null">

                       

                       

                           

                                class="width{{d.Width}} overflow-hidden autobox pl-1 pr-1" style="overflow: hidden;">

                                {{data[d.FieldName]}}

                           

                           

                       

                       

                   

                   

                        {{data[control.AutoCompleteModel.TextColumn]}}

                   

               

               

                   

                       

                           

                               

                                    *ngFor="let d of control.AutoCompleteModel.Columns"

                                    class="width{{d.Width}} columnfirst pl-1 pr-1">{{d['HeaderText']}}

                           

                       

                   

               

           

---

BC Berly Christopher Syncfusion Team November 10, 2020 02:44 PM UTC

Hi Deepak, 

  

Greetings from Syncfusion support. 

  

While checking the provided code example, there is no information about itemTemplate defined in the combobox component. But this is working fine at our end. So, we have prepared the sample with custom template and attached below. 

  

Sample Link: https://stackblitz.com/edit/angular-odbhre?file=app.component.html  

  

UG Link: https://ej2.syncfusion.com/angular/documentation/combo-box/templates/#item-template  

  

Demo link: https://ej2.syncfusion.com/angular/demos/#/material/combo-box/template  

  

Also, please check the above sample and share the itemTemplate rendering information and Syncfusion product version else modify the attached sample with reported issue that will help us to check and proceed further at our end. 

  

Regards, 

Berly B.C 

Marked as answer

Need More Help?

Get personalized assistance from our support team.

Contact Support

SIGN IN To post a reply.

[Berly Christopher]

Hi Deepak, 

  

Greetings from Syncfusion support. 

  

While checking the provided code example, there is no information about itemTemplate defined in the combobox component. But this is working fine at our end. So, we have prepared the sample with custom template and attached below. 

  

Sample Link: https://stackblitz.com/edit/angular-odbhre?file=app.component.html  

  

UG Link: https://ej2.syncfusion.com/angular/documentation/combo-box/templates/#item-template  

  

Demo link: https://ej2.syncfusion.com/angular/demos/#/material/combo-box/template  

  

Also, please check the above sample and share the itemTemplate rendering information and Syncfusion product version else modify the attached sample with reported issue that will help us to check and proceed further at our end. 

  

Regards, 

Berly B.C