Hi,
I am using Igx-grid in one of my forms and I have implemented the functionality to edit row by clicking in different cells.
I want to select the text of editable cell because Its more easy this way to add/edit as on cell edit for user.
Whenever user tries to edit cell, It shifts the control next to value "0" so the user needs to come back for entering decimal value.
That would be nice if you guys can get me a solution.
Thanks
Hi Sean,
I am not quite sure that I got your issue completely right. Do you mean that when the cell enters edit mode, the cursor goes to the beginning of the value, while you want it to be at the end?
When the user enters in edit mode, It shifts the focus to right side of zero when It should select zero to enter the value and then it should override it but its not happening.
Hi Sandeep,
For numeric input types, only selection of the whole content is supported (reference). It also states that
"If you wish to select all text of an input element, you can use the HTMLInputElement.select() method instead."
Hi Hristo,
I am able to do textSelection when type is text using igxTextSelection directive, what shall be done when input type is number?Please advice how can achieve this
HI Sean,
When using the hooks of the grid, like the onCellEdit, onRowEdit, we need to bind the editor to the cell.editValue, instead of cell.value:
[(ngModel)]="cell.editValue"
<ng-template igxCellEditor let-cell="cell"> <igx-input-group> <input igxInput [igxFocus]='true' name="units" [(ngModel)]="cell.editValue" [igxTextSelection]="true" /> </igx-input-group> </ng-template>
I have updated the Editing example. Please let me know if you have further questions, I will be glad to help.
I have used the example you have created for more help to select text and set the focus as well. Apparently It is performing both of the functionalities but I am using an event "onRowEdit()" to get the edited values. It used to give me newvalue of the row and oldvalue of the row as well before using "ng-template" but now It just gives me oldvalue and the newvalue is null. I was performing some validations on data while editing the row but I am not able to do that.
I tried to remove the igxCellEditor from ng-template and then it gives me the values but at that point focus is not set and text is not selected for editing purpose.
Please advise me If there is a work around to get this done, I shall really appreciate that.
Sean
You can easily achieve this requirements using the igxFocus and igxTextSelection directives. What they do is: igxFocus will focus the element that it is applied to, and igxTextSelection will select the content of the element (this is not supported on every element).
To achieve the desired in the grid, you need to provide an ng-template for the column editor and apply the directives:
<igx-column field="Age" width="110px" dataType="number" [editable]="true"> <ng-template igxCellEditor let-cell="cell"> <igx-input-group> <input igxInput name="units" [(ngModel)]="cell.value" [igxFocus]='true' [igxTextSelection]="true" /> </igx-input-group> </ng-template> </igx-column>
Please enter edit mode for the UnitsInStock column in this Editing example and let me know if you have further questions, I will be glad to help.