We are attempting to migrate a grid from IgniteUI jQuery grid to the angular grid.
One of the most frustrating elements of the angular grid is the lack of cell editing functionality that is equivalent to the jQuery functionality.
For example, in a numeric cell, I can configure a minimum and maximum number of decimal positions and a minimum and maximum value and when the user leaves edit mode, what the user entered will be trimmed and validated automatically.
In addition, we fully support internationalization so all we have to do is set the locale and the editor takes care of the rest.
Unfortunately I cannot figure out how to do any of this in the angular grid.
Can someone please shed some light on how/if this is possible?
Thank you for reaching out.
private handleCellEdit(args) { if (args.column.field === "UnitPrice") { if (args.newValue > 100) { args.cancel = true; alert("UnitPrice should be less than 100!"); } } }
Thank you for the response.
Unfortunately we were only able to use a portion of the solution: pipeArgs didn't work for some reason. Part of the issue is that we dynamically configure the columns.
What we ended up doing was using the angular formatNumber method for the display portion and then number.toFixed to trim excessive decimal positions entered by the user.
Here is an example of our configuration:
<igx-column *ngFor="let col of columns" [header]="col.caption" [headerClasses]="col.class" [field]="col.columnName" [resizable]="true" [sortable]="columnIsSortable(col)" [editable]="columnIsEditable(col)" [width]="col.widthPX" [hidden]="!col.visible" [pinned]="col.frozen" [dataType]="col.dataTypeAngular">
<ng-template igxCell let-val let-cell="cell" *ngIf="col.formatAsNumber"> <div class="grid-cellContent {{col.class}}" [ngClass]="{'notoktoedit': !cellIsEditable(cell)}">{{formatNumber(col, val)}}</div> </ng-template>
Hello Lance, Thank you for following up. I am glad that you were able to achieve your requirement. If the Angular’s formatNumber method works for you, then go ahead with it. Nevertheless, just for reference, I modified the previous sample to specify the pipeArgs property on a dynamically generated column. You can find the sample here. Best regards,Bozhidara PachilovaAssociate Software Dveloper