Customize Number Input Type Cell ag-grid

Question

Ag-grid field should accept only number.

I have tried some code and it works but two arrows button are added.

    field: "TotalQty", headerName: "TOTAL KIT QTY",
    editable: true,

     cellRenderer: params => {
          return '<input type="number" value="TotalQty" class="my-custom-input-class" style="width : 100%">';
        }

I have tried this code and I get expected output but two arrows are added (up and down). How to remove it?

Saud Anjum Saud Anjum · Accepted Answer · 2019-11-06T07:16:27

Try like this

<input (keypress)="onlyNumber($event)" type="text" onpaste="return false" autocomplete="off">

and in your component.ts file

onlyNumber(event): boolean {
const charCode = (event.which) ? event.which : event.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
  return false;
}
return true;

}

Now you can only enter number and there will not be any up down arrow. Cool.

Customize Number Input Type Cell ag-grid

1 Answers