Disallow numeric field update when up and down arrow keys are pressed

[Eddie Willcox]

Hi,

In the data grid, if a column is set to numeric edit type, is it at all possible to ignore the pressing of up and down arrow keys on the keyboard? I want to force users to manually type in a number. I have already removed the spin buttons, but now I need to ensure the up and down arrows on the keyboard are ignored

[Vignesh Natarajan]

Hi Eddie,  

 

Greetings from Syncfusion support.  

 

Query: “ but now I need to ensure the up and down arrows on the keyboard are ignored” 

 

We have achieved your requirement by overriding the keyDownHandler for NumericTextbox component. Refer the below code example for your reference 

 

@Html.EJS().Grid("EditParam").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col => 

{ 

    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true", minLength = 3 }).Add(); 

    col.Field("Freight").HeaderText("Freight").Width("120").EditType("numericedit").Format("N2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Edit(new 

    { 

        @params = new Syncfusion.EJ2.Inputs.NumericTextBox() 

        { Format = "N", ShowSpinButton = false, ShowClearButton = true } 

    }).Add(); 

    col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Edit(new { @params = new { value = "Germany" } }).Width("150").Add(); 

}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 

  

<script> 

    ej.inputs.NumericTextBox.prototype.keyDownHandler = function (e) { 

        if (!this.readonly) 

            switch (e.keyCode) { 

                case 38: 

                    e.preventDefault(); 

                    break; 

                case 40: 

                    e.preventDefault(); 

            } 

    }; 

</script> 

 

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan 

[Eddie Willcox]

Perfect! Thank you so much

[Balaji Sekar]

Hi Eddie, 

  

Thanks for the update. 

  

We are happy to hear that your issue has been resolved. 

  

Please get back to us if you need further assistance. 

  

Regards, 

Balaji Sekar.