Using autocomplete and dropdownlist in grid dialog edit mode

[Matic]

Hi,

I'm trying to implement a form for dialog Add/Edit. I have two controls, one autocomplete and one dropdown. They both use external source to get the data.

Controls are used as this:

<ejs-autocomplete id='propOne' name="propOne" #propOne [(ngModel)]="entityData.propOne"

            [dataSource]='propOneData | async' [fields]="{ value: 'name' }" [placeholder]="'Select a propOne'"

            [minLength]="minLength" (filtering)="onFilteringPropOne($event, propOne)" (select)="onSelectPropOne($event)">

          ejs-autocomplete>

and dropdown list as:

<ejs-dropdownlist id="propTwo" name="propTwo" #propTwo[(ngModel)]="entityData.propTwo"

            [allowFiltering]='true' (filtering)="onFilteringPropTwo($event, propTwo)"

            [dataSource]='propTwoData | async' [fields]="{text: 'fullName', value: 'fullName' }"

            placeholder="propTwo" popupHeight='300px' floatLabelType='Always'>ejs-dropdownlist>

And code behind:

  public onFilteringPropOne: EmitType<FilteringEventArgs> = (e: FilteringEventArgs, remote: AutoCompleteComponent) => {

    if (e.text.length >= 2) {

      this.propOneData = this.getPropOneData(remote, e.text);

      e.preventDefaultAction = true;

    } else {

      e.cancel = true;

    }

  }

  public getPropOneData(remote: AutoCompleteComponent, text: string): Observable<PropOne[]> {

    return this.propOneService.getPropOneAutcomplete(text)

      .pipe(map((remoteData: PropOne[]) => {

        remote.hidePopup();

        setTimeout(() => remote.showPopup(), 500);

        return remoteData;

      }));

  }

  public onFilteringPropTwo: EmitType<FilteringEventArgs> = (e: FilteringEventArgs, remote: DropDownListComponent) => {

    if (e.text.length >= 2) {

      this.propTwoData = this.getPropTwoData(remote, e.text);

      e.preventDefaultAction = true;

    } else {

      e.cancel = true;

    }

  }

  public getPropTwoData(remote: DropDownListComponent, text: string): Observable<PropTwoAutoComplete[]> {

    return this.propTwoService.getPropTwoAutoComplete(text)

      .pipe(map((remoteData: PropTwoAutoComplete[]) => {

        return remoteData;

      }));

  }

The first problem I have: it works when I add one new row to the Grid. But when I try to edit that row, only autocomplete field is populated. Dropdown field stays empty. 

The second problem is, that when I open the dialog for the second time (for add or edit) I get this error in console:

ERROR TypeError: Cannot read property 'getBoundingClientRect' of null

    at AutoCompleteComponent. (drop-down-list.js:1568)

    at AutoCompleteComponent.push../node_modules/@syncfusion/ej2-angular-base/src/component-base.js.ComponentBase.trigger (component-base.js:256)

    at AutoCompleteComponent.push../node_modules/@syncfusion/ej2-dropdowns/src/drop-down-list/drop-down-list.js.DropDownList.renderPopup (drop-down-list.js:1545)

    at AutoCompleteComponent.push../node_modules/@syncfusion/ej2-dropdowns/src/auto-complete/auto-complete.js.AutoComplete.renderPopup (auto-complete.js:237)

    at AutoCompleteComponent.push../node_modules/@syncfusion/ej2-dropdowns/src/drop-down-list/drop-down-list.js.DropDownList.onActionComplete (drop-down-list.js:1487)

    at AutoCompleteComponent.push../node_modules/@syncfusion/ej2-dropdowns/src/combo-box/combo-box.js.ComboBox.onActionComplete (combo-box.js:212)

    at AutoCompleteComponent.push../node_modules/@syncfusion/ej2-dropdowns/src/auto-complete/auto-complete.js.AutoComplete.onActionComplete (auto-complete.js:171)

    at AutoCompleteComponent. (drop-down-base.js:477)

    at AutoCompleteComponent.push../node_modules/@syncfusion/ej2-angular-base/src/component-base.js.ComponentBase.trigger (component-base.js:256)

    at AutoCompleteComponent. (drop-down-base.js:474)

It seems like there is a connection left between this component when I open this component.

I need to use this approach of fetching data from the server, because the sources for both autocomplete and dropdown are simply too big.

[Balaji Sekar]

Hi Matic, 

 

We have validated your query with provided the information. We suspect that you have bound the AutoComplete and Dropdownlist components in the dialog edit form and both components are binding the dataSource using async pipe. since please share the below details to us 

1. We need confirm that whether the async pipe action return data type is Array type or not
2. Share the replication procedures with video demonstrate.
3. If you possible to share the sample with reported issue that would be help to validate further.

 

Regards, 

Balaji Sekar. 

[Matic]

1. We need confirm that whether the async pipe action return data type is Array type or not
2. Share the replication procedures with video demonstrate.
3. If you possible to share the sample with reported issue that would be help to validate further.

Just to be clear regarding number 1: I am able to use autocomplete and dropdown. Meaning: I do get the data. And I am able to add new row to grid view. The problem occurs, when I try to edit that row.

I'll try to prepare a video or/and example.

[Matic]

Here is a stackblitz example of my implementation:

https://stackblitz.com/edit/angular-ncbs3z

It's missing a service call, and I can't seem to make it work with the imports. But the code should do.

[Balaji Sekar]

Hi Matic, 

 

Thanks for your patience, 

 

Query #1:  when I try to edit that row, only autocomplete field is populated. Dropdown field stays empty.  

 

We have validated your query with provided the information and we found the cause of the problem as filtering code definition is undefined of the dropdown component. Since we have defined filtering event with remote data service handling code definition. Please refer the below sample for more information. 

 

Sample link: http://stackblitz.com/edit/angular-j84jnb?file=src/app/app.component.ts  

Query #2:  when I open the dialog for the second time (for add or edit) I get this error in console 

We have tried to reproduce the reported problem but it is unsuccessful. please refer the above sample with your requirement.if you facing same problem, could you please reproduce the reported problem in above sample and share the replication procedure to us that will help to validate further. 

Regards, 

Balaji Sekar. 

[Matic]

Thanks for your replay. 

If I open the example you sent, and I add one entry: Country: Colombia, Ctiy: City1. Then I save it. Then I try to edit it (click edit button) I get the first error:

ERROR

Error: Cannot read property 'getBoundingClientRect' of null

Then I close the edit mode (click Cancel) and click Edit again. I get:

ERROR

Error: Maximum call stack size exceeded

Why is that?

[Balaji Sekar]

Hi Matic, 

 

Thanks for your valuable patience, 

 

We have analyzed your sample with async data binding in the autoComplete component in dialogTemplate of Grid. We understood that when open a dialogTemplate that has been rendering  a autoComplete component with fetch a data asynchronous even you have to called showPopup method of autoComplete. 

 

By default, we are able to call the showPopup method once data fetching completed but In your sample, call the showPopup method without complete data fetching. It is a cause of the problem. 

 

In below code example, we have called showPopup method in dataBound event of the autoComplete when filter a autoComplete alone. Please refer the below code example and sample for more information. 

 

[app.component.html] 

 <ng-template #editSettingsTemplate let-data> 

    <div ngForm #countryForm="ngForm"> 

        .             .             .            . 

        <div class="form-group col-md-6"> 

          <ejs-autocomplete id='countryName' name="countryName" #countryName [(ngModel)]="countryData.countryName" 

            [dataSource]='countryDataSource | async' [fields]="{ value: 'name' }" [placeholder]="'Select a countryName'" 

            [minLength]="minLength" (filtering)="onFilteringCountryName($event, countryName)" (select)="onSelectCountryName($event)" (dataBound)="acDataBound($event)"  > 

          </ejs-autocomplete> 

        </div> 

      </div> 

 

 

[app.component.ts] 

export class AppComponent implements OnInit  { 

.             .            .            . 

  public isNeedShowPopup: boolean = false; 

 

 public onFilteringCountryName: EmitType<any> = (e: any, remote: AutoCompleteComponent) => { 

    this.isNeedShowPopup =true; // Set true value in isNeedShowPopup while filter the autocomplete 

    if (e.text.length >= 2) { 

      this.countryDataSource = this.getCountryData(remote, e.text); 

      e.preventDefaultAction = true; 

    } else { 

      e.cancel = true; 

    } 

  } 

  public acDataBound() {     

    if (this.isNeedShowUp) { 

      this.isNeedShowUp = false; 

      var autoComplete = (<any>document.getElementById("countryName")).ej2_instances[0]; 

      autoComplete.showPopup(); // call showPopup method, when data source is populated in the popup list.. 

    } 

  } 

 

 

 

Sample link: https://stackblitz.com/edit/angular-dialogtemplate-autocomplete-async-dhfmx8r 

 

Help Documentation: https://ej2.syncfusion.com/documentation/api/auto-complete/#databound 

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar