Skip to content

Revogrid Events

NameTypeComponentDescription
contentsizechanged"colPinEnd" | "colPinStart" | "rgCol" | "rgRow" | "rowPinEnd" | "rowPinStart"revo-gridNew content size has been applied. The size excludes the header. Currently, the event responsible for applying the new content size does not provide the actual size. To retrieve the actual content size, you can utilize the getContentSize function after the event has been triggered.
beforeeditBeforeSaveDataDetailsrevo-gridBefore the data is edited. To prevent the default behavior of editing data and use your own implementation, call e.preventDefault(). To override the edit result with your own value, set the e.val property to your desired value.
beforerangeedit{ data: DataLookup; models: Partial<DataLookup>; type: DimensionRows; }revo-gridBefore applying range data, specifically when a range selection occurs. To customize the data and prevent the default edit data from being set, you can call e.preventDefault().
aftereditBeforeSaveDataDetails | { data: DataLookup; models: Partial<DataLookup>; type: DimensionRows; }revo-gridAfter data applied or range changed.
beforeautofill{ type: DimensionRows; colType: DimensionCols; newRange: RangeArea; oldRange: RangeArea; mapping: OldNewRangeMapping; newData: { [key: number]: DataType; }; }revo-gridBefore autofill is applied. To prevent the default behavior of applying the edit data, you can call e.preventDefault().
beforerange{ type: DimensionRows; colType: DimensionCols; newRange: RangeArea; oldRange: RangeArea; mapping: OldNewRangeMapping; newData: { [key: number]: DataType; }; }revo-gridBefore autofill is applied. Runs before beforeautofill event. Use e.preventDefault() to prevent range.
afterfocusFocusAfterRenderEventrevo-gridAfter focus render finished. Can be used to access a focus element through event.target. This is just a duplicate of afterfocus from revogr-focus.tsx.
roworderchanged{ from: number; to: number; }revo-gridBefore the order of rgRow is applied. To prevent the default behavior of changing the order of rgRow, you can call e.preventDefault().
beforesortingapply{ column: ColumnRegular; order: "asc" | "desc"; additive: boolean; }revo-gridBy sorting.plugin.ts Before sorting apply. Use e.preventDefault() to prevent sorting data change.
beforesorting{ column: ColumnRegular; order: "asc" | "desc"; additive: boolean; }revo-gridBy sorting.plugin.ts Before sorting event. Initial sorting triggered, if this event stops no other event called. Use e.preventDefault() to prevent sorting.
rowdragstart{ cell: Cell; text: string; pos: PositionItem; event: MouseEvent; rowType: DimensionRows; model: any; }revo-gridThis event is triggered when the row order change is started. To prevent the default behavior of changing the row order, you can call e.preventDefault(). To change the item name at the start of the row order change, you can set e.text to the desired new name.
headerclickColumnRegularrevo-gridOn header click.
beforecellfocusBeforeSaveDataDetailsrevo-gridBefore the cell focus is changed. To prevent the default behavior of changing the cell focus, you can call e.preventDefault().
beforefocuslostnull | { model: any; cell: Cell; colType: DimensionCols; rowType: DimensionRows; column?: ColumnRegular | undefined; }revo-gridBefore the grid focus is lost. To prevent the default behavior of changing the cell focus, you can call e.preventDefault().
beforesourceset{ type: DimensionRows; source: DataType[]; }revo-gridBefore main source/rows data apply. You can override data source here
beforeanysource{ type: DimensionRows; source: DataType[]; }revo-gridBefore data apply on any source type. Can be source from pinned and main viewport. You can override data source here
aftersourceset{ type: DimensionRows; source: DataType[]; }revo-gridAfter main source/rows updated
afteranysource{ type: DimensionRows; source: DataType[]; }revo-gridEmitted after each source update, whether from the pinned or main viewport. Useful for tracking all changes originating from sources in both the pinned and main viewports.
beforecolumnsset{ columns: Record<DimensionCols, ColumnRegular[]>; columnByProp: Record<ColumnProp, ColumnRegular[]>; columnGrouping: ColumnGroupingCollection; maxLevel: number; sort: Record<ColumnProp, ColumnRegular>; }revo-gridEmitted before a column update is applied. Listeners can use this event to perform any necessary actions or modifications before the column update is finalized.
beforecolumnapplied{ columns: Record<DimensionCols, ColumnRegular[]>; columnByProp: Record<ColumnProp, ColumnRegular[]>; columnGrouping: ColumnGroupingCollection; maxLevel: number; sort: Record<ColumnProp, ColumnRegular>; }revo-gridEmitted before a column update is applied, after the column set is gathered and the viewport is updated. Useful for performing actions or modifications before the final application of the column update.
aftercolumnsset{ columns: ColumnCollection; order: Record<ColumnProp, "asc" | "desc" | undefined>; }revo-gridColumn updated
beforefilterapply{ collection: FilterCollection; }revo-gridEmitted before applying a filter to the data source. Use e.preventDefault() to prevent cell focus change. Modify if you need to change filters.
beforefiltertrimmed{ collection: FilterCollection; itemsToFilter: Record<number, boolean>; }revo-gridEmitted before applying a filter to the data source. Use e.preventDefault() to prevent the default behavior of trimming values and applying the filter. Modify the collection property if you want to change the filters. Modify the itemsToFilter property if you want to filter the indexes for trimming.
beforetrimmed{ trimmed: Record<number, boolean>; trimmedType: string; type: string; }revo-gridEmitted before trimming values. Use e.preventDefault() to prevent the default behavior of trimming values. Modify the trimmed property if you want to filter the indexes for trimming.
aftertrimmedanyrevo-gridEmitted after trimmed values have been applied. Useful for notifying when trimming of values has taken place.
viewportscroll{ dimension: DimensionType; coordinate: number; delta?: number | undefined; outside?: boolean | undefined; }revo-gridEmitted when the viewport is scrolled. Useful for tracking viewport scrolling events.
beforeexport{ data: DataType[]; } & ColSourcerevo-gridBefore export Use e.preventDefault() to prevent export Replace data in Event in case you want to modify it in export
beforeeditstartBeforeSaveDataDetailsrevo-gridEmitted before editing starts. Use e.preventDefault() to prevent the default edit behavior.
aftercolumnresize{ [index: number]: ColumnRegular; }revo-gridEmitted after column resizing. Useful for retrieving the resized columns.
beforerowdefinition{ vals: any; oldVals: any; }revo-gridEmitted before the row definition is applied. Useful for modifying or preventing the default row definition behavior.
filterconfigchangedanyrevo-gridEmitted when the filter configuration is changed
rowheaderschangedanyrevo-gridEmmited when the row headers are changed.
beforegridrenderanyrevo-gridEmmited before the grid is rendered.
aftergridrenderanyrevo-gridEmmited after the grid is rendered.
aftergridinitanyrevo-gridEmmited after the grid is initialized. Connected to the DOM.
additionaldatachangedanyrevo-gridEmmited after the additional data is changed
afterthemechangedstringrevo-gridEmmited after the theme is changed
createdanyrevo-gridEmmited after grid created
beforepaste{ raw: string; isHTML: boolean; event: ClipboardEvent; dataText: string; }revogr-clipboardPaste 1. Fired before paste applied to the grid defaultPrevented - if true, paste will be canceled
beforepasteapply{ raw: string; parsed: string[][]; event: ClipboardEvent; }revogr-clipboardPaste 2. Fired before paste applied to the grid and after data parsed
pasteregionstring[][]revogr-clipboardPaste 3. Internal method. When data region is ready pass it to the top.
afterpasteapply{ raw: string; parsed: string[][]; event: ClipboardEvent; }revogr-clipboardPaste 4. Fired after paste applied to the grid defaultPrevented - if true, paste will be canceled
beforecut{ event: ClipboardEvent; }revogr-clipboardCut 1. Fired before cut triggered defaultPrevented - if true, cut will be canceled
clearregionDataTransferrevogr-clipboardCut 2. Clears region when cut is done
beforecopy{ event: ClipboardEvent; }revogr-clipboardCopy 1. Fired before copy triggered defaultPrevented - if true, copy will be canceled
beforecopyapply{ event: DataTransfer; data?: string[][] | undefined; }revogr-clipboardCopy Method 1. Fired before copy applied to the clipboard from outside. defaultPrevented - if true, copy will be canceled
copyregionDataTransferrevogr-clipboardCopy 2. Fired when region copied defaultPrevented - if true, copy will be canceled
beforerowrenderBeforeRowRenderEvent<any>revogr-dataBefore each row render
afterrender{ type: DimensionRows; }revogr-dataWhen data render finished for the designated type
beforecellrenderBeforeCellRenderEvent<CellTemplateProp>revogr-dataBefore each cell render function. Allows to override cell properties
beforedatarenderAllDimensionTyperevogr-dataBefore data render
dragstartcellDragStartEventrevogr-dataEvent emitted on cell drag start
celledit{ rgRow: number; rgCol: number; type: DimensionRows; prop: ColumnProp; val: any; preventFocus?: boolean | undefined; }revogr-editCell edit event
closeeditboolean | undefinedrevogr-editClose editor event pass true if requires focus next
filterChange{ [prop: string]: FilterData[]; }revogr-filter-panel
resetChangenumber | stringrevogr-filter-panel
beforefocusrenderFocusRenderEventrevogr-focusBefore focus render event. Can be prevented by event.preventDefault(). If preventDefault used slot will be rendered.
beforescrollintoview{ el: HTMLElement; }revogr-focusBefore focus changed verify if it's in view and scroll viewport into this view Can be prevented by event.preventDefault()
afterfocusFocusAfterRenderEventrevogr-focusUsed to setup properties after focus was rendered
beforeheaderclick{ index: number; originalEvent: MouseEvent; column: ColumnRegular; providers: Providers<DimensionCols | "rowHeaders">; }revogr-headerOn initial header click
headerresize{ [x: string]: number; }revogr-headerOn header resize
beforeheaderresizeColumnRegular[]revogr-headerOn before header resize
headerdblclick{ index: number; originalEvent: MouseEvent; column: ColumnRegular; providers: Providers<DimensionCols | "rowHeaders">; }revogr-headerOn header double click
beforeheaderrender{ column: VirtualPositionItem; additionalData: any; data: ColumnTemplateProp; range?: RangeArea | null | undefined; canResize?: boolean | undefined; canFilter?: boolean | undefined; onResize?(e: ResizeEvent): void; onClick?(data: InitialHeaderClick): void; onDblClick?(data: InitialHeaderClick): void; } & Partial<Pick<ResizeProps, "active">>revogr-headerBefore each header cell render function. Allows to override cell properties
afterheaderrender{ type: DimensionCols | "rowHeaders"; readonly: boolean; data: ColumnRegular[] | Observable<DataSourceState<any, any>>; viewport: Observable<ViewportState>; dimension: Observable<DimensionSettingsState>; selection: Observable<SelectionStoreState>; }revogr-headerAfter all header cells rendered. Finalizes cell rendering.
rowdragstartinit{ cell: Cell; text: string; pos: PositionItem; event: MouseEvent; rowType: DimensionRows; model: any; }revogr-order-editorRow drag started
rowdragendinit{ rowType: DimensionRows; }revogr-order-editorRow drag ended started
rowdragmoveinitPositionItem & { rowType: DimensionRows; }revogr-order-editorRow move started
rowdragmousemoveCell & { rowType: DimensionRows; }revogr-order-editorRow mouse move started
rowdropinit{ from: number; to: number; rowType: DimensionRows; }revogr-order-editorRow dragged, new range ready to be applied
roworderchange{ from: number; to: number; rowType: DimensionRows; }revogr-order-editorRow drag ended finished. Time to apply data
beforecopyregionanyrevogr-overlay-selectionBefore clipboard copy happened. Validate data before copy. To prevent the default behavior of editing data and use your own implementation, call e.preventDefault().
beforepasteregionanyrevogr-overlay-selectionBefore region paste happened.
celleditapplyBeforeSaveDataDetailsrevogr-overlay-selectionCell edit apply to the data source. Triggers datasource edit on the root level.
beforecellfocusinitBeforeSaveDataDetailsrevogr-overlay-selectionBefore cell focus.
beforenextvpfocusCellrevogr-overlay-selectionFired when change of viewport happens. Usually when we switch between pinned regions.
seteditBeforeSaveDataDetailsrevogr-overlay-selectionSet edit cell.
beforeapplyrangeFocusRenderEventrevogr-overlay-selectionBefore range applied. First step in triggerRangeEvent.
beforesetrangeanyrevogr-overlay-selectionBefore range selection applied. Second step in triggerRangeEvent.
setrangeRangeArea & { type: MultiDimensionType; }revogr-overlay-selectionSet range. Third step in triggerRangeEvent.
beforeeditrenderFocusRenderEventrevogr-overlay-selectionBefore editor render.
selectallanyrevogr-overlay-selectionSelect all cells from keyboard.
canceleditanyrevogr-overlay-selectionCancel edit. Used for editors support when editor close requested.
settemprangenull | { type: string | null; area: RangeArea | null; }revogr-overlay-selectionSet temp range area during autofill.
beforesettemprange{ tempRange: Nullable<TempRange> | null; } & EventData & AllDimensionTyperevogr-overlay-selectionBefore set temp range area during autofill.
applyfocusFocusRenderEventrevogr-overlay-selectionBefore cell get focused. To prevent the default behavior of applying the edit data, you can call e.preventDefault().
focuscellApplyFocusEvent & FocusRenderEventrevogr-overlay-selectionCell get focused. To prevent the default behavior of applying the edit data, you can call e.preventDefault().
beforerangedataapplyFocusRenderEventrevogr-overlay-selectionRange data apply.
selectionchangeinit{ type: DimensionRows; colType: DimensionCols; newRange: RangeArea; oldRange: RangeArea; mapping: OldNewRangeMapping; newData: { [key: number]: DataType; }; }revogr-overlay-selectionAutofill data in range. First step in applyRangeWithData
beforerangecopyapply{ type: DimensionRows; colType: DimensionCols; newRange: RangeArea; oldRange: RangeArea; mapping: OldNewRangeMapping; newData: { [key: number]: DataType; }; }revogr-overlay-selectionBefore range copy.
rangeeditapply{ data: DataLookup; models: Partial<DataLookup>; type: DimensionRows; }revogr-overlay-selectionRange data apply. Triggers datasource edit on the root level.
clipboardrangecopy{ data: any[][]; range: RangeArea; mapping: OldNewRangeMapping; } & AllDimensionTyperevogr-overlay-selectionRange copy.
clipboardrangepaste{ data: DataLookup<any>; models: Partial<DataLookup<any>>; range: RangeArea | null; } & AllDimensionTyperevogr-overlay-selectionRange paste event.
beforekeydown{ original: KeyboardEvent; } & EventDatarevogr-overlay-selectionBefore key up event proxy, used to prevent key up trigger. If you have some custom behaviour event, use this event to check if it wasn't processed by internal logic. Call preventDefault().
beforekeyup{ original: KeyboardEvent; } & EventDatarevogr-overlay-selectionBefore key down event proxy, used to prevent key down trigger. If you have some custom behaviour event, use this event to check if it wasn't processed by internal logic. Call preventDefault().
beforecellsaveanyrevogr-overlay-selectionRuns before cell save. Can be used to override or cancel original save.
scrollview{ dimension: DimensionType; coordinate: number; delta?: number | undefined; outside?: boolean | undefined; }revogr-row-headersScroll viewport
refElementScrollrevogr-row-headersRegister element to scroll
scrollvirtual{ dimension: DimensionType; coordinate: number; delta?: number | undefined; outside?: boolean | undefined; }revogr-scroll-virtualScroll event
scrollviewport{ dimension: DimensionType; coordinate: number; delta?: number | undefined; outside?: boolean | undefined; }revogr-viewport-scrollBefore scroll event
resizeviewport{ dimension: DimensionType; size: number; rowHeader?: boolean | undefined; }revogr-viewport-scrollViewport resize
scrollchange{ type: DimensionType; hasScroll: boolean; }revogr-viewport-scrollTriggered on scroll change, can be used to get information about scroll visibility
scrollviewportsilent{ dimension: DimensionType; coordinate: number; delta?: number | undefined; outside?: boolean | undefined; }revogr-viewport-scrollSilently scroll to coordinate Made to align negative coordinates for mobile devices
html{ html: string; vnodes: VNode[] | null; }vnode-html

Built with ❤️ by Revolist OU

Revogrid is a powerful data grid library made by Revolist OU.