How to show the numeric keypad in mobile device when edit the number column in Angular Grid

[Sahal]

Hi

What should be done to show the numeric key pad when editing a   ej2 grid column with edit type set as  numeric edit.

Thank You

[Pavithra Subramaniyam]

Hi Sahal, 

 

Greetings from the Syncfusion support, 

 

To achieve your requirement, we suggest you to define the Numeric TextBox “htmlAttributes .type” in column.editParams property to get the numeric edit pad in mobile device while edit numeric column. Please refer the below code example and sample for more information. 

 

[app.component.html] 

<ejs-grid #normalgrid id='Normalgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' (actionBegin)='actionBegin($event)' (queryCellInfo)="queryCellInfo($event)"> 

            <e-columns> 

                .    .     .    . 

                <e-column field='Freight' headerText='Freight' width='140' format='C2' textAlign='Right' editType="numericedit" [edit]="freightParams" [validationRules]='freightrules'></e-column> 

               .     .      .      . 

            </e-columns> 

        </ejs-grid> 

 

[app.component.ts] 

this.freightParams = { params: {             

            htmlAttributes:{type:"number"} } 

        }; 

 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#cell-edit-type-and-its-params 

 

Sample link        : https://stackblitz.com/edit/angular-dzocmp-gjrrzu?file=app.component.ts 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Pavithra S.