Navigate with the keyboard in pivotGrid

Question

Hello,Is it possible to navigate the PivotGrid cells using the keyboard? Same as Grid functionality?Using the enableCellSelection: true setting, it's possible configure to select a single cell? When selecting a cell, would it be possible to change the color, is there any setting for this?

Ramesh Govindaraj · Answer

Hi Anderson,  
 
Please find the response below. 
 




Query 

Response 


Is it possible to navigate the PivotGrid cells using the keyboard? Same as Grid functionality? 

Use “Tab” key to focus PivotGrid control. Once PivotGrid gets focused, user can able to navigate the cells with keyboard navigation keys. But the selection functionality will not be same as “Grid” control. 


Using the enableCellSelection: true setting, it's possible configure to select a single cell?  

To select a cell, navigate to corresponding cell. Click and release shift key in keyboard. 


When selecting a cell, would it be possible to change the color, is there any setting for this? 

Yes, you can change the highlighted cell color. 
 
Code Snippet: 
.e-pivotgrid .e-highlighted, 
.e-pivotgrid .e-hoverCell{ 
                background-color: aqua !important; 
  }   
Sample: 
https://jsplayground.syncfusion.com/uunteaf4 
 
 
Regards, 
Tamilarasu M.

Query	Response
Is it possible to navigate the PivotGrid cells using the keyboard? Same as Grid functionality?	Use “Tab” key to focus PivotGrid control. Once PivotGrid gets focused, user can able to navigate the cells with keyboard navigation keys. But the selection functionality will not be same as “Grid” control.
Using the enableCellSelection: true setting, it's possible configure to select a single cell?	To select a cell, navigate to corresponding cell. Click and release shift key in keyboard.
When selecting a cell, would it be possible to change the color, is there any setting for this?	Yes, you can change the highlighted cell color. Code Snippet: .e-pivotgrid .e-highlighted, .e-pivotgrid .e-hoverCell{ background-color: aqua !important; } Sample: https://jsplayground.syncfusion.com/uunteaf4