Hi Bhagyasri,
Greetings from Syncfusion support.
Query: “on click of tab the focus should move to cell in next row in the same column and then that cell should come into edit mode”
We have achieved your requirement by customizing the keydown handler to numerictextbox component using editParams of column. Using the edit params, we have used created event of numerictext box component to create keydown handler and during the tab key press, we have found the row and cell index to navigate to next record.
Refer the below sample and code example for your reference
|
public oncreate() {
this.element.addEventListener(
'keydown',
function (e) {
if (e.code == 'Tab') {
let row = parentsUntil(e.target, 'e-row', false);
let Index = Number(row.getAttribute('aria-rowindex'));
let colIndex = Number(
e.target.closest('td').getAttribute('aria-colindex')
);
debugger;
var field = document
.getElementById('Normalgrid')
.ej2_instances[0].getColumnByIndex(colIndex).field;
setTimeout(() => {
document
.getElementById('Normalgrid')
.ej2_instances[0].editCell(Index + 1, field);
}, 0);
debugger;
}
}.bind(this)
);
}
|
Refer the below documentation for your reference
Query: “one more query is there anyway we can restrict the values increase/decrease of the ejs-numeric textbox on click of keyboard arrow up and down.”
We have achieved this requirement by overriding the default key down handler in the load event of Grid. refer the below code example.
|
<ejs-grid
#normalgrid
id="Normalgrid"
[dataSource]="data"
allowPaging="true"
[pageSettings]="pageSettings"
[editSettings]="editSettings"
[toolbar]="toolbar"
(load)="onload($event)"
>
. . . . . . . .
</ejs-grid>
public onload() {
NumericTextBox.prototype.keyDownHandler = function (e) {
if (!this.readonly)
switch (e.keyCode) {
case 38:
e.preventDefault();
break;
case 40:
e.preventDefault();
}
};
}
|
Please get back to us if you have further queries.
Regards,
Vignesh Natarajan
