Hello,

Thank you for your question regarding handling numeric inputs with commas in the igx-grid component. I understand that you want to allow users to enter values like 2,5 and automatically convert them to 2.5 to comply with the number data type.

Key Solution Points

1. Standard Number Format: By default, igx-grid expects numbers to be entered with a dot (.) as the decimal separator. However, users often use a comma (,), which is not recognized as a valid number format.
2. Custom Editing Template: Using an ng-template with igxCellEditor allows you to create a custom input field within the cell. This gives you full control over how user input is handled and displayed.
3. Automatic Conversion: By implementing an event handler (onEditChange), you can automatically replace commas with dots, ensuring the input is parsed correctly as a number.
4. Input Focus and Selection: The input field is automatically focused and its content selected when a cell enters edit mode, providing a smoother user experience.

Sample Implementation

Below is a concise version of the implementation, which demonstrates how to allow input with commas and convert it to a valid number format:

HTML Template

<igx-column
        field="UnitPrice"
        header="Price"
        dataType="number"
        [editable]="true"
      >
        <!-- Custom Cell Editor Template -->
        <ng-template igxCellEditor let-cell="cell">
          <!-- Input with igxInput -->
          <igx-input-group>
            <input
              igxInput
              type="text"
              [igxFocus]="true"
              [(ngModel)]="cell.editValue"
              (ngModelChange)="onEditChange($event, cell)"
              (focus)="selectInputContent($event)"
            />
          </igx-input-group>
        </ng-template>
      </igx-column>

TypeScript Component

// Event handler for changes in the input
  public onEditChange(value: string, cell) {
    // Replace comma with dot for decimal handling (if necessary)
    const formattedValue = value.replace(',', '.');
    
    // Parse the formatted value to a number
    const parsedValue = parseFloat(formattedValue);
    
    // Assign back the formatted value to show in the input
    // Keeps the original value if parsing results in NaN
    cell.editValue = isNaN(parsedValue) ? value : formattedValue;
  }

  // Method to select all input content when input is focused
  public selectInputContent(event: FocusEvent) {
    (event.target as HTMLInputElement).select();
  }

The described scenario could be observed here:

Interactive Sample

To see this implementation in action, please refer to this interactive example on StackBlitz:

Interactive StackBlitz Example

Summary

With this approach:

• Users can input values using a comma (,), and it will automatically be converted to a valid dot (.) format.
• The cell uses a custom input template defined with ng-template and igxCellEditor to handle user input.
• This setup provides a more user-friendly editing experience while ensuring data consistency and validation within the grid.

Please let me know if you have any further questions or need additional assistance!

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

To address these requirements, I have created a solution that meets both of your needs and made it available as a live interactive example on StackBlitz: Interactive Example.

Key Features of the Solution:

1. Comma to Dot Conversion for Decimal Values
   After the user finishes editing (e.g., pressing Enter), any commas in the input are automatically replaced with dots to ensure valid decimal input.

Here’s how it’s handled in the cellEditDone event:

public editDone(event) {
  let value = event.newValue;
  value = value.replace(',', '.');
  const parsedValue = parseFloat(value);
  event.newValue = isNaN(parsedValue) ? value : parsedValue;
}

Preventing Automatic Comma Formatting for Large Numbers
To avoid the default behavior of formatting large numbers with commas, I implemented a custom number formatter using the formatter property. This ensures that large numbers like 20000 are displayed exactly as entered.

Here's the custom formatter:

public numberFormatter = (value: number) => {
  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '');
};

Custom Cell Editor
In the grid, a custom input editor is used for the UnitPrice column, allowing users to input values directly while handling formatting and focus behavior.

The editor setup looks like this:

<igx-column field="UnitPrice" header="Price" dataType="number" [editable]="true" [formatter]="numberFormatter">
  <ng-template igxCellEditor let-cell="cell">
    <igx-input-group>
      <input igxInput type="text" [(ngModel)]="cell.editValue" (focus)="selectInputContent($event)" />
    </igx-input-group>
  </ng-template>
</igx-column>

The described scenario could be observed here:

Interactive Example

To help you test the solution, I’ve created an interactive StackBlitz example:
Live Demo

You can explore how the number formatting and input behavior work with this demo.

Next Steps

Your initial request was quite clear, but I would appreciate it if you could provide additional details or visual aids (such as screenshots, pictures, or videos) to confirm whether the current solution meets your expectations. This will help ensure I fully understand your requirements and can make any necessary adjustments.

Please don’t hesitate to reach out if you need further customization or have additional questions. I’m happy to assist with any further improvements you may need.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics