How to restrict ArrowUp increase and ArrowDown decrease value in Grid numeric cell in Angular Grid

[Pardeep Pandit]

Hi,

Is any property or feature to Restrict ArrowUp Incease and ArrowDown Decrease value In Grid Numeric Cell ?

[Prasanna Kumar Viswanathan]

Hi Pardeep, 

 

Greetings from syncfusion support. 

 

Query : Is any property or feature to Restrict ArrowUp Incease and ArrowDown Decrease value In Grid Numeric Cell  

 

Yes, there is a property called showSpinButton used to hide and show the arrow keys in the numeric text box. When you set the showSpinButton as false it hides the arrow keys in numeric text boxes. 

Please refer the below sample and code example for more information. 

 

Sample : https://stackblitz.com/edit/angular-udaqpk-xeptxc?file=app.component.html 

 

UG : https://ej2.syncfusion.com/angular/documentation/api/numerictextbox#showspinbutton 

 

App.component.html 

<ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='273px'> 

                <e-columns> 

                    <e-column field='Freight' headerText='Freight' textAlign= 'Right' 

                     editType= 'numericedit' [edit]='numericParams' width=120 format= 'C2'></e-column> 

                </e-columns> 

                </ejs-grid> 

App.component.ts 

 

export class AppComponent { 

    @ViewChild('grid', {static: false}) 

    grid: GridComponent; 

     public editSettings: EditSettingsModel; 

    public data: Object[]; 

    public toolbar: ToolbarItems[]; 

    public numericParams: IEditCell; 

    public ngOnInit(): void { 

        this.data = hierarchyOrderdata; 

         this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true }; 

          this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 

        this.numericParams = { params: { showSpinButton :false,decimals: 2, value: 5 } }; 

    } 

} 

          

Please get back to us if you need further assistance. 

 

Regards, 

Prasanna Kumar N.S.V