This repository was archived by the owner on Jun 1, 2025. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 118
Available Events
Ghislain B edited this page Dec 12, 2023
·
3 revisions
All the events are published with a data payload in a CustomEvent, so you will typically find the payload under the detail property of the CustomEvent. However please note that the events from SlickGrid and SlickDataView, shown at the bottom of the list, are published with a different structure which is also including the JS event that it was triggered with under the property eventData and the payload itself is under the args property (which follows original SlickGrid structure). To subscribe to all events, you can use your PubSub instance (if available) or add listeners on your grid container DOM element.
// 1. with PubSub instance
this.angularGrid.instances?.eventPubSubService?.subscribe('onCellChange', (payload) => console.log('PubSub, cell changed data:', payload));
// 2. with event listener on grid container. Notice the lowercase on the event name, this can be configured with `eventNamingStyle` grid option
this.gridContainerElm.addEventListener('oncellchange', (e) => this.handleOnCellChange(e));
handleOnCellChange(e) {
// `eventData` is the event it was triggered from and `args` is the data payload
const { eventData, args } = e.detail;
const dataContext = args?.item;
console.log('cell changed data:', args);
}// 1. with PubSub instance
this.angularGrid.instances?.eventPubSubService?.subscribe('onHeaderMenuCommand', (payload) => console.log('PubSub, header menu command', payload));
// 2. with event listener on grid container. Notice the lowercase on the event name, this can be configured with `eventNamingStyle` grid option
this.gridContainerElm.addEventListener('onheadermenucommand', (e) => this.handleOnHeaderMenuCommand(e));
handleOnHeaderMenuCommand(e) {
// detail is the args data payload
const args = e.detail;
console.log('header menu command', args);
}onContextMenuClearGroupingonContextMenuCollapseAllGroupsonContextMenuExpandAllGroups
onGridMenuMenuCloseonGridMenuBeforeMenuShowonGridMenuAfterMenuShowonGridMenuClearAllPinningonGridMenuClearAllFiltersonGridMenuClearAllSortingonGridMenuCommand
onHeaderButtonCommand
onHeaderMenuHideColumnsonHeaderMenuCommandonHeaderMenuColumnResizeByContentonHeaderMenuBeforeMenuShowonHeaderMenuAfterMenuShow
onBeforeFilterClearonBeforeSearchChangeonFilterCleared
onHeaderMenuHideColumnsonItemAddedonItemDeletedonItemUpdatedonItemUpserted
onFullResizeByContentRequestedonGridStateChanged
onBeforePaginationChange
onGridBeforeResizeonGridAfterResizeonBeforeResizeByContentonAfterResizeByContent
onSortClearedonSortChangedonBeforeSortChange
onTreeFullToggleStartonTreeFullToggleEndonTreeItemToggled
onBeforeGridDestroyonAfterGridDestroyedonBeforeGridCreateonDataviewCreatedonGridCreatedonSlickerGridCreatedonGridStateChanged
onActiveCellChangedonActiveCellPositionChangedonAddNewRowonAutosizeColumnsonBeforeAppendCellonBeforeCellEditorDestroyonBeforeColumnsResizeonBeforeDestroyonBeforeEditCellonBeforeFooterRowCellDestroyonBeforeHeaderCellDestroyonBeforeHeaderRowCellDestroyonBeforeSetColumnsonBeforeSortonBeforeUpdateColumnsonCellChangeonCellCssStylesChangedonClickonColumnsReorderedonColumnsDragonColumnsResizedonColumnsResizeDblClickonCompositeEditorChangeonContextMenuonDragonDblClickonDragInitonDragStartonDragEndonFooterClickonFooterContextMenuonFooterRowCellRenderedonHeaderCellRenderedonHeaderClickonHeaderContextMenuonHeaderMouseEnteronHeaderMouseLeaveonHeaderRowCellRenderedonHeaderRowMouseEnteronHeaderRowMouseLeaveonKeyDownonMouseEnteronMouseLeaveonRenderedonScrollonSelectedRowsChangedonSetOptionsonActivateChangedOptionsonSortonValidationErroronViewportChanged
onBeforePagingInfoChangedonGroupExpandedonGroupCollapsedonPagingInfoChangedonRowCountChangedonRowsChangedonRowsOrCountChangedonSelectedRowIdsChangedonSetItemsCalled
Contents
- Angular-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
- Composite Editor
- Context Menu
- Custom Tooltip
- Add/Delete/Update or Highlight item
- Dynamically Change Row CSS Classes
- Excel Copy Buffer
- Export to Excel
- Export to File (CSV/Txt)
- Grid State & Presets
- Grouping & Aggregators
- Row Detail
- SlickGrid Controls
- SlickGrid Plugins
- Pinning (frozen) of Columns/Rows
- Tree Data Grid
- SlickGrid & DataView objects
- Addons (controls/plugins)
- Backend Services