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
70
Adding number with comma into editable grid cell when igx-column type is number
posted

Hello,

Is it possible to add number with comma for example 2,5 into editable grid cell when igx-column type has to be number.

Regards,

  • 420
    Offline posted in reply to Kris

    Hello,

    Thank you for reaching out with your query regarding the handling of numeric inputs and formatting in the igx-grid component. I understand you're looking to:

    1. Handle decimal inputs where commas (,) are used, automatically converting them to dots (.) after the user completes editing.
    2. Prevent large numbers like 20000 from being formatted with commas (i.e., displaying 20000 instead of 20,000).

    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

  • 420
    Offline posted

    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