Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Lance Tressler
605
How to specify the minimum and maximum number of decimal positions while editing a numeric cell value in igxgrid
posted

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?

Parents
  • 2680
    Suggested Answer
    Offline posted
    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
Reply Children