showing empty list when open popup and when used with ng-template #itemtemplate

[Goutham]

Hi,

Please help me to resolve this.Thanks in advance.

I am using dropdown list as below

dropdown

<ejs-dropdownlist #taskTitleDp [dataSource]="taskTilteList" placeholder="Task Title"

                  formControlName="taskId"

                  [fields]="taskTitleFields" [allowFiltering]="true">

  <ng-template #itemTemplate let-data="">

    <div>{{data.TaskTitle}}-{{data.ClientName}}</div>

  </ng-template>

</ejs-dropdownlist>

clear button

 <a class="a-clear-task-title" (click)="onClearTaskTitleDp()">Clear</a>

ts file logic

 onClearTaskTitleDp() {

    this.sheduleForm.patchValue({

      taskId: null

    });

  }

error:

steps to reproduce:

1.first click on clear button,don't open popup first

2.then open popup

3.must use ng-template #itemTemplate

[Berly Christopher]

Hi Goutham, 

  

Greetings from Syncfusion support. 

  

We were able to reproduce the reported issue at our end. The reported issue is caused due to setting the default value as “” in the form initialization. So, we suggest you to set the default value as null to get rid of the reported issue in your end. 

  

  createForm(): void { 

    this.sheduleForm = this.fb.group({ 

      taskId: [null, Validators.required] 

    }); 

  } 

 

  

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

  

Regards, 

Berly B.C 

[Goutham]

Hi,

Thanks for getting back very soon.

In my question,i missed one point that if i set taskId with some initial value,means in your example

Now clear the value of control with help of button,now open popup.the issue as shown below

[Berly Christopher]

Hi Goutham, 

  

We have validated the shared code at our end. While clearing the value from the component before popup open action, the updated data source will be updated to the popup with some delay since item template is used in the component. So, we suggest you to enable the filtering action in the beforeOpen event since we will perform the filtering action after popup gets opened.  

  

Please find the modified sample from the below link. 

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

  

  public onOpen() { 

    this.dropObj.allowFiltering = true; 

  } 

      <ejs-dropdownlist #dropObj id="employees" [dataSource]="taskTilteList" [fields]="taskTitleFields" 

        [popupHeight]="height" [showClearButton]="clear" (beforeOpen)="onOpen()" formControlName="taskId" [placeholder]="watermark"> 

        <ng-template #itemTemplate let-data> 

          <div> 

            <div>{{data.TaskTitle}}-{{data.ClientName}}</div> 

          </div> 

        </ng-template> 

      </ejs-dropdownlist> 

 

 

  

Regards, 

Berly B.C