Hi everyone,
I use an igx-grid in my application. It looks like this:
And my test-data is defined like this:
In the table I display simple input-fields which hold my data.
However, when my cursor is in the input field, I can press mostly all keys. But I cannot press the space button, the input-field simply does not add a whitespace-character to my text. The navigation with the left and right arrow-keys does also not work in this input-field.
Is there something I need to change or anything else I need to do, to make the input-fields work correctly in an igx-grid?
If you need further information, please let me know.
Thanks in advance.
Regards
Michael
Hello Michael,
Thank you for posting in our community!
I have been looking into your question and an approach I could suggest is using the input element’s keydown event and calling it’s stopPropagation method.
For this specific example, this should look like the following:
// component.html <igx-column header="input header" field="value"> <ng-template igxCell let-cell="cell"> <igx-input-group> <input igxInput type="text" [(ngModel)]="cell.row.data.value" (keydown)="onKeyDown($event)" /> </igx-input-group> </ng-template> </igx-column>
// component.ts public onKeyDown(keyDown: KeyboardEvent) { keyDown.stopPropagation(); }
Additionally, in order to demonstrate my suggestion, I have prepared a small sample, where I am using the abovementioned approach and I am able to add a whitespace character and also to navigate with the left and right arrow keys.
Here could be found my sample for your reference. Please test it on your side and let me know if you need any further assistance regarding this matter.
Looking forward to your reply.
Sincerely,Riva IvanovaEntry Level Software Developer