Hello,I use a grid with a lot of cells like this:
I would like to know if it is possible in "celledit" to select the cell value at the same time?
like this :
in order To allow the user to overwrite the old value with the new
Thanks in advance,
best regards
Philippe DUFEIL
Hello Philippe,
Thank you for posting in our community!
I have been looking into your question and an approach I could suggest in order to achieve your requirement is defining a custom template, that will be used when a cell is in edit mode, and using the igxFocus and igxTextSelection directives as the igxFocus will focus the element that it is applied to, and igxTextSelection will select the content of the element. Afterwards, this template should be set to the cellEditorTemplate property of each column that requires it.
Additionally, in order to demonstrate my suggestion, I have prepared a small sample where I am using the abovementioned approach and as could be observed in the attached GIF file, when entering edit mode for any cell (i.e., double or single click), the value of the cell is selected.
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.
Looking forward to your reply.
Sincerely,Riva IvanovaEntry Level Software Developer
Hello Riva,
I have applied your solution and I am satisfied with the behaviour.
Thanks a lot.
Sincerely
Hello Riva,Following the modification I made, I have a regression. Indeed, my cell was of type 'number' but now I can enter characters.The [dataType]="'number'" on the igx-column is no longer operational.I tried to add type='number' to the <input><ng-template #cellEditTemplate igxCellEditor let-cell="cell"> <igx-input-group> <input igxInput [(ngModel)]="cell.editValue" [igxFocus]="true" [igxTextSelection]="true" /> </igx-input-group></ng-template>Do you have a solution to handle only numbers in my template cell ?
Regards,
Philippe Dufeil
I have been looking into your question and what I could say is that the default editing template for number dataType internally sets the input property to type number, however, when using custom templates, this should be set manually as demonstrated in our Cell Editing Template section here.
Regarding your requirement, setting the type attribute of the input property to number will provide the built-in validation and reject non-numerical entries.
Additionally, I have modified the previously attached sample, in order to demonstrate my suggestion and it could be found here.
Please test it on your side and let me know if you need any further assistance.
Looking forward to hearing from you.
I'm really sorry, I checked your answer but now I have this error message:
Uncaught DOMException: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection. at localhost:4200/main.js:1:1164477 at Ee.<computed> (localhost:4200/polyfills.js:1:162550) at X.invokeTask (localhost:4200/polyfills.js:1:138204) at ke.runTask (localhost:4200/polyfills.js:1:133538) at invokeTask (localhost:4200/polyfills.js:1:139263) at V.invoke (localhost:4200/polyfills.js:1:139164) at Z.V.args.<computed> (localhost:4200/polyfills.js:1:162254)
However I did not modify the code, I don't understand.
Thanks for your help.
Hello again,
I have been looking into your question and the provided attachment and tried reproducing the described behavior, however, on my side, I was not able to reproduce it.
Additionally, since I am not aware of the overall configuration of your application, it would be extremely helpful if you could provide me with a small sample that demonstrates the behavior on your side. Also, if it is possible, it would be great if you could try to modify any of the previously provided samples, so it reproduces the issue.
Having a sample, which I can debug on my side, will be highly appreciated and extremely helpful for providing you with a solution as soon as possible.
Hello,
Sorry to reply so late, I didn't know how to make an sample of my problem available to you.
In fact, I upgraded my development environment and the problem was solved.
I don't know why but the main thing is that it works.
Best regards,