• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse
Localization
*Translated by Google Translator.
Currency

Example of Keyboard Navigation in ASP.NET MVC Pivot Table Control

This sample demonstrates how to use keyboard shortcuts to interact with Pivot Table features such as the pivot table, grouping bar, field list, toolbar, calculated field, drill through, and filter dialog.

DEMO
SOURCE
Below key combinations can be used in pivot table to initiate various actions
  • FOCUS
    • Alt + J - Focuses the Pivot Table component.
  • PIVOT TABLE
    • Tab - Moves the cell focus right side. If no cells are focused, it moves to the next active element in the browser page.
    • Shift + Tab - Moves the cell focus left side. If no cells are focused, it moves to the previous active element in the browser page.
    • Down arrow - Moves the cell focus downwards.
    • Up arrow - Moves the cell focus upwards.
    • Left arrow - Moves the cell focus left side.
    • Right arrow - Moves the cell focus right side.
    • Home - Goes to the first cell in the current row.
    • End - Goes to the last cell in the current row.
    • Ctrl + Home - Goes to the first cell in the table.
    • Ctrl + End - Goes to the last cell in the table.
    • Enter - If the current cell is an expand/collapse cell, it performs expand/collapse operation (drill operation). If the current row/column header is in value sort state, it performs value sorting.
    • Shift + Enter - If value sorting is enabled in the pivot table and the current cell is a header with respect to its value axis, it performs value sorting to either ascending or descending order.
  • GROUPING BAR
    • Tab - Moves to the next active element (field’s button) in the grouping bar. If no active elements present, it moves to the next active element in the browser page.
    • Shift + Tab - Moves to the previous active element (field’s button) in the grouping bar. If no active elements present, it moves to the previous active element in the browser page.
    • Shift + F - If the current active element is a field’s button and if it has a filter icon, the filter dialog will be opened to perform filtering.
    • Shift + S - If the current active element is a field’s button and if it has a sort icon, the sorting will be performed to the selected field.
    • Shift + E - If the current active element is a calculated field’s button and if it has an edit icon, the calculated field dialog will be opened to perform editing the selected calculated field.
    • Enter - Performs the selection operation of the current active element. If the current active element is a field’s button and it has a dropdown icon, the aggregation menu will open to perform calculations using aggregation options to the selected value field.
    • Delete - If the current active element is a field’s button, the selected field will be removed from the current report.
    • Down arrow - If the current active element is a dropdown list, the next item will be selected.
    • Up arrow - If the current active element is a dropdown list, the previous item will be selected.
    • Home - If the current active element is a dropdown list, the first item will be selected.
    • End - If the current active element is a dropdown list, the last item will be selected.
    • Alt + Down - If the current active element is a dropdown list, the popup will be opened.
    • Alt + Down - If the current active element is a dropdown list, the popup will be closed.
    • Esc or Escape - Closes the dropdown list.
  • FIELD LIST
    • Ctrl + Shift + F - If the popup field list is enabled in either the pivot table or the pivot chart, the field list dialog will be opened.
    • Tab - Moves to the next active element in the field list. If no active elements present, it moves to the next active element in the browser page.
    • Shift + Tab - Moves to the previous active element in the field list. If no active elements present, it moves to the previous active element in the browser page.
    • Shift + F - If the current active element is a field’s button and if it has a filter icon, the filter dialog will be opened to perform filtering.
    • Shift + S - If the current active element is a field’s button and if it has a sort icon, the sorting will be performed to the selected field.
    • Shift + E - If the current active element is a calculated field’s button and if it has an edit icon, the calculated field dialog will be opened to perform editing the selected calculated field.
    • Enter - Performs the selection operation of the current active element. If the current active element is a field’s button and if it has a dropdown icon, the aggregation menu will be opened to perform calculations using aggregation options to the selected value field.
    • Delete - If the current active element is a field’s button, the selected field will be removed from the current report.
    • Down arrow - If the current active element is a tree node, it moves to the next node.
    • Up arrow - If the current active element is a tree node, it moves to the prevous node.
    • Left arrow - If the current active element is a tree node, it collapses the current node.
    • Right arrow - If the current active element is a tree node, it expands the current node.
    • Home - If the current active element is a tree node, it goes to the first node.
    • End - If the current active element is a tree node, it goes to the last node.
    • Space - If the current active element is a tree node or a checkbox element, it will be either checked or unchecked.
    • Esc or Escape - Closes the popup field list dialog.
  • TOOLBAR
    • Tab - Moves to the next active option in the toolbar. If no active elements present, it moves to the next active element in the browser page.
    • Shift + Tab - Moves to the previous active option in the toolbar. If no active elements present, it moves to the previous active element in the browser page.
    • Enter - Performs the selection operation of the current active element.
  • CALCULATED FIELD
    • Shift + E - If the current active element is a field’s button and if it has an edit icon in either the field list or grouping bar UI, the calculated field dialog will be opened to perform editing the selected calculated field.
    • Tab - Moves to the next active element in the calculated field dialog. If no active elements present, it moves to the next active element in the browser page.
    • Shift + Tab - Moves to the previous active element in the calculated field dialog. If no active elements present, it moves to the previous active element in the browser page.
    • Enter - Performs the selection operation of the current active element. If the current active element is a tree node, it copies the selected field name/formula to the formula text area to perform calculations.
    • Down arrow - If the current active element is a tree node, it moves to the next node.
    • Up arrow - If the current active element is a tree node, it moves to the prevous node.
    • Left arrow - If the current active element is a tree node, it collapses the current node.
    • Right arrow - If the current active element is a tree node, it expands the current node. If the current active element is a tree node and has a menu icon, the aggregation menu will be opened to select appropriate aggregation type to the selected field.
    • Home - If the current active element is a tree node, it goes to the first node.
    • End - If the current active element is a tree node, it goes to the last node.
    • Esc or Escape - the filter dialog.
  • DRILL THROUGH
    • Tab - Moves to the next active element in the drill-through dialog. If the current active element is a Grid cell, it moves the cell focus to right side. If no active elements present, then it moves to the next active element in the browser page.
    • Shift + Tab - Moves to the previous active element in the drill-through dialog. If the current active element is a Grid cell, it moves the cell focus to left side, If no active elements present, then it moves to the previous active element in the browser page.
    • Down arrow - Moves the row/cell focus downwards.
    • Up arrow - Moves the row/cell focus upwards.
    • Left arrow - Moves the cell focus left side.
    • Right arrow - Moves the cell focus left side.
    • Home - Goes to the first cell in the current row.
    • End - Goes to the last cell in the current row.
    • Ctrl + Home - Goes to the first cell in the table.
    • Ctrl + End - Goes to the first cell in the table.
    • Enter - Performs the selection operation of the current active element.
    • Esc or Escape - If the cell is in selected state, the it deselects all rows/cells. If the row/cell is in edit state, it cancels the current entries in the row/cell. If the current active element is not a row/cell, it closes the drill-through dialog.
    • F2 - If the cell is in selected state, the it deselects all rows/cells. If the row/cell is in edit state, it cancels the current entries in the row/cell. If the current active element is not a row/cell, it closes the drill-through dialog.
    • Insert - Adds a new row/cell in the data grid.
    • Delete - Removes the selected row in the data grid.
  • FILTER DIALOG
    • Shift + F - If the current active element is a field’s button and if it has a filter icon in either the field list or grouping bar UI, the filter dialog will be opened to perform filtering.
    • Tab - Moves to the next active element in the filter dialog. If no active elements present, it moves to the next active element in the browser page.
    • Shift + Tab - Moves to the previous active element in the filter dialog. If no active elements present, it moves to the previous active element in the browser page.
    • Enter - Performs the selection operation of the current active element. If the current active element is a tab, the current tab element will be selected. If the current active element is a tree node, the current node will be either checked or unchecked. If the current active element is DropDownList, the focus item will be selected, and the popup list will close when it is open. Otherwise, toggles the popup list.
    • Down arrow - If the current active element is a tree node, it moves to the next node.
    • Up arrow - If the current active element is a tree node, it moves to the prevous node.
    • Left aArrow - If the current active element is a tree node, it collapses the current node. If the current active element is a tab, it moves focus to the previous tab element.
    • Right arrow - If the current active element is a tree node, it expands the current node. If the current active element is a tab, it moves focus to the next tab element.
    • Home - If the current active element is a tree node, it goes to the first node.
    • End - If the current active element is a tree node, it goes to the last node.
    • Space - If the current active element is a tree node or a checkbox element, it will be either checked or unchecked.
    • Esc or Escape - Closes the filter dialog.
    • Alt + Down - If the current active element is a DropDownList or DatePicker or DateTimePicker, the popup will be opened.
    • Alt + Up - If the current active element is a DropDownList or DatePicker or DateTimePicker, the popup will be closed.

More information can be found in this documentation section.

Transform your ASP.NET MVC web apps today with Syncfusion ASP.NET MVC components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
Documentation
Forum
Blog
Knowledge Base