Restrict the user to enter upto 9 digits for a particular number datatype column

Hello,

I am using Igx-data Grid. I have column for combination of string and number datatype.

I want to write a validations for the number datatype column:

Requirement: Restrict the user to input only 9 digits for a particular column.

Hope to hear reply soon.

Thanks

Hello Shobhana,

You can limit the number of digits to 9 on the grid. The below example uses cell editor template, and handles two events to achieve your goal.

1. Add a cell editor template, handle keydown and input event.

2. On keydown event, allow end users to type while the typed value does not exceed 9 digits.

3. On input event, if the pasted value exceeds 9 digits, truncate the exceeding part.

	...
	
		
			
				
			
		
	
	...

// Allow end users to type up to 9 digits
onKeydown(evt: KeyboardEvent, editValue: number) {
  if (isNaN(+evt.key)) {
    return;
  }
  const digit = editValue.toString().length;
  if (digit < 9) {
    return;
  }
  return false;
}

// Truncate cell value if pasting exceeds 9 digits
onInput(cell: IgxGridCellComponent) {
  cell.editValue = cell.editValue.toString().slice(0, 9);
}

You can see how it works on "Units in Stock" column of the sample.
https://stackblitz.com/edit/angular-gsnjjk

If you have any question with this, please let me know.

Thank you,
Yuki

Thank you So Much Yuki 🙂 Much appreciate your help.

One more thing Yuki. Is there a way to restore the grid with original values. Eg: when i edit the cell and than cancel the edit the new value is replaced with original value. Please let me know.

Shobhana,

I am glad that you have solved your initial question. For the second question, would you tell me the steps on how you cancel editing? On my side, once editing is cancelled by hitting ESC key, the original value is presented on the cell.

Thank you,
Yuki