I have a requirement inside IGX editable grid. The column data need to display as multiply with 100. In grid edit mode also we need to display the input value multiply with 100. But after edit the value need to convert to divided by 100. And the view will be same as edited value.
I have used a pipe to display the value multiply with 100 and in edit mode I have changed the input value using focus event. But after every edit the value is always multiplied with 100. So, it's displaying the wrong value after each edit. So how to prevent this particular issue?
Thanks & Regards,
Santu
Hello Santu,
I have been looking into your question and to achieve your requirements what I could suggest is to handle the cellEditEnter and cellEditExit events of the igx-grid component and multiply or divide the edited value and the displayed value of the cell of the given data column.
<igx-grid #grid [data]="data" [primaryKey]="'ProductID'" width="100%" height="650px" (cellEditEnter)="editStart($event)" (cellEditExit)="editExit($event)" ></igx-grid>
First, you will handle the cellEditEnter event and when the event fires, you will check if the cell being edited is from the given column for the multiplied values, if it is, you will take that cell with the getCellByColumn method, passing the index of the row and the field of the column, and you will multiply the editing value by 100 so that it is displayed in the correct form.
public editStart(event){ if(event.cellID.columnID === 2){ Math.round(this.grid.getCellByColumn(event.cellID.rowIndex,"Percentage").editValue *= 100) } }
After that, the cellEditExit event will be handled and when it fires after editing a cell or simply leaving the cell without editing, you will take the given cell again with getCellByColumn method and the edited value and the displayed value will be divided by 100 to return to the initial state and display as required.
public editExit(event){ if(event.cellID.columnID === 2){ Math.round(this.grid.getCellByColumn(event.cellID.rowIndex,"Percentage").editValue /= 100) Math.round(this.grid.getCellByColumn(event.cellID.rowIndex,"Percentage").value /= 100) } }
The described scenarios could be observed here where initially, the values have a decimal point and are displayed as a multiple by 100 in the 'Percentage' column:
In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.
If you require any further assistance on the matter, please let me know.
Regards,
Georgi Anastasov
Entry Level Software Developer
Infragistics
This is not working for me. I am using angular 9 in my application.
Thank you for following up and provided information.
As you can see from the provided sample and gif video everything works as expected and the cell value and edit cell value in edit mode are multiplied by 100 and displayed in the correct format. After editing, the values are not divided by 100 but remain in the correct format. However, a sample is prepared in the latest version of Ignite UI Angular 14.1.
What I could say is that according to our policy igniteui-angular version 9 is considered retired and it is no longer eligible for Developer Support Services. To achieve your requirements and take advantage of all introduced features and enhancements, I would suggest upgrading to the supported versions of igniteui-angular or latest version i.e. 14.1.
Here you could find previous sample illustrating my suggestion.