-
-
Notifications
You must be signed in to change notification settings - Fork 19
Grid Menu
The Grid Menu
(also known as the Hamburger Menu
) is now part of Aurelia-Slickgrid
and is enabled by default).
Technically, it's enable by default and so you don't have anything to do to enjoy it. However if you want to customize the content of the Grid Menu, then continue reading.
The Grid Menu comes, by default, with a Column Picker
. This brings an easy way to show/hide certain column(s) from the grid. This functionality was copied from the Column Picker Plugin and brought over to the Grid Menu.
The Grid Menu also comes, by default, with a list of built-in custom commands (all their positionOrder
are in the reserved range of 40 to 60)
- Clear all Filters (you can hide it with
hideClearAllFiltersCommand: true
) - Clear all Sorting (you can hide it with
hideClearAllSortingCommand: true
) - Toggle the Filter Row (you can hide it with
hideToggleFilterCommand: true
) -
Export to CSV (you can hide it with
hideExportCsvCommand: true
) - _Export to Text Delimited (you can hide it with
hideExportTextDelimitedCommand: true
) -
Refresh Dataset, only shown when using Backend Service API (you can hide it with
hideRefreshDatasetCommand: true
)
This section is called Custom Commands because you can also customize this section with your own commands. To do that, you need to fill in 2 properties (an array of commandItems
and define onGridMenuCommand
callback) in your Grid Options. For example, Aurelia-Slickgrid
is configured by default with these settings (you can overwrite any one of them):
this.gridOptions = {
enableAutoResize: true,
enableGridMenu: true, // <<-- this will automatically add extra custom commands
enableFiltering: true,
gridMenu: {
commandTitle: 'Custom Commands',
columnTitle: 'Columns',
iconCssClass: 'fa fa-ellipsis-v',
menuWidth: 17,
resizeOnShowHeaderRow: true,
commandItems: [
{
iconCssClass: 'fa fa-filter text-danger',
title: 'Clear All Filters',
disabled: false,
command: 'clear-filter'
},
{
iconCssClass: 'fa fa-random',
title: 'Toggle Filter Row',
disabled: false,
command: 'toggle-filter'
}
],
onCommand: (e, args) => {
if (args.command === 'toggle-filter') {
this.gridObj.setHeaderRowVisibility(!this.gridObj.getOptions().showHeaderRow);
} else if (args.command === 'clear-filter') {
this.filterService.clearFilters();
this.dataviewObj.refresh();
}
}
}
};
There are 3 callback hooks which are accessible in the Grid Options
onGridMenuBeforeShow
onGridMenuCommand
onGridMenuClose
For more info on all the available properties of the custom commands, you can read refer to the doc written in the Grid Menu implementation itself.
You can change any of the default command icon(s) by changing the icon[X-command]
, for example, see below for the defaults.
this.gridOptions = {
enableGridMenu: true,
gridMenu: {
iconClearAllFiltersCommand: 'fa fa-filter text-danger'
iconClearAllSortingCommand: 'fa fa-unsorted text-danger',
iconExportCsvCommand: 'fa fa-download',
iconExportTextDelimitedCommand: 'fa fa-download',
iconRefreshDatasetCommand: 'fa fa-refresh',
iconToggleFilterCommand: 'fa fa-random',
},
};
You can disable the Grid Menu, by calling enableGridMenu: false
from the Grid Options.
this.gridOptions = {
enableGridMenu: false,
};
Contents
- Aurelia-Slickgrid Wiki
- Installation
- Styling
- Interfaces/Models
- Testing Patterns
- Column Functionalities
- Global Grid Options
- Localization
- Events
- Grid Functionalities
- Auto-Resize / Resizer Service
- Resize by Cell Content
- Add/Delete/Update or Highlight item
- Dynamically Change Row CSS Classes
- Column Picker
- Composite Editor Modal
- Context Menu
- Custom Tooltip
- Excel Copy Buffer
- Export to Excel
- Export to File (CSV/Txt)
- Grid Menu
- Grid State & Presets
- Grouping & Aggregators
- Header Menu & Header Buttons
- Header Title Grouping
- Pinning (frozen) of Columns/Rows
- Row Colspan
- Row Detail
- Row Selection
- Tree Data Grid
- SlickGrid & DataView objects
- Addons (controls/plugins)
- Backend Services