Hello!
In our grid we are using a custom number input as follow:
<ng-container *ngIf="childCol.dataType === 'number'"> <ng-template igxCellEditor let-cell="cell"> <div class="igx-input-group igx-input-group--fluent full-width"> <ct-inputNumber #inputNumber [(ngModel)]="cell.editValue" mode="decimal" [minFractionDigits]="childCol.digitsInfo" [maxFractionDigits]="childCol.digitsInfo" ></ct-inputNumber> </div> </ng-template> </ng-container>
Now the problem is that cellEditDone doesn't get triggerd when using keyboard navigation. When using the mouse to navigate the correct events are triggered. I guess I need to add some properties to our component, but what do I need to add to make the keyboard navigation work?
Something like this will work. Thank you for your time.
Hello Erwin,
I have investigated this behavior further. What I have determined is that this issue might not be directly related to our package since our input directive or the basic HTML input are working fine as a cell editor.
What I can suggest as a workaround is when you are handling the ngModelChange event of the custom input component to manually emit the cellEditDone event:
TYPESCRIPT
public onChangeHandler(input, cell): void { if (cell.value !== input.value) { const oldValue = cell.value; cell.update(input.value); const args: IGridEditDoneEventArgs = { rowID: cell.id.rowID, cellID: cell.id, rowData: cell.row.rowData, oldValue, newValue: input.value, column: cell.column, owner: cell.grid, }; cell.grid.cellEditDone.emit(args); } }
I created a small sample illustrating my suggestion, which you can find here. Please test it on your side and let me know whether you find it helpful.
Please let me know if you have any further questions and concerns.
Regards, Viktor Kombov Entry Level Software Developer Infragistics, Inc.
I created a sample using value/blur in place of ngModel: Link
Our project actually uses a numberinput from the primeng library. That one uses value/blur instead of ngModel. When calling the onChange it doesn't work like in your example. I hope this explains it a bit.
Thanks in advance
Since there may be more than one possible reason for this behavior, it will be great if I have a sample on my side that reproduces the issue.
I have created a basic sample using input editor, which is available here. If you could modify it so that it matches your scenario that would be great. Alternatively, providing a small isolated sample of your own, which I can debug on my side is going to be highly appreciated and very helpful for my further investigation.
Thank you for your cooperation.
Looking forward to hearing from you.
Thanks for the quick reply. A normal HTML <input> works indeed.
The problem we are facing is that we use a custom angular component that contains the HTML <input> element (the <ct-inputNumber> contains the HTML input component). So I think we need to add some input variables like "value" and "focus" to our custom component, but I cannot determine what we would have to add.
Does this explanation make any sense? Otherwise I will create a sample demonstrating this.