Can't tab to grid paging control

[John DOBSON]

Hi,

Is there a way that you can tab to the paging section of a grid control?  Currently, if you click in the grid and then start tabbing, focus never goes to the paging options at the bottom.

Attachment: Annotation_20190529_144222_90db8729.zip

[Pavithra Subramaniyam]

Hi John, 

 

Greetings from Syncfusion support. 

 

You can achieve your requirement by binding the “keydown” event to the pager element. In that event you can move to the pages by setting the grid.pageSettings.currentPage property. Please refer to the below code example, documentation link and sample link for more information. 

 

[component.ts] 

@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; 

        } 

         

    } 

      }) 

    } 

} 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/api/grid/#created 

 

Sample               : https://stackblitz.com/edit/angular-dpuuev-9akqpx?file=app.component.ts 

 

Please contact us if you need any further assistance. 

 

Regards, 

Pavithra S. 

[John DOBSON]

Thanks.  This works but has a side effect.

Two additional items.

First issue:

Once this is implemented you can no longer tab into the grid.  For instance, press Page Up then press Tab and you can go through every control on the page and the Grid is never accessed again.

Second issue:

The following error is now being returned every time.  Is there something else that needs to be created for this property to not throw an error.

TypeError: Cannot read property 'pagerModule' of undefined

[Pavithra Subramaniyam]

Hi John, 

Thanks for the update. 

Query#1: Once this is implemented you can no longer tab into the grid.  For instance, press Page Up then press Tab and you can go through every control on the page and the Grid is never accessed again. 

 

We have validated your query, Once the tab focused on the numeric container, there will be no active element in the Grid. So the Grid did not get focused. To achieve your requirement you can focus the Grid element by manually clicking any element in Grid or you can focus the Grid element programmatically by selecting the row. 

Note: While selecting the row in actionComplete event  will make Grid as active element, So the numeric container will be focused out. 

Query#2: The following error is now being returned every time.  Is there something else that needs to be created for this property to not throw an error. 

TypeError: Cannot read property 'pagerModule' of undefined. 

 

You can resolve the error by checking the condition in created event of the Grid. Please find the below code snippet for your reference. 

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> 

Please get back to us if you need further assistance. 

Regards, 

Pavithra S. 

[John DOBSON]

Great, exactly what I was looking for.  Take care.

[Pavithra Subramaniyam]

Hi John, 

 

Thanks for your update. 

 

Please contact us if you need any further assistance. 

 

Regards, 

Pavithra S.