DataGrid: Custom editors in Angular not working

[guymid]

trafficstars

Describe the bug There is an example of a custom editor in the JavaScript examples (test-custom-editor) but none in Angular. I tried to apply the JavaScript approach in Angular but could not get it to work. I also tried using an Angular component. This partially works but behavior is erratic and the edit state of the cells are not reverted after leaving the cell.

As the issue with the edit state not being reverted is similar to https://github.com/infor-design/enterprise/issues/6781 there is perhaps some common cause for that issue.

To Reproduce JavaScript approach with description: https://stackblitz.com/edit/ids-quick-start-1411-an77zs?file=src/app/datagrid-editor-example.ts

Angular approach with description: https://stackblitz.com/edit/ids-quick-start-1411-cphvqw?file=src/app/datagrid-editor-example.ts

Expected behavior Different custom editors per row should function correctly as it does on the test-custom-editor example.

Version

• ids-enterprise: v4.59.2

Platform

• Infor Application/Team Name: Orchestrator

[tmcconechy]

I just want to point out that...

a) the editors do generally work as here is an example https://main-enterprise.demo.design.infor.com/components/datagrid/test-custom-editor.html b) trying the JS approach example i am seeing an error that indicates you might have missed a function in the editor...

You do need to implement all of these functions https://github.com/infor-design/enterprise/blob/main/app/views/components/datagrid/test-custom-editor.html#L13-L44

You might also consider using two columns? But we will get to this as soon as we can.

[guymid]

I've updated my JavaScript example with the missing functions but that does not change the error or the behavior.

Even though the test-custom-editor example proves that the custom editor works in JavaScript, the implementation in Angular has to be different and my attempt does not work. Maybe it's my approach that's wrong, or maybe it's something with how the Angular/TypeScript code layers over the JavaScript. Either way, an example in Angular would demonstrate the correct approach or would have led to fixing any issues.

[yohannahbautista]

@guymid @tmcconechy @ericangeles Hello, still looking into it, but I found an example page that uses the editor as component approach: http://localhost:4200/ids-enterprise-ng-demo/datagrid-angular-editor

[tmcconechy]

@guymid does that example help teh source is in the repo:

https://github.com/infor-design/enterprise-ng/blob/main/src/app/datagrid/datagrid-angular-editor.demo.html https://github.com/infor-design/enterprise-ng/blob/main/src/app/datagrid/datagrid-angular-editor.demo.ts

[ericangeles]

@guymid as provided by @yohannahbautista and @tmcconechy above you can try and check that out. I'll be closing now this issue.

[CindyMercadoReyes]

This issue is now resolved.