ejs-grid with editType='dropdownedit' broken under Angular 9

[pcafstockf]

Easiest way to reproduce this is to go to the official documentation at:

Essential Studio for Angular > Data Grid > Editing > Inline Editing

The sample on that page works, but only because the page is using Angular 6.1.10.

But... 

If you click the "Edit in StackBlitz" link, it will bring the sample up using Angular 9.1

Wait for the devServer to start and then simply double click to edit a row in the data grid.  Then click on the "Ship Country" column (which uses editType='dropdownedit').  

You will get a message "The Request Failed"

P.S.

I also submitted a defect report for this.  What is the preferred approach?  

To post here in the forums and let SyncFusion confirm and enter a defect, or to enter the defect myself and cross post in these forums, or some other approach?

[Rajapandi Ravi]

Hi pcafstockf, 

Greetings from syncfusion support 

We are able to reproduce the issue our stackblitz in the inlineEditing. We have facing some technical issue in stackblitz while using the latest dependencies in angular platform and it may be a cause of server problem. For your reference we have prepared a Angular 9 sample. In this sample the editparams for the ShipCountry columns works fine. Please refer the below sample and screenshot for more information. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/angular9_customdropdown_in_grid_toolbar-346765145.zip 

Screenshot: 

 

 

Regards, 

Rajapandi R

[pcafstockf]

Hi Rajapandi,

This is not a StackBlitz issue, it is definitely a problem with Angular 9 based Data Grids.

The code you attached/sent is actually quite different from the StackBlitz code (and from the documented sample on that page).

You can easily download the StackBlitz project to your local machine and run it there to see the problem.  And the advantage of that, is that you can create two projects, revert one of them to Angular 8 (but otherwise identical) and see that it works as expected.  This only fails with Angular 9.

Just to be clear, we are talking about the "Ship Country" column, not any other dropdown list control on the page.

The problem is with this code:

      <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column>

Not with this code:

      <ejs-dropdownlist id='newRowPosition' #ddsample [dataSource]='newRowPosition' index=0

Thanks,

-Earl

[Rajapandi Ravi]

Hi pcafstockf, 

Thanks for the update 

We are able to reproduce the issue our stackblitz only. We fix this issue soon in our end. We have facing some technical issue in stackblitz while using the latest dependencies in angular platform and it may be a cause of server problem. For your reference we have prepared a Angular 9 sample which was same as in the stackblitz. In this sample the editparams for the ShipCountry columns works fine. Please refer the below sample and screenshot for more information. 

Sample: https://www.syncfusion.com/downloads/support/forum/153972/ze/my-app-1653411848.zip 

Video demo: https://www.syncfusion.com/downloads/support/forum/153972/ze/Untitled598996999.zip 

Screenshot: 

 

Angular 9 packages: 

 

If you still face the issue, please reproduce the issue with our above attached sample 

Regards, 

Rajapandi R 

[pcafstockf]

Hi pcafstockf, 

Thanks for the update 

We are able to reproduce the issue our stackblitz only. We fix this issue soon in our end. We have facing some technical issue in stackblitz while using the latest dependencies in angular platform and it may be a cause of server problem. For your reference we have prepared a Angular 9 sample which was same as in the stackblitz. In this sample the editparams for the ShipCountry columns works fine. Please refer the below sample and screenshot for more information. 

Sample: https://www.syncfusion.com/downloads/support/forum/153972/ze/my-app-1653411848.zip 

Video demo: https://www.syncfusion.com/downloads/support/forum/153972/ze/Untitled598996999.zip 

Screenshot: 

 

Angular 9 packages: 

 

If you still face the issue, please reproduce the issue with our above attached sample 

Regards, 

Rajapandi R 

Hi Rajapandi,

The video link works, but the link for the Sample project gives:

<Code>AccessDenied</Code>

-Earl

[Rajapandi Ravi]

Hi pcafstockf, 

Sorry for the inconvenience 

Now you can access the sample project in the below link. Please find the below sample link for more information. 

Sample Project: https://www.syncfusion.com/downloads/support/forum/153972/ze/my-app-2069073859.zip 

Regards,
Rajapandi R 

[pcafstockf]

Hi pcafstockf, 

Sorry for the inconvenience 

Now you can access the sample project in the below link. Please find the below sample link for more information. 

Sample Project: https://www.syncfusion.com/downloads/support/forum/153972/ze/my-app-2069073859.zip 

Regards,
Rajapandi R 

Hi Rajapandi,

The project you posted is completely different code than your official "sample" project.

Attached is a small project created by doing what I suggested earlier (downloading the sample from StackBlitz and reconfiguring it to run locally).

You can use the attached project to see the originally reported problem... 

The dropdown list says "The Request Failed".

As you can see, the code is about as simple as it can get:

export class AppComponent {
   public data: Object[];
   public editparams: Object;

   public ngOnInit(): void {
      this.data = orderDataSource;
      this.editparams = {params: {popupHeight: '300px'}};
   }
}

<ejs-grid [dataSource]='data' [editSettings]='{allowEditing: true}'>
   <e-columns>
      <e-column field='OrderID' headerText='Order ID' isPrimaryKey='true' textAlign='Right' width='120'></e-column>
      <e-column [edit]='editparams' editType='dropdownedit' field='ShipCountry' headerText='Ship Country' width='150'></e-column>
   </e-columns>
</ejs-grid>

Thanks for looking into this.

-Earl

Attachment: d79sf2.run_2_fe4afc8f.zip

[Rajapandi Ravi]

Hi pcafstockf, 

Thanks for the update 

The reported issue occur in the older version Syncfusion package (18.1.0.348) and it has been fixed and released in the latest release Version ( v18.1.0.52 ). So we suggest to please upgrade the latest Grid version. For your reference we prepared a stackblitz sample of Grid Inline Edit with 18.1.52 package version. Please refer the below sample and release link for more information. 

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

Link : https://ej2.syncfusion.com/angular/documentation/release-notes/18.1.52/ 

Regards,
Rajapandi R  

[pcafstockf]

Hi pcafstockf, 

Thanks for the update 

The reported issue occur in the older version Syncfusion package (18.1.0.348) and it has been fixed and released in the latest release Version ( v18.1.0.52 ). So we suggest to please upgrade the latest Grid version. For your reference we prepared a stackblitz sample of Grid Inline Edit with 18.1.52 package version. Please refer the below sample and release link for more information. 

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

Link : https://ej2.syncfusion.com/angular/documentation/release-notes/18.1.52/ 

Regards,
Rajapandi R  

Hi Rajapandi.

I can confirm that it is working for me as well with this latest release.

Thank you!

-Earl

[Rajapandi Ravi]

Hi pcafstockf, 

We are happy to hear that your issue resolved. 

Please get back to us if you need further assistance. 

Regards, 

Rajapandi R