@progress/kendo-react-grid/interfaces/events.d.ts

React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { SortDescriptor, CompositeFilterDescriptor, GroupDescriptor, State } from '@progress/kendo-data-query';
import { GridHandle } from '../Grid.js';
import { Page } from '../paging/Page.js';
import { GridColumnProps } from './GridColumnProps.js';
import { BaseEvent, NormalizedDragEvent } from '@progress/kendo-react-common';
import { DetailExpandDescriptor, EditDescriptor, GroupExpandDescriptor, PagerTargetEvent, SelectDescriptor, TableDragSelectionReleaseEvent, TableKeyDownEvent, TableSelectionChangeEvent } from '@progress/kendo-react-data-tools';
import { MenuSelectEvent } from '@progress/kendo-react-layout';
import { GridReorderDropPosition } from './GridReorderDropDir.js';
import { GridColumnState } from './GridColumnState.js';
import { GridHighlightDescriptor } from './GridHighlightDescriptor.js';
/**
 * Represents the base event object of the Grid.
 */
export interface GridEvent extends BaseEvent<GridHandle> {
}
/**
 * Represents the object of the `onPageChange` Grid event.
 */
export interface GridPageChangeEvent extends GridEvent {
    /**
     * The page information containing the current page details.
     */
    page: Page;
    /**
     * The target event that triggered the page change.
     */
    targetEvent?: PagerTargetEvent;
}
/**
 * Represents the object of the `onDataStateChange` Grid event.
 */
export interface GridDataStateChangeEvent extends GridEvent {
    /**
     * The [State](https://www.telerik.com/kendo-react-ui/components/datatools/api/state) of the Grid based on the user action.
     */
    dataState: State;
    /**
     * The [PagerTargetEvent](https://www.telerik.com/kendo-react-ui/components/datatools/api/pagertargetevent) that triggered the data state change.
     */
    targetEvent?: PagerTargetEvent;
}
/**
 * Represents the object of the `onSortChange` Grid event.
 */
export interface GridSortChangeEvent extends GridEvent {
    /**
     * The new ([SortDescriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/sortdescriptor)) according to the user action.
     */
    sort: SortDescriptor[];
}
/**
 * Represents the object of the `onFilterChange` Grid event.
 */
export interface GridFilterChangeEvent extends GridEvent {
    /**
     * The new [CompositeFilterDescriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/compositefilterdescriptor) based on the user action.
     */
    filter: CompositeFilterDescriptor;
}
/**
 * Represents the object of the `onHighlightChange` Grid event.
 */
export interface GridHighlightChangeEvent {
    /**
     * The new highlight descriptor based on the user action.
     */
    highlight: GridHighlightDescriptor;
}
/**
 * Represents the object of the `onSearchChange` Grid event.
 */
export interface GridSearchChangeEvent extends GridEvent {
    /**
     * The new search based on the user action.
     */
    search: CompositeFilterDescriptor;
}
/**
 * Represents the object of the `onGroupChange` Grid event.
 */
export interface GridGroupChangeEvent extends GridEvent {
    /**
     * An array of [GroupDescriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/groupdescriptor)[]  that corresponds to the user action.
     */
    group: GroupDescriptor[];
}
/**
 * Represents the object of the `onDetailExpandChange` Grid event.
 */
export interface GridDetailExpandChangeEvent extends GridEvent {
    /**
     * The descriptor defining which detail rows are expanded.
     */
    detailExpand: DetailExpandDescriptor;
}
/**
 * Represents the object of the `onGroupExpandChange` Grid event.
 */
export interface GridGroupExpandChangeEvent extends GridEvent {
    /**
     * The descriptors defining which groups are expanded.
     */
    groupExpand: GroupExpandDescriptor[];
}
/**
 * Represents the object of the `onSelectionChange` Grid event.
 */
export interface GridSelectionChangeEvent extends GridEvent, TableSelectionChangeEvent<GridHandle> {
    /**
     * The new [SelectDescriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/selectdescriptor) based on the user action.
     */
    select: SelectDescriptor;
    /**
     * The dataItem from which the selection starts(Valid for scenarios without checkbox selection).
     */
    startDataItem?: any;
    /**
     * The dataItem to which the selection ends(Valid for scenarios without checkbox selection)
     */
    endDataItem?: any;
}
/**
 * Represents the object of the `onEditChange` Grid event.
 */
export interface GridEditChangeEvent extends GridEvent {
    /**
     * The descriptor defining which items are in edit mode.
     */
    edit: EditDescriptor;
}
/**
 * Represents the object of the `GridKeyDownEvent` Grid event.
 */
export interface GridKeyDownEvent extends GridEvent, TableKeyDownEvent<GridHandle> {
}
/** @hidden */
export interface GridDragSelectionReleaseEvent extends TableDragSelectionReleaseEvent {
}
/**
 * Represents the object of the `onItemChange` Grid event.
 */
export interface GridItemChangeEvent extends GridEvent {
    /**
     * The data object that represents the current row.
     */
    dataItem: any;
    /**
     * The field to which the cell is bound.
     */
    field?: string;
    /**
     * The value of the item.
     */
    value: any;
    /**
     * Zero based index of the data item.
     */
    dataIndex: number;
}
/**
 * Represents the object of the `onHeaderSelectionChange` Grid event.
 */
export interface GridHeaderSelectionChangeEvent extends GridEvent {
    /**
     * The new [SelectDescriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/selectdescriptor) based on the user action.
     */
    select: SelectDescriptor;
    /**
     * The field of the column in which the cell is located.
     */
    field?: string;
    /**
     * The current Grid leaf data items.
     */
    dataItems: any[];
}
/**
 * Represents the object of the `onContextMenu` Grid event.
 */
export interface GridContextMenuEvent extends GridEvent {
    /**
     * The data object that represents the current row.
     */
    dataItem: any;
    /**
     * The field to which the cell is bound.
     */
    field?: string;
    /**
     * A React Synthetic Event.
     */
    syntheticEvent: React.MouseEvent<any>;
}
/**
 * Represents the object of the `onContextMenuItemClick` Grid event.
 */
export interface GridContextMenuItemClickEvent extends GridEvent {
    /**
     * The Context menu item click event.
     */
    event: MenuSelectEvent;
    /**
     * The data object that represents the current row.
     */
    dataItem?: any;
    /**
     * The data object that represents the clicked menu item.
     */
    menuItem: any;
    /**
     * The field to which the cell is bound.
     */
    field?: string;
}
/**
 * Represents the object of the `onReorderRow` Grid event.
 */
export interface GridRowReorderEvent extends Omit<GridEvent, 'syntheticEvent'> {
    /**
     * Represents the currently dragged row.
     */
    draggedDataItems: any[];
    /**
     * Represents the row over which the dragged row is dropped.
     */
    droppedDataItem: any;
    /**
     * The exact dragged row position relative to the position of the drop target row..
     */
    dropPosition: GridReorderDropPosition;
    /**
     * A native DOM event.
     */
    nativeEvent: PointerEvent | MouseEvent | TouchEvent | Event;
    /**
     * Represents a unified drag event that is triggered regardless if the native event underneath is a pointer, mouse, touch, or scroll event.
     */
    dragEvent: NormalizedDragEvent;
    /**
     * The reference of the Grid in which the row is dropped.
     */
    target: GridHandle;
}
/**
 * Represents the object of the `GridNavigationActionEvent` Grid event.
 */
export interface GridNavigationActionEvent extends GridEvent {
    /**
     * The focused element.
     */
    focusElement: any;
}
/**
 * Represents the object of the `onRowClick` Grid event.
 */
export interface GridRowClickEvent extends GridEvent {
    /**
     * The item from the `data` property of the Grid which corresponds to the row that is clicked.
     */
    dataItem: any;
}
/**
 * Represents the object of the `onRowDoubleClick` Grid event.
 */
export interface GridRowDoubleClickEvent extends GridEvent {
    /**
     * The item from the `data` property of the Grid which corresponds to the row that is clicked.
     */
    dataItem: any;
}
/**
 * Represents the object of the `onColumnResize` Grid event.
 */
export interface GridColumnResizeEvent {
    /**
     * An event target.
     */
    target: GridHandle;
    /**
     * A native DOM event.
     * Can be `null` when the callback source is not user action (e.g.: method call).
     */
    nativeEvent: any;
    /**
     * The current columns collection.
     */
    columns: GridColumnProps[];
    /**
     * **Deprecated**. Use `targetColumnId` instead.
     * The index of the column.
     */
    index: number;
    /**
     * **Deprecated**.
     * The new width of the column.
     */
    newWidth: number;
    /**
     * **Deprecated**.
     * The actual width of the column prior to resizing.
     */
    oldWidth: number;
    /**
     * Indicates that resizing is complete and the user has dropped the resize handler.
     */
    end: boolean;
    /**
     * The id of the clicked/dragged column.
     * When the callback source is not user action (e.g.: method call), contains only the first column id from the list.
     */
    targetColumnId?: string;
}
/**
 * Represents the object of the `onColumnReorder` Grid event.
 */
export interface GridColumnReorderEvent {
    /**
     * An event target.
     */
    target: GridHandle;
    /**
     * A native DOM event.
     */
    nativeEvent: any;
    /**
     * The current columns collection.
     */
    columns: GridColumnProps[];
    /**
     * The id of the dragged column.
     */
    columnId?: string;
}
/**
 * Represents the object of the `onColumnsStateChange` Grid event.
 */
export interface GridColumnsStateChangeEvent {
    /**
     * An event target.
     */
    target: GridHandle;
    /**
     * The columns state collection.
     */
    columnsState: GridColumnState[];
}
/**
 * Represents a server counterpart of every Grid event. It strips out all arguments from the event that are not serializable to the server.
 */
export type ServerEvent<T> = Omit<T, 'nativeEvent' | 'syntheticEvent' | 'target' | 'targetEvent'>;
/**
 * Represents the object of the `onRowPinChange` Grid event.
 */
export interface GridRowPinChangeEvent {
    /**
     * The updated array of items pinned to the top of the Grid.
     */
    pinnedTopRows: any[];
    /**
     * The updated array of items pinned to the bottom of the Grid.
     */
    pinnedBottomRows: any[];
    /**
     * The data item that triggered the pin change.
     */
    dataItem: any;
}