We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Can't tab to grid paging control

Thread ID:

Created:

Updated:

Platform:

Replies:

144950 May 29,2019 07:16 PM UTC Jun 12,2019 04:47 AM UTC Angular - EJ 2 5
loading
Tags: Grid
John DOBSON
Asked On May 29, 2019 07:16 PM UTC

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 [Syncfusion]
Replied On May 30, 2019 10:04 AM UTC

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; 
        } 
         
    } 
      }) 
    } 
} 
 
 
 
Please contact us if you need any further assistance. 
 
Regards, 
Pavithra S. 


John DOBSON
Replied On June 5, 2019 01:54 PM UTC

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 [Syncfusion]
Replied On June 11, 2019 11:42 AM UTC

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
Replied On June 11, 2019 03:46 PM UTC

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

Pavithra Subramaniyam [Syncfusion]
Replied On June 12, 2019 04:47 AM UTC

Hi John, 
 
Thanks for your update. 
 
Please contact us if you need any further assistance. 
 
Regards, 
Pavithra S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon