|
@Component({
selector: 'app-root',
template: ' <ejs-grid #grid [dataSource]='data' (created)="created($event)" allowPaging='true' height=365 [pageSettings]='initialPage'>
<e-columns>
. . .
</e-columns>
</ejs-grid>'
})
export class AppComponent {
created(e){
(this.grid.pagerModule as any).element.addEventListener("keydown",(e)=>{
if( e.which == 9 && e.target.classList.contains('e-numericitem') ) {
let total =this.grid.pagerModule.pagerObj.totalPages;
let next = this.grid.pageSettings.currentPage+1;
if(next <= total){
e.preventDefault();
this.grid.pageSettings.currentPage = next;
}
}
})
}
} |
|
App.component.ts
. . .
created(e){
(this.grid.pagerModule && this.grid.pagerModule as any).element.addEventListener("keydown",(e)=>{ //checking that pagerModule is available or not
if( e.which == 9 && e.target.classList.contains('e-numericitem') ) {
let total =this.grid.pagerModule.pagerObj.totalPages;
let next = this.grid.pageSettings.currentPage+1;
if(next <= total){
e.preventDefault();
this.grid.pageSettings.currentPage = next;
}
}
})
}
actionComplete (args) {
if (args.requestType == 'paging') { // you can add the condition here based on your requirement
this.grid.selectRow(0); //selecting the row to focus the Grid
}
}
}
App.component.html
<ejs-grid #grid [dataSource]='data' (created)="created($event)" (actionComplete)="actionComplete($event)" allowPaging='true' height=365 [pageSettings]='initialPage'>
<e-columns>
. . .
</e-columns>
</ejs-grid> |
