How to specify the minimum and maximum number of decimal positions while editing a numeric cell value in igxgrid

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?

Hello Lance,

 

Thank you for reaching out.

 

You can find information and samples about formatting, templates and localization on this page of the Ignite UI for Angular documentation, regarding Column Data Types. 

 

By using the pipeArgs input, you could set different format options for the various data types. For example, for a currency column, the decimal point, currency code and display properties can be specified.

 

Additionally, to address your question about cell validation – at the time being the pipeArgs input does not provide a way to set minimum and maximum value. However, you could hook to the cellEdit event of the IgxGridColumnComponent to perform data validation. This event is fired after editing is completed, when the cell is exiting edit mode and is cancelable:

 

private handleCellEdit(args) {
    if (args.column.field === "UnitPrice") {
      if (args.newValue > 100) {
        args.cancel = true;
        alert("UnitPrice should be less than 100!");
      }
    }
  }

 

I have also prepared a small sample to demonstrate this. You can find it here.

 

If you require any further assistance on the matter, please let me know.

 

Sincerely,
Bozhidara Pachilova
Associate Software Developer

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 Pachilova
Associate Software Dveloper