Navigation

The q-grid navigation system supports various keyboard events to start keyboard navigation q-grid should be focused.

What shortcuts does navigation implement by default? How to override default navigation shortcuts?

Use shortcut property in the navigation model.

@Component({
   selector: 'my-component',
   template: `
      <q-grid [rows]="rows$ | async" [model]="gridModel">
         <q-grid-columns generation="deep"></q-grid-columns>
      </q-grid>
      `
})
export class MyComponent implements AfterViewInit {
   rows$ = this.dataService.getRows();
   gridModel = this.qgrid.model();

   constructor(
      private dataService: MyDataService,
      private qgrid: Grid
   ) {
   }

   ngAfterViewInit() {
      this.gridModel.navigation({
         shortcut: {
            up: 'up',
            down: 'down',
            left: 'left',
            right: 'right',
            next: 'tab',
            previous: 'shift+tab',
            home: 'home',
            end: 'end',
            pageUp: 'pageUp',
            pageDown: 'pageDown',
            upward: 'shift+pageUp',
            downward: 'shift+pageDown'
         }
      });
   }
}
Shortcut limitations for browsers

Here’s a number of Ctrl key combinations that browsers do not allow JavaScript to override for preventing malicious websites.

If you use q-grid in electron box, these shortcuts could be overwritten.

Prevent default keyboard actions

q-grid prevents some default browser shortcuts actions when it’s focused, like home and end key presses. Use prevent property from the model.navigation() state to manage it.

Suggested Links