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?
Hello Erwin,
Thank you for posting in our community.
I have created a small sample trying to reproduce the described behavior. I am using custom number input as a cell editor. On my side everything works as expected and cellEditingDone event is emitted when I am using keyboard navigation.
Please test the sample on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample.
Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.
Thank you for your cooperation.
Looking forward to hearing from you.
Regards,Viktor KombovEntry Level Software DeveloperInfragistics, Inc.
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.
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.
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
Something like this will work. Thank you for your time.
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.