@progress/kendo-react-grid 13.3.0 → 13.4.0-develop.2

package/interfaces/GridColumnProps.d.ts

@@ -0,0 +1,230 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ComponentType, ReactElement } from 'react';
+import { GridColumnChildrenProps } from './GridColumnChildrenProps.js';
+import { GridColumnMenuProps } from '../interfaces/GridColumnMenuProps.js';
+import { GridColumnSortSettings } from './GridSortSettings.js';
+import { ColumnBaseProps } from '@progress/kendo-react-data-tools';
+import { FieldProps } from '@progress/kendo-react-form';
+import { GridCellsSettings } from './GridCellsSettings.js';
+import { SVGIcon } from '@progress/kendo-react-common';
+import { GridColSpanProps } from './GridColSpanProps.js';
+import { GridCellBaseOptions, GridContextMenuOptions } from '../contextMenu/GridContextMenu.js';
+import { GridColumnType } from './ColumnType.js';
+import { GridDataType } from './GridDataType.js';
+import { GridRowSpannableSettings } from './GridRowSpannableSettings.js';
+/**
+ * The props of the GridColumn component.
+ */
+export interface GridColumnProps extends Omit<ColumnBaseProps, 'cell' | 'minResizableWidth'> {
+    /**
+     * Allows the column headers to be clicked and the `sortChange` event emitted.
+     * You have to handle the `sortChange` event yourself and sort the data.
+     *
+     * @example
+     * ```jsx
+     * <GridColumn sortable={true} />
+     * ```
+     * @default true
+     */
+    sortable?: boolean | GridColumnSortSettings;
+    /**
+     * Defines if the column is locked (frozen or sticky).
+     * Locked columns are the columns that are visible at all times while the user scrolls the component horizontally.
+     *
+     * @example
+     * ```jsx
+     * <GridColumn locked={true} />
+     * ```
+     * @default false
+     */
+    locked?: boolean;
+    /**
+     * A collection of child columns.
+     *
+     * @example
+     * ```jsx
+     * <GridColumn>
+     *   <GridColumn field="child1" />
+     *   <GridColumn field="child2" />
+     * </GridColumn>
+     * ```
+     */
+    children?: GridColumnProps[] | ReactElement<GridColumnProps>[] | GridColumnChildrenProps[];
+    /**
+     * Specifies a React element that will be cloned and rendered inside the column menu of the Grid ([see example](https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu#toc-basic-usage)).
+     *
+     * @example
+     * ```jsx
+     * <GridColumn columnMenu={CustomColumnMenu} />
+     * ```
+     */
+    columnMenu?: ComponentType<GridColumnMenuProps>;
+    /**
+     * Specifies the context menu settings that will be applied to the column.
+     *
+     * @example
+     * ```jsx
+     * <GridColumn contextMenu={{ enabled: true }} />
+     * ```
+     */
+    contextMenu?: boolean | GridContextMenuOptions | ((options: GridCellBaseOptions) => boolean | GridContextMenuOptions);
+    /**
+     * Determines if the column can be dragged to the group panel.
+     *
+     * @example
+     * ```jsx
+     * <GridColumn groupable={false} />
+     * ```
+     * @default true
+     */
+    groupable?: boolean;
+    /**
+     * Defines whether the column is editable ([more information and examples](https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-inline)).
+     *
+     * @example
+     * ```jsx
+     * <GridColumn editable={true} />
+     * ```
+     */
+    editable?: boolean;
+    /**
+     * Defines if a filter UI will be rendered for this column.
+     *
+     * @example
+     * ```jsx
+     * <GridColumn filterable={false} />
+     * ```
+     * @default true
+     */
+    filterable?: boolean;
+    /**
+     * Defines the title which will be set to the input element in the filter cell.
+     *
+     * @example
+     * ```jsx
+     * <GridColumn filterTitle="Custom Filter Title" />
+     * ```
+     */
+    filterTitle?: string;
+    /**
+     * Defines the filter type that will be rendered inside the filter row.
+     *
+     * @example
+     * ```jsx
+     * <GridColumn filter="numeric" />
+     * ```
+     * @default 'text'
+     */
+    filter?: GridDataType;
+    /**
+     * Defines the editor type. Used when the column enters the edit mode ([more information and examples](https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-inline)).
+     *
+     * @example
+     * ```jsx
+     * <GridColumn editor="date" />
+     * ```
+     * @default 'text'
+     */
+    editor?: GridDataType;
+    /**
+     * The validation method for the edit field when editting is in mode `dialog`.
+     *
+     * The method arguments are:
+     *
+     * * value - The current value of the field.
+     * * valueGetter - Function which can be used to get other fields value.
+     * Usable when validator depends on more than one field. Supports field paths.
+     * * fieldProps - Props of the Field component. Currently contains only the `name` prop.
+     * Usable when one validator is used across multiple fields.
+     *
+     * Returns `string` to signify error or `undefined` to signify validation success.
+     */
+    validator?: FieldProps['validator'];
+    /**
+     * Overrides the default (three vertical dots) column menu icon or the icon set through the ([`columnMenuIcon`](https://www.telerik.com/kendo-react-ui/components/grid/api/gridprops#toc-columnmenuicon)) property.
+     *
+     * @example
+     * ```jsx
+     * <GridColumn menuIcon={CustomIcon} />
+     * ```
+     */
+    menuIcon?: SVGIcon;
+    /**
+     * Sets the colSpan of the column which will make the row content span over multiple cells.
+     * As arguments, it takes either a number or a function that returns a number.
+     *
+     * @example
+     * ```jsx
+     * <GridColumn colSpan={2} />
+     * ```
+     * @default 1
+     */
+    colSpan?: number | ((colSpanProps: GridColSpanProps) => number);
+    /**
+     * Controls the visibility of the Grid's column.
+     *
+     * @example
+     * ```jsx
+     * <GridColumn hidden={true} />
+     * ```
+     * @default false
+     */
+    hidden?: boolean;
+    /**
+     * Sets the screen size condition that needs to be satisfied for a column to remain visible. If you set the hidden property, the behavior of media is overridden.
+     *
+     * @example
+     * ```jsx
+     * <GridColumn media="(min-width: 600px)" />
+     * ```
+     */
+    media?: string;
+    /**
+     * Specifies a set of cell components that the Grid will render instead of the built-in cell.
+     *
+     * @example
+     * ```jsx
+     * <GridColumn cells={{ data: CustomDataCell }} />
+     * ```
+     */
+    cells?: GridCellsSettings;
+    /**
+     * Sets the type of the column and renders a dedicated column for interaction.
+     *
+     * @example
+     * ```jsx
+     * <GridColumn columnType="checkbox" />
+     * ```
+     * @default "data"
+     */
+    columnType?: GridColumnType;
+    /**
+     * **Deprecated**: Use the `minWidth` property instead. The `minResizableWidth` property will be removed in a future version.
+     *
+     * @deprecated Use `minWidth` instead.
+     */
+    minResizableWidth?: number;
+    /**
+     * Sets the minimum width of the column (in pixels).
+     */
+    minWidth?: number;
+    /**
+     * Sets the maximum width of the column (in pixels).
+     */
+    maxWidth?: number;
+    /**
+     * Defines if the cells of the column should be spanned when their values are the same.
+     *
+     * @example
+     * ```jsx
+     * <GridColumn rowSpannable={true} />
+     * ```
+     */
+    rowSpannable?: boolean | GridRowSpannableSettings;
+}

package/interfaces/GridColumnState.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The state of the GridColumn
+ */
+export interface GridColumnState {
+    /**
+     * The id of the column.
+     */
+    id: string;
+    /**
+     * The field of the column.
+     */
+    field?: string;
+    /**
+     * The title of the column.
+     */
+    title?: string;
+    /**
+     * The value indicating whether a column is visible or not.
+     */
+    hidden?: boolean;
+    /**
+     * The width of the column (in pixels).
+     */
+    width?: string | number;
+    /**
+     * The position of the column.
+     */
+    orderIndex?: number;
+    /**
+     * A collection of child states.
+     */
+    children?: GridColumnState[];
+    /**
+     * Determines if the column is locked to the left or right side of the grid.
+     */
+    locked?: boolean;
+    /**
+     * Sets the minimum width of the column (in pixels).
+     */
+    minWidth?: number;
+    /**
+     * Sets the maximum width of the column (in pixels).
+     */
+    maxWidth?: number;
+}

package/interfaces/GridDataType.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Exposes the data types available when setting the [filter](https://www.telerik.com/kendo-react-ui/components/grid/api/gridcolumnprops#toc-filter) or
+ * [editor](https://www.telerik.com/kendo-react-ui/components/grid/api/gridcolumnprops#toc-editor) property of the Grid columns.
+ */
+export type GridDataType = 'text' | 'numeric' | 'boolean' | 'date';

package/interfaces/GridDetailExpandableSettings.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TableExpandableSettings } from '@progress/kendo-react-data-tools';
+/** @hidden */
+export interface GridDetailExpandableSettings extends TableExpandableSettings {
+}

package/interfaces/GridDetailRowProps.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The props of the GridDetailRow component ([see example](https://www.telerik.com/kendo-react-ui/components/grid/rows/detail)).
+ */
+export interface GridDetailRowProps {
+    /**
+     * The data object that represents the current row.
+     */
+    dataItem: any;
+    /**
+     * Zero-based index of the dataItem.
+     */
+    dataIndex: number;
+}

package/interfaces/GridEditDialogProps.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DialogProps } from '@progress/kendo-react-dialogs';
+import { GridColumnProps } from './GridColumnProps.js';
+/**
+ * Represents the props of the KendoReact Grid Edit Dialog component.
+ */
+export type GridEditDialogProps = DialogProps & {
+    /**
+     * The columns of the Grid.
+     */
+    columns?: GridColumnProps[];
+    /**
+     * The data item that is currently being edited.
+     */
+    dataItem?: any;
+    /**
+     * The method that is called when the user submits the edit form.
+     */
+    onSubmit?: (newDataItem: any, event?: React.SyntheticEvent<any>) => void;
+    /**
+     * The method that is called when the user cancels the edit form.
+     */
+    onCancel?: (event?: React.SyntheticEvent<any>) => void;
+};

package/interfaces/GridEditableSettings.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TableEditableSettings } from '@progress/kendo-react-data-tools';
+/**
+ * Represents the Grid editable settings:
+ * - `enabled` — Determines if the editing is enabled.
+ * - `mode` — Determines the editing mode.
+ *
+ */
+export interface GridEditableSettings extends TableEditableSettings {
+}

package/interfaces/GridFilterCellProps.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { GridFilterOperator } from './GridFilterOperator.js';
+/**
+ * The props of the GridFilterCell component
+ * ([more information](https://www.telerik.com/kendo-react-ui/components/grid/cells#toc-filter-cells)
+ * and [example](https://www.telerik.com/kendo-react-ui/components/grid/filtering#toc-custom-filter-cells)).
+ */
+export interface GridFilterCellProps {
+    /**
+     * The column field in which the cell is located.
+     */
+    field?: string;
+    /**
+     * The method that will be called if the cell needs to inform its parent Grid about a change.
+     */
+    onChange: (event: {
+        value: any;
+        operator: string | Function;
+        syntheticEvent: React.SyntheticEvent<any>;
+    }) => void;
+    /**
+     * The list of the default operators for the current filter type.
+     */
+    operators: GridFilterOperator[];
+    /**
+     * The title which will be set to the input element in the filter cell.
+     */
+    title?: string;
+    /**
+     * The type of the filter. Determines which editor will be rendered for filtering.
+     */
+    filterType: 'text' | 'numeric' | 'boolean' | 'date';
+    /**
+     * The value of the cell.
+     */
+    value: any;
+    /**
+     * The operator that will be used for the cell filtering.
+     */
+    operator?: string | Function;
+    /**
+     * The list of values for the Boolean filter.
+     */
+    booleanValues: GridFilterOperator[];
+    /**
+     * Accessible label of the filter.
+     */
+    ariaLabel?: string;
+    /**
+     * Configures the `size` of the cell.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: 'small' | 'medium' | 'large';
+}

package/interfaces/GridFilterOperator.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FilterOperator } from '@progress/kendo-react-data-tools';
+/**
+ * The filter operator for the Grid filters.
+ */
+export interface GridFilterOperator extends FilterOperator {
+}

package/interfaces/GridFilterOperators.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { GridFilterOperator } from './GridFilterOperator.js';
+/**
+ * The filter operators for the Grid filters.
+ *
+ * @example
+ * ```jsx-no-run
+ * // Default Grid filter operators:
+ * const filterOperators: {
+ *     'text': [
+ *         { text: 'grid.filterContainsOperator', operator: 'contains' },
+ *         { text: 'grid.filterNotContainsOperator', operator: 'doesnotcontain' },
+ *         { text: 'grid.filterEqOperator', operator: 'eq' },
+ *         { text: 'grid.filterNotEqOperator', operator: 'neq' },
+ *         { text: 'grid.filterStartsWithOperator', operator: 'startswith' },
+ *         { text: 'grid.filterEndsWithOperator', operator: 'endswith' },
+ *         { text: 'grid.filterIsNullOperator', operator: 'isnull' },
+ *         { text: 'grid.filterIsNotNullOperator', operator: 'isnotnull' },
+ *         { text: 'grid.filterIsEmptyOperator', operator: 'isempty' },
+ *         { text: 'grid.filterIsNotEmptyOperator', operator: 'isnotempty' }
+ *     ],
+ *     'numeric': [
+ *         { text: 'grid.filterEqOperator', operator: 'eq' },
+ *         { text: 'grid.filterNotEqOperator', operator: 'neq' },
+ *         { text: 'grid.filterGteOperator', operator: 'gte' },
+ *         { text: 'grid.filterGtOperator', operator: 'gt' },
+ *         { text: 'grid.filterLteOperator', operator: 'lte' },
+ *         { text: 'grid.filterLtOperator', operator: 'lt' },
+ *         { text: 'grid.filterIsNullOperator', operator: 'isnull' },
+ *         { text: 'grid.filterIsNotNullOperator', operator: 'isnotnull' }
+ *     ],
+ *     'date': [
+ *         { text: 'grid.filterEqOperator', operator: 'eq' },
+ *         { text: 'grid.filterNotEqOperator', operator: 'neq' },
+ *         { text: 'grid.filterAfterOrEqualOperator', operator: 'gte' },
+ *         { text: 'grid.filterAfterOperator', operator: 'gt' },
+ *         { text: 'grid.filterBeforeOperator', operator: 'lt' },
+ *         { text: 'grid.filterBeforeOrEqualOperator', operator: 'lte' },
+ *         { text: 'grid.filterIsNullOperator', operator: 'isnull' },
+ *         { text: 'grid.filterIsNotNullOperator', operator: 'isnotnull' }
+ *     ],
+ *     'boolean': [
+ *         { text: 'grid.filterEqOperator', operator: 'eq' }
+ *     ]
+ * }
+ * ```
+ */
+export interface GridFilterOperators {
+    [type: string]: GridFilterOperator[];
+}

package/interfaces/GridFooterCellProps.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The props of the GridFooterCell component
+ * ([see example](https://www.telerik.com/kendo-react-ui/components/grid/cells#toc-footer-cells)).
+ */
+export interface GridFooterCellProps {
+    /**
+     * The field to which the footer cell is bound.
+     */
+    field?: string;
+    /**
+     * The styles of the footer cell.
+     */
+    style?: React.CSSProperties;
+    /**
+     * The `colSpan` of the footer cell.
+     */
+    colSpan?: number;
+    /**
+     * The index to be applied to the `aria-colindex` attribute.
+     */
+    ariaColumnIndex: number;
+}

package/interfaces/GridGroupExpandableSettings.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TableGroupExpandableSettings } from '@progress/kendo-react-data-tools';
+/**
+ * Represents the Grid group expandable settings.
+ */
+export interface GridGroupExpandableSettings extends TableGroupExpandableSettings {
+    /**
+     * Determines the default expand state for groups.
+     * When set to `true`, all groups are expanded by default.
+     */
+    defaultExpand?: boolean;
+    /**
+     * Determines if group expanding functionality is enabled.
+     */
+    enabled?: boolean;
+}

package/interfaces/GridGroupableSettings.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { GridGroupExpandableSettings } from './GridGroupExpandableSettings.js';
+/**
+ * The settings for grouping the data of the Grid ([see example](https://www.telerik.com/kendo-react-ui/components/grid/grouping/grouping)).
+ */
+export interface GridGroupableSettings {
+    /**
+     * Determines if grouping by dragging and dropping the column headers is allowed and if the group header is visible.
+     */
+    enabled?: boolean;
+    /**
+     * Determines if the group footer row is visible when the group is collapsed. Defaults to `none`.
+     */
+    footer?: 'always' | 'visible' | 'none';
+    /**
+     * The group expandable settings.
+     */
+    expandable?: boolean | GridGroupExpandableSettings;
+}

package/interfaces/GridHeaderCellProps.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { HeaderCellBaseProps } from '@progress/kendo-react-data-tools';
+import { GridColumnMenuWrapperProps } from '../columnMenu/GridColumnMenuWrapper.js';
+/**
+ * The props of the GridHeaderCell component
+ * ([more information](https://www.telerik.com/kendo-react-ui/components/grid/cells#toc-header-cells)).
+ */
+export interface GridHeaderCellProps extends Omit<HeaderCellBaseProps, 'render'> {
+    /**
+     * The props of the Grid column menu wrapper.
+     */
+    columnMenuWrapperProps: GridColumnMenuWrapperProps;
+    /**
+     * @hidden
+     */
+    id?: string;
+}

package/interfaces/GridHighlightDescriptor.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Represents the highlight state descriptor for Grid items.
+ * The key is the item identifier, and the value can be either a boolean (for whole row highlighting)
+ * or an array of column indices (for specific cell highlighting).
+ */
+interface GridHighlightDescriptor {
+    [id: string]: boolean | number[];
+}
+export { GridHighlightDescriptor };

package/interfaces/GridNoRecordsProps.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The props of the GridNoRecords component.
+ */
+export interface GridNoRecordsProps {
+    /**
+     * The React elements that will be rendered inside the Grid when no records are available.
+     */
+    children?: React.ReactNode;
+}