We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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

1 Reply

PK Prasanna Kumar Viswanathan Syncfusion Team January 14, 2020 10:55 AM UTC

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. 
 
 
 
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 
 


Loader.
Up arrow icon