@progress/kendo-vue-grid
Version:
1,655 lines (1,610 loc) • 102 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { ColumnBaseProps } from '@progress/kendo-vue-data-tools';
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
import { ComputedRef } from 'vue';
import { DataResult } from '@progress/kendo-data-query';
import { DefineComponent } from 'vue';
import { DetailExpandDescriptor } from '@progress/kendo-vue-data-tools';
import { ExtractPropTypes } from 'vue';
import { GridCellProps as GridCellProps_2 } from '.';
import { GridColumnMenuColumnProps } from '../interfaces/GridColumnMenuColumnProps';
import { GridColumnState as GridColumnState_2 } from '.';
import { GridDataStateChangeEvent as GridDataStateChangeEvent_2 } from '.';
import { GridDetailExpandChangeEvent as GridDetailExpandChangeEvent_2 } from '.';
import { GridExpandChangeEvent as GridExpandChangeEvent_2 } from '.';
import { GridFilterCellProps as GridFilterCellProps_2 } from '..';
import { GridFilterChangeEvent as GridFilterChangeEvent_2 } from '.';
import { GridFilterOperator as GridFilterOperator_2 } from '../interfaces/GridFilterOperator';
import { GridFilterOperators as GridFilterOperators_2 } from './interfaces/GridFilterOperators';
import { GridFilterOperators as GridFilterOperators_3 } from '../interfaces/GridFilterOperators';
import { GridGroupableSettings as GridGroupableSettings_2 } from '.';
import { GridGroupChangeEvent as GridGroupChangeEvent_2 } from '.';
import { GridGroupExpandChangeEvent as GridGroupExpandChangeEvent_2 } from '.';
import { GridItemChangeEvent as GridItemChangeEvent_2 } from '.';
import { GridPageChangeEvent as GridPageChangeEvent_2 } from '.';
import { GridPagerSettings } from '@progress/kendo-vue-data-tools';
import { GridRowSpannableSettings as GridRowSpannableSettings_2 } from './interfaces/GridRowSpannableSettings';
import { GridSearchChangeEvent as GridSearchChangeEvent_2 } from '.';
import { GridSortChangeEvent as GridSortChangeEvent_2 } from '.';
import { GridSortSettings as GridSortSettings_2 } from '.';
import { GridSortSettings as GridSortSettings_3 } from '..';
import { GridSortSettings as GridSortSettings_4 } from '../interfaces/GridSortSettings';
import { GroupDescriptor } from '@progress/kendo-data-query';
import { GroupExpandDescriptor } from '@progress/kendo-vue-data-tools';
import { GroupState } from '@progress/kendo-vue-data-tools';
import { IntlService } from '@progress/kendo-vue-intl';
import { JSX } from 'vue/jsx-runtime';
import { PopupAnimation } from '@progress/kendo-vue-popup';
import { PropType } from 'vue';
import { PublicProps } from 'vue';
import { Ref } from 'vue';
import { SearchField } from '@progress/kendo-vue-data-tools';
import { SortDescriptor } from '@progress/kendo-data-query';
import { State } from '@progress/kendo-data-query';
import { SVGIcon } from '@progress/kendo-vue-common';
import { SVGIcon as SVGIcon_2 } from '@progress/kendo-svg-icons';
import { SvgIconAll } from '@progress/kendo-vue-common';
import { TableExpandableSettings } from '@progress/kendo-vue-data-tools';
import { TableGroupExpandableSettings } from '@progress/kendo-vue-data-tools';
import { TextBoxChangeEvent } from '@progress/kendo-vue-inputs';
import { TextBoxProps } from '@progress/kendo-vue-inputs';
/**
* @hidden
*/
export declare function applyExpandedState(sdata: DataResult, collapsed: any[], uniqueField: string): DataResult;
/**
* @hidden
*/
export declare function autoGenerateColumns(data: any[] | DataResult | null | undefined, group: GroupDescriptor[] | undefined, expandable: GridDetailExpandableSettings, idInfo: {
prevId: number;
idPrefix: string;
}): ExtendedColumnProps[];
/** @hidden */
export declare const calcRowHeight: (tableBody: HTMLTableSectionElement | null) => number;
/**
* @hidden
*/
export declare function checkPropCompatibility(props: GridProps): void;
/**
* @hidden
*/
export declare interface DataItemWrapper {
dataItem: any;
rowType: GridRowType;
level: number;
expanded: boolean;
dataIndex: number;
group?: GroupState;
}
/**
* @hidden
*/
declare interface ExtendedColumnProps extends GridColumnProps {
declarationIndex: number;
parentIndex: number;
rowSpan: number;
depth: number;
colSpan: number;
kFirst?: boolean;
index: number;
headerColSpan: number;
children: ExtendedColumnProps[];
left: number;
right: number;
rightBorder: boolean;
ariaColumnIndex: number;
isAccessible: boolean;
/** @hidden _internal usage only */
_type?: 'edit' | 'expand';
rowSpannable?: Required<GridRowSpannableSettings>;
defaultCell?: any;
defaultHeaderCell?: any;
}
/**
* Can be used to check if filtering is applied to a specific field ([see example]({% slug column_menu_grid %}#toc-styling-the-column-menu-icon)). Useful for creating active filter indicators.
*/
export declare const filterGroupByField: (field: string, filter: CompositeFilterDescriptor | undefined) => CompositeFilterDescriptor | null;
/**
* @hidden
*/
export declare const firefox: boolean;
/**
* @hidden
*/
export declare const firefoxMaxHeight = 17895697;
/**
* @hidden
*/
export declare function flatData(output: Array<DataItemWrapper>, input: Array<any>, footer: 'always' | 'visible' | 'none', dataIndex: {
index: number;
}, groupDefined: boolean, expand?: DetailExpandDescriptor, groupExpand?: GroupExpandDescriptor[], defaultGroupExpand?: boolean, dataItemKey?: string, field?: string, level?: number, parentGroup?: GroupState | undefined): number;
/**
* @hidden
*/
export declare const Footer: DefineComponent<ExtractPropTypes< {
staticHeaders: BooleanConstructor;
row: ObjectConstructor;
columnResize: ObjectConstructor;
cols: ArrayConstructor;
size: StringConstructor;
}>, {
colGroupHeaderRef: Ref<any, any>;
footerWrapRef: Ref<any, any>;
}, {
scrollbarWidth: number;
rtl: boolean;
tableWidth: any;
}, {
tableClass(): {
[x: string]: any;
'k-table': boolean;
'k-grid-footer-table': boolean;
};
tableStyle(): {
width: any;
};
}, {
setScrollLeft(scrollLeft: number): void;
setWidth(width: number): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
staticHeaders: BooleanConstructor;
row: ObjectConstructor;
columnResize: ObjectConstructor;
cols: ArrayConstructor;
size: StringConstructor;
}>> & Readonly<{}>, {
staticHeaders: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const footerColumns: (columns: ExtendedColumnProps[]) => ExtendedColumnProps[];
/**
* @hidden
*/
export declare const FooterRow: DefineComponent<ExtractPropTypes< {
isRtl: PropType<boolean>;
columns: PropType<ExtendedColumnProps[]>;
rowIndex: PropType<number>;
}>, {}, {}, {}, {
columnStyles(column: ExtendedColumnProps): {
left: string;
right: string;
};
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
isRtl: PropType<boolean>;
columns: PropType<ExtendedColumnProps[]>;
rowIndex: PropType<number>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const getColSpan: (column: GridColumnProps, dataItem: any) => number;
/**
* @hidden
*/
export declare const getColumnWidth: (column: ExtendedColumnProps) => string | undefined;
/**
* @hidden
*/
export declare const getDataAsArray: (data: any[] | DataResult | null | undefined) => any[];
/**
* @hidden
*/
export declare const getFlatColumnsState: (state: GridColumnState[]) => GridColumnState[];
/**
* @hidden
*/
export declare function getIndex(event: any, parent: HTMLElement | null): number;
/**
* @hidden
*/
export declare function getNestedValue(fieldName: string, dataItem: any): any;
/**
* @hidden
*/
export declare const getRowSpanOptions: (rowSpannable?: boolean | GridRowSpannableSettings) => Required<GridRowSpannableSettings>;
/**
* Represents the [KendoVue Grid component]({% slug overview_grid %}).
*
* @remarks
* Supported children components are: {@link GridColumn}, {@link GridToolbar}, {@link GridNoRecords}, {@link StatusBar}.
*
*
* export default App;
* ```
*/
export declare const Grid: DefineComponent<ExtractPropTypes< {
id: PropType<string>;
autoProcessData: PropType<boolean | {
filter?: boolean;
search?: boolean;
sort?: boolean;
group?: boolean;
page?: boolean;
}>;
topCacheCount: {
type: PropType<number>; /**
* Represent the `ref` of the Grid component.
*/
default: number;
};
collapsedGroups: {
type: PropType<any[][]>;
default: () => any[];
};
uniqueField: PropType<string>;
totalGroupedHeight: PropType<number>;
allGroupedItems: PropType<DataResult>;
alternatePerGroup: PropType<boolean>;
columns: PropType<GridColumnProps[]>;
columnsState: {
type: PropType<GridColumnState_2[]>;
default: () => any;
};
defaultColumnsState: {
type: PropType<GridColumnState_2[]>; /**
* Method to allow the scroll to be set to a specific row index when the Grid is scrollable. It is zero based.
*
* @param options - Object, containing the rowIndex to which is going to be scrolled.
*/
default: () => any;
};
columnVirtualization: PropType<boolean>;
dataItems: PropType<any[] | DataResult>;
sortable: PropType<GridSortSettings_2>;
defaultSort: PropType<SortDescriptor[]>;
sort: PropType<SortDescriptor[]>;
filterable: PropType<boolean>;
filterOperators: PropType<GridFilterOperators_2>;
filterCellRender: PropType<any>;
headerCellRender: PropType<any>;
showLoader: {
type: PropType<boolean>;
default: any;
};
loader: PropType<string | Object | Function>;
defaultFilter: PropType<CompositeFilterDescriptor>;
filter: PropType<CompositeFilterDescriptor>;
defaultSearch: PropType<CompositeFilterDescriptor>;
search: PropType<CompositeFilterDescriptor>;
searchFields: PropType<(string | SearchField)[]>;
highlight: PropType< {
[id: string]: boolean | {
[id: string]: boolean;
};
}>;
pageable: PropType<any>;
pageSize: PropType<number>;
total: PropType<number>;
fixedScroll: PropType<boolean>;
skip: PropType<number>;
defaultSkip: PropType<number>;
take: PropType<number>;
defaultTake: PropType<number>;
expandField: PropType<string>;
expandColumn: PropType<GridColumnProps>;
selectedField: PropType<string>;
cellRender: PropType<string | boolean | ((h: any, defaultRendering: any, props: GridCellProps_2, listeners: any) => any)>;
rowRender: PropType<string | boolean | ((h: any, defaultRendering: any, defaultSlots: any, props: any, listeners: any) => any)>;
rowSpannable: PropType<boolean | GridRowSpannableSettings_2>;
resizable: PropType<boolean>;
reorderable: PropType<boolean>;
group: PropType<GroupDescriptor[]>;
defaultGroup: PropType<GroupDescriptor[]>;
groupable: PropType<boolean | GridGroupableSettings_2>;
groupExpand: PropType<GroupExpandDescriptor[]>;
defaultGroupExpand: PropType<GroupExpandDescriptor[]>;
detailExpand: PropType<DetailExpandDescriptor>;
defaultDetailExpand: PropType<DetailExpandDescriptor>;
editField: PropType<string>;
rowClass: PropType<Function>;
scrollable: {
type: PropType<string>;
default: string;
};
size: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
pager: PropType<string | boolean | Object | Function>;
rowHeight: PropType<number>;
detailRowHeight: PropType<number>;
detail: PropType<any>;
columnMenu: PropType<any>;
columnMenuAnimate: {
type: PropType<boolean | PopupAnimation>;
default: () => boolean;
};
columnMenuIcon: DefineComponent<ExtractPropTypes< {
name: StringConstructor;
icon: ObjectConstructor;
themeColor: {
type: StringConstructor;
};
size: {
type: StringConstructor;
};
flip: {
type: StringConstructor;
};
id: StringConstructor;
ariaLabel: StringConstructor;
title: StringConstructor;
viewBox: {
type: StringConstructor;
default: string;
};
tabIndex: NumberConstructor;
svgClassName: StringConstructor;
svgStyle: ObjectConstructor;
}>, {}, {}, {
wrapperClass(this: SvgIconAll): {
[x: string]: any;
[x: number]: any;
'k-icon': boolean;
'k-svg-icon': boolean;
'k-flip-h': boolean;
'k-flip-v': boolean;
};
}, {
handleClick(e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
click: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
name: StringConstructor;
icon: ObjectConstructor;
themeColor: {
type: StringConstructor;
};
size: {
type: StringConstructor;
};
flip: {
type: StringConstructor;
};
id: StringConstructor;
ariaLabel: StringConstructor;
title: StringConstructor;
viewBox: {
type: StringConstructor;
default: string;
};
tabIndex: NumberConstructor;
svgClassName: StringConstructor;
svgStyle: ObjectConstructor;
}>> & Readonly<{
onClick?: (...args: any[] | unknown[]) => any;
}>, {
viewBox: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
dataItemKey: StringConstructor;
navigatable: {
type: PropType<boolean>;
default: boolean;
};
onItemchange: PropType<(event: GridItemChangeEvent_2) => void>;
onExpandchange: PropType<(event: GridExpandChangeEvent_2) => void>;
onDatastatechange: PropType<(event: GridDataStateChangeEvent_2) => void>;
onPagechange: PropType<(event: GridPageChangeEvent_2) => void>;
onSortchange: PropType<(event: GridSortChangeEvent_2) => void>;
onFilterchange: PropType<(event: GridFilterChangeEvent_2) => void>;
onGroupchange: PropType<(event: GridGroupChangeEvent_2) => void>;
onSearchchange: PropType<(event: GridSearchChangeEvent_2) => void>;
onGroupexpandchange: PropType<(event: GridGroupExpandChangeEvent_2) => void>;
onDetailexpandchange: PropType<(event: GridDetailExpandChangeEvent_2) => void>;
}>, void, {}, {
columnsWithTemplates(): any[];
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
id: PropType<string>;
autoProcessData: PropType<boolean | {
filter?: boolean;
search?: boolean;
sort?: boolean;
group?: boolean;
page?: boolean;
}>;
topCacheCount: {
type: PropType<number>; /**
* Represent the `ref` of the Grid component.
*/
default: number;
};
collapsedGroups: {
type: PropType<any[][]>;
default: () => any[];
};
uniqueField: PropType<string>;
totalGroupedHeight: PropType<number>;
allGroupedItems: PropType<DataResult>;
alternatePerGroup: PropType<boolean>;
columns: PropType<GridColumnProps[]>;
columnsState: {
type: PropType<GridColumnState_2[]>;
default: () => any;
};
defaultColumnsState: {
type: PropType<GridColumnState_2[]>; /**
* Method to allow the scroll to be set to a specific row index when the Grid is scrollable. It is zero based.
*
* @param options - Object, containing the rowIndex to which is going to be scrolled.
*/
default: () => any;
};
columnVirtualization: PropType<boolean>;
dataItems: PropType<any[] | DataResult>;
sortable: PropType<GridSortSettings_2>;
defaultSort: PropType<SortDescriptor[]>;
sort: PropType<SortDescriptor[]>;
filterable: PropType<boolean>;
filterOperators: PropType<GridFilterOperators_2>;
filterCellRender: PropType<any>;
headerCellRender: PropType<any>;
showLoader: {
type: PropType<boolean>;
default: any;
};
loader: PropType<string | Object | Function>;
defaultFilter: PropType<CompositeFilterDescriptor>;
filter: PropType<CompositeFilterDescriptor>;
defaultSearch: PropType<CompositeFilterDescriptor>;
search: PropType<CompositeFilterDescriptor>;
searchFields: PropType<(string | SearchField)[]>;
highlight: PropType< {
[id: string]: boolean | {
[id: string]: boolean;
};
}>;
pageable: PropType<any>;
pageSize: PropType<number>;
total: PropType<number>;
fixedScroll: PropType<boolean>;
skip: PropType<number>;
defaultSkip: PropType<number>;
take: PropType<number>;
defaultTake: PropType<number>;
expandField: PropType<string>;
expandColumn: PropType<GridColumnProps>;
selectedField: PropType<string>;
cellRender: PropType<string | boolean | ((h: any, defaultRendering: any, props: GridCellProps_2, listeners: any) => any)>;
rowRender: PropType<string | boolean | ((h: any, defaultRendering: any, defaultSlots: any, props: any, listeners: any) => any)>;
rowSpannable: PropType<boolean | GridRowSpannableSettings_2>;
resizable: PropType<boolean>;
reorderable: PropType<boolean>;
group: PropType<GroupDescriptor[]>;
defaultGroup: PropType<GroupDescriptor[]>;
groupable: PropType<boolean | GridGroupableSettings_2>;
groupExpand: PropType<GroupExpandDescriptor[]>;
defaultGroupExpand: PropType<GroupExpandDescriptor[]>;
detailExpand: PropType<DetailExpandDescriptor>;
defaultDetailExpand: PropType<DetailExpandDescriptor>;
editField: PropType<string>;
rowClass: PropType<Function>;
scrollable: {
type: PropType<string>;
default: string;
};
size: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
pager: PropType<string | boolean | Object | Function>;
rowHeight: PropType<number>;
detailRowHeight: PropType<number>;
detail: PropType<any>;
columnMenu: PropType<any>;
columnMenuAnimate: {
type: PropType<boolean | PopupAnimation>;
default: () => boolean;
};
columnMenuIcon: DefineComponent<ExtractPropTypes< {
name: StringConstructor;
icon: ObjectConstructor;
themeColor: {
type: StringConstructor;
};
size: {
type: StringConstructor;
};
flip: {
type: StringConstructor;
};
id: StringConstructor;
ariaLabel: StringConstructor;
title: StringConstructor;
viewBox: {
type: StringConstructor;
default: string;
};
tabIndex: NumberConstructor;
svgClassName: StringConstructor;
svgStyle: ObjectConstructor;
}>, {}, {}, {
wrapperClass(this: SvgIconAll): {
[x: string]: any;
[x: number]: any;
'k-icon': boolean;
'k-svg-icon': boolean;
'k-flip-h': boolean;
'k-flip-v': boolean;
};
}, {
handleClick(e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
click: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
name: StringConstructor;
icon: ObjectConstructor;
themeColor: {
type: StringConstructor;
};
size: {
type: StringConstructor;
};
flip: {
type: StringConstructor;
};
id: StringConstructor;
ariaLabel: StringConstructor;
title: StringConstructor;
viewBox: {
type: StringConstructor;
default: string;
};
tabIndex: NumberConstructor;
svgClassName: StringConstructor;
svgStyle: ObjectConstructor;
}>> & Readonly<{
onClick?: (...args: any[] | unknown[]) => any;
}>, {
viewBox: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
dataItemKey: StringConstructor;
navigatable: {
type: PropType<boolean>;
default: boolean;
};
onItemchange: PropType<(event: GridItemChangeEvent_2) => void>;
onExpandchange: PropType<(event: GridExpandChangeEvent_2) => void>;
onDatastatechange: PropType<(event: GridDataStateChangeEvent_2) => void>;
onPagechange: PropType<(event: GridPageChangeEvent_2) => void>;
onSortchange: PropType<(event: GridSortChangeEvent_2) => void>;
onFilterchange: PropType<(event: GridFilterChangeEvent_2) => void>;
onGroupchange: PropType<(event: GridGroupChangeEvent_2) => void>;
onSearchchange: PropType<(event: GridSearchChangeEvent_2) => void>;
onGroupexpandchange: PropType<(event: GridGroupExpandChangeEvent_2) => void>;
onDetailexpandchange: PropType<(event: GridDetailExpandChangeEvent_2) => void>;
}>> & Readonly<{}>, {
size: string;
scrollable: string;
navigatable: boolean;
columnMenuAnimate: boolean;
topCacheCount: number;
collapsedGroups: any[][];
columnsState: GridColumnState_2[];
defaultColumnsState: GridColumnState_2[];
showLoader: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the object of the `cancel` event.
*/
export declare interface GridCancelEvent {
/**
* The item from the `data` property of the Grid that corresponds to the item that is canceled by the user.
*/
dataItem: any;
}
/**
* @hidden
*/
export declare const GridCell: DefineComponent<ExtractPropTypes< {
id: PropType<string>;
field: PropType<string>;
dataItem: PropType<any>;
format: PropType<string>;
readFormat: PropType<string>;
className: PropType<string>;
colSpan: PropType<number>;
columnIndex: PropType<number>;
columnsCount: PropType<number>;
dataIndex: PropType<number>;
rowType: PropType<string>;
level: PropType<number>;
expanded: PropType<boolean>;
type: PropType<string>;
editor: PropType<string>;
rowSpan: PropType<{
count: number;
value: any;
}>;
isSelected: PropType<boolean>;
isHighlighted: PropType<boolean>;
ariaColumnIndex: PropType<number>;
render: PropType<any>;
isRtl: PropType<boolean>;
onEdit: PropType<(event: {
dataItem: any;
}) => void>;
onSave: PropType<(event: {
dataItem: any;
}) => void>;
onRemove: PropType<(event: {
dataItem: any;
}) => void>;
onCancel: PropType<(event: {
dataItem: any;
}) => void>;
onChange: PropType<(event: {
dataItem: any;
event: any;
field?: string;
value?: any;
}) => void>;
onSelectionchange: PropType<(event: any, dataItem: any) => void>;
}>, {
kendoIntlService: {};
}, {}, {
tdClass(): {
[x: number]: any;
'k-table-td': boolean;
'k-highlighted': any;
};
}, {
triggerClick(): void;
triggerKeydown(e: any): void;
triggerEdit(dataItem: any): void;
triggerAdd(dataItem: any): void;
triggerCancel(dataItem: any): void;
triggerSave(dataItem: any): void;
triggerRemove(dataItem: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
cellclick: any;
cellkeydown: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
id: PropType<string>;
field: PropType<string>;
dataItem: PropType<any>;
format: PropType<string>;
readFormat: PropType<string>;
className: PropType<string>;
colSpan: PropType<number>;
columnIndex: PropType<number>;
columnsCount: PropType<number>;
dataIndex: PropType<number>;
rowType: PropType<string>;
level: PropType<number>;
expanded: PropType<boolean>;
type: PropType<string>;
editor: PropType<string>;
rowSpan: PropType<{
count: number;
value: any;
}>;
isSelected: PropType<boolean>;
isHighlighted: PropType<boolean>;
ariaColumnIndex: PropType<number>;
render: PropType<any>;
isRtl: PropType<boolean>;
onEdit: PropType<(event: {
dataItem: any;
}) => void>;
onSave: PropType<(event: {
dataItem: any;
}) => void>;
onRemove: PropType<(event: {
dataItem: any;
}) => void>;
onCancel: PropType<(event: {
dataItem: any;
}) => void>;
onChange: PropType<(event: {
dataItem: any;
event: any;
field?: string;
value?: any;
}) => void>;
onSelectionchange: PropType<(event: any, dataItem: any) => void>;
}>> & Readonly<{
onCellkeydown?: (...args: any[] | unknown[]) => any;
onCellclick?: (...args: any[] | unknown[]) => any;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface GridCellProps {
/**
* @hidden
*/
id: string;
/**
* The field to which the cell is bound ([see example]({% slug sorting_grid %})).
*/
key?: number;
/**
* The field to which the cell is bound ([see example]({% slug sorting_grid %})).
*/
field: string;
/**
* The data object that represents the current row.
*/
dataItem: any;
/**
*
*/
dataIndex?: number;
/**
* The format that is applied to the value before the value is displayed. Takes the `{0:format}`
* form where `format` is any of the following:
* * A standard number format
* * A custom number format
* * A standard date format
* * A custom date format
*
* For more information on the supported date and number formats,
* refer to the [kendo-intl](https://github.com/telerik/kendo-intl/blob/develop/docs/index.md) documentation.
*/
format?: string;
/**
* The data Item read format.
*/
readFormat?: string;
/**
* The custom CSS classes of the cells.
*/
className?: string;
/**
* The index to be applied to the `aria-colindex` attribute.
*/
ariaColumnIndex: number;
/**
* The index of all rendered columns.
*/
columnIndex?: number;
/**
* The number of rendered columns in the Grid.
*/
columnsCount?: number;
/**
* The type of the row.
*/
rowType?: string;
/**
* @hidden
*/
level?: number;
/**
* The expanded value of the cell when hierarchy or grouping are used.
*/
expanded?: boolean;
/**
* The event that is fired when the cell is selected.
*/
selectionchange?: (event: any, dataItem: any) => void;
/**
* @hidden
*/
style?: any;
/**
* The column span of the cell.
*/
colSpan?: number;
/**
* Indicates if the cell is selected.
*/
isSelected: boolean;
/**
* Indicates if the cell is highlighted.
*/
isHighlighted: boolean;
/**
* Indicates if the cell is in rtl direction.
*/
isRtl: boolean;
/**
* The event that is fired when the cell value is changed.
*/
onChange?: (event: {
dataItem: any;
event: any;
field?: string;
value?: any;
}) => void;
/**
* The event that is fired when the keydown event of the cell is triggered.
*/
onCellkeydown?: (event: {
event: any;
dataItem: any;
field: string;
}) => void;
/**
* The event that is fired when the cell is clicked.
*/
onCellclick?: (event: {
dataItem: any;
field: string;
}) => void;
/**
* The event that is fired when the cell is about to be added.
*/
onAdd?: (event: {
dataItem: any;
}) => void;
/**
* The event that is fired when the cell is about to be edited.
*/
onEdit?: (event: {
dataItem: any;
}) => void;
/**
* The event that is fired when the cell is about to be saved.
*/
save?: (event: {
dataItem: any;
}) => void;
/**
* The event that is fired when the cell is about to be removed.
*/
remove?: (event: {
dataItem: any;
}) => void;
/**
* The event that is fired when the cell is about to be canceled.
*/
onCancel?: (event: {
dataItem: any;
}) => void;
/**
* The type of the data which will be used when formatting the cell data.
* Could be one of the following values 'text' | 'numeric' | 'boolean' | 'date'.
*/
type?: string;
/**
* The type of the editor which will be used when the cell is in edit mode.
* Could be one of the following values 'text' | 'numeric' | 'boolean' | 'date'.
*/
editor?: string;
/**
* The method for rendering the cell.
*/
render?: any;
/** @hidden */
group?: GroupState;
/** @hidden */
rowSpan?: {
count: number | null;
value: any;
};
}
/**
* Represents the properties of the callback used when spanning a column.
*/
export declare type GridColSpanProps = {
/**
* Represents the properties of the spanned column.
*/
column: GridColumnProps;
/**
* Represents the current row data item.
*/
dataItem: any;
};
/**
* @hidden
*/
export declare const GridColumnMenuCheckboxFilter: {
name: string;
props: {
column: PropType<GridColumnMenuColumnProps>;
filter: PropType<CompositeFilterDescriptor>;
filterable: PropType<boolean>;
filterOperators: PropType<GridFilterOperators_3>;
checkAllItem: PropType<string | boolean | object | Function>;
item: PropType<string | boolean | object | Function>;
expanded: {
type: PropType<boolean>;
default: any;
};
dataItems: PropType<(string | object)[]>;
searchBox: {
type: PropType<any>;
default: boolean;
};
uniqueData: {
type: PropType<boolean>;
default: boolean;
};
};
data(): {
currentExpanded: boolean;
currentValue: string;
currentData: any;
dataFromProps: any;
currentFilter: any;
};
created(): void;
updated(): void;
inject: {
kendoLocalizationService: {
default: any;
};
};
setup(): {
kendoLocalizationService: {};
};
render(): JSX.Element;
methods: {
defaultFilter(): any;
parseData(originalData: any, isUnique: any): any;
getFilterIndex(): any;
onFilterExpand(): void;
handleSearchChange(e: any): void;
clear(e: any): void;
submit(e: any): void;
handleCheckBoxChange(e: any, value: any): void;
isAllSelected(): boolean;
};
};
/**
* The props of the GridColumnMenuFilter component.
*/
export declare interface GridColumnMenuCheckboxFilterProps extends GridColumnMenuFilterBaseProps {
/**
* Controls the expand state of the filter component.
*/
expanded?: boolean;
/**
* Sets the items collection that will be rendered by the GridColumnMenuCheckboxFilter component.
*/
dataItems: Array<string | object>;
/**
* Triggered on each subsequent expand state of the filter component.
*/
expandchange?: (nextExpandState: boolean) => void;
/**
* Defines the component that will be rendered as a search box.
*/
searchBox?: any;
/**
* Determines if the data in the component will be unique. By default the property is set to true.
*/
uniqueData?: boolean;
}
/**
* The column props passed by the ColumnMenu.
*/
declare interface GridColumnMenuColumnProps_2 {
/**
* The field to which the column is bound.
*/
field?: string;
/**
* Defines the filter type that is displayed inside the filter row. Defaults to `text`.
*/
filter?: 'text' | 'numeric' | 'boolean' | 'date';
}
/**
* Represents the GridColumnMenuFilter component.
*
* @hidden
*/
export declare const GridColumnMenuFilter: DefineComponent<ExtractPropTypes< {
column: PropType<GridColumnMenuColumnProps>;
filter: PropType<CompositeFilterDescriptor>;
expanded: {
type: PropType<boolean>;
default: any;
};
filterable: PropType<boolean>;
filterOperators: {
type: PropType<GridFilterOperators_3>;
default: () => GridFilterOperators_3;
};
hideSecondFilter: {
type: PropType<boolean>;
default: () => any;
};
filterUI: PropType<any>;
onFilterfocus: PropType<(e: any) => void>;
onFilterchange: PropType<(filter: CompositeFilterDescriptor, syntheticEvent: any) => any>;
onExpandchange: PropType<(nextExpandState: boolean) => void>;
onClosemenu: PropType<Function>;
}>, {
kendoLocalizationService: {};
}, {
currentExpanded: boolean;
filterGroup: any;
}, {}, {
removeGroup(group: CompositeFilterDescriptor, rootFilter: CompositeFilterDescriptor): CompositeFilterDescriptor;
insertGroup(group: CompositeFilterDescriptor, rootFilter: CompositeFilterDescriptor): CompositeFilterDescriptor;
isControlled(): boolean;
onFilterExpand(): void;
filterChangeHandler(e: any, filterIndex?: number): void;
firstFilterChange(e: any): void;
secondFilterChange(e: any): void;
filterChange(filterIndex: number, e: {
value: number;
operator: string;
}): void;
logicChange(e: any): void;
clear(e: any): void;
currentFilterGroup(): CompositeFilterDescriptor;
submit(e: any): void;
handleFocus(e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
column: PropType<GridColumnMenuColumnProps>;
filter: PropType<CompositeFilterDescriptor>;
expanded: {
type: PropType<boolean>;
default: any;
};
filterable: PropType<boolean>;
filterOperators: {
type: PropType<GridFilterOperators_3>;
default: () => GridFilterOperators_3;
};
hideSecondFilter: {
type: PropType<boolean>;
default: () => any;
};
filterUI: PropType<any>;
onFilterfocus: PropType<(e: any) => void>;
onFilterchange: PropType<(filter: CompositeFilterDescriptor, syntheticEvent: any) => any>;
onExpandchange: PropType<(nextExpandState: boolean) => void>;
onClosemenu: PropType<Function>;
}>> & Readonly<{}>, {
expanded: boolean;
filterOperators: GridFilterOperators_3;
hideSecondFilter: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The props passed to the ColumnMenu filter component.
*/
declare interface GridColumnMenuFilterBaseProps {
/**
* Controls the ColumnMenu animation. By default, the opening and closing animations are enabled.
*/
animate?: boolean | PopupAnimation;
/**
* The current column options.
*/
column: GridColumnMenuColumnProps_2;
/**
* The method that will be called to close the column menu.
*/
onClosemenu?: Function;
/**
* The current filter state of the Grid.
*/
filter?: CompositeFilterDescriptor;
/**
* The filterable option of the column.
*/
filterable?: boolean | undefined;
/**
* The filter operators for the Grid filters.
*/
filterOperators: GridFilterOperators;
/**
* The template that can customize the check all checkbox item.
*/
checkAllItem?: string | object | Function | boolean;
/**
* The template that can customize the checkbox item.
*/
item?: string | object | Function | boolean;
/**
* The trigger focus event.
*/
onFocus?: (e: any) => void;
/**
* The method that will be called to notify the parent Grid about a filter change.
*/
onFilterchange?: (filter: CompositeFilterDescriptor | null, syntheticEvent: any) => any;
}
/**
* @hidden
*/
export declare const GridColumnMenuFilterCell: DefineComponent<ExtractPropTypes< {
field: PropType<string>;
filterType: PropType<string>;
value: PropType<any>;
operator: PropType<string>;
operators: PropType<{
text: string;
operator: any;
}[]>;
booleanValues: PropType<GridFilterOperator[]>;
}>, {}, {}, {}, {
handleFocus(e: any): void;
triggerChange(filter: any): void;
inputChange(value: any, e: any): void;
boolDropdownChange(value: any, e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
change: any;
filtercellfocus: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
field: PropType<string>;
filterType: PropType<string>;
value: PropType<any>;
operator: PropType<string>;
operators: PropType<{
text: string;
operator: any;
}[]>;
booleanValues: PropType<GridFilterOperator[]>;
}>> & Readonly<{
onChange?: (...args: any[] | unknown[]) => any;
onFiltercellfocus?: (...args: any[] | unknown[]) => any;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const GridColumnMenuFilterUI: DefineComponent<ExtractPropTypes< {
firstFilterProps: PropType<GridFilterCellProps_2>;
secondFilterProps: PropType<GridFilterCellProps_2>;
logicValue: PropType<{
text: string;
operator: any;
}>;
logicData: PropType<{
text: string;
operator: any;
}[]>;
hideSecondFilter: PropType<boolean>;
operators: PropType<{
text: string;
operator: any;
}[]>;
render: PropType<any>;
}>, {}, {}, {}, {
handleFocus(e: any): void;
changeHandler(e: any, filterIndex: number): void;
logicChange(e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
change: any;
filteruifocus: any;
logicChange: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
firstFilterProps: PropType<GridFilterCellProps_2>;
secondFilterProps: PropType<GridFilterCellProps_2>;
logicValue: PropType<{
text: string;
operator: any;
}>;
logicData: PropType<{
text: string;
operator: any;
}[]>;
hideSecondFilter: PropType<boolean>;
operators: PropType<{
text: string;
operator: any;
}[]>;
render: PropType<any>;
}>> & Readonly<{
onChange?: (...args: any[] | unknown[]) => any;
onLogicChange?: (...args: any[] | unknown[]) => any;
onFilteruifocus?: (...args: any[] | unknown[]) => any;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const GridColumnMenuItem: DefineComponent<ExtractPropTypes< {
title: PropType<string>;
iconClass: PropType<string>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon_2>;
selected: PropType<boolean>;
onMenuitemclick: PropType<Function>;
}>, {}, {}, {}, {
onClick(e: any): void;
onKeyDown(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
title: PropType<string>;
iconClass: PropType<string>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon_2>;
selected: PropType<boolean>;
onMenuitemclick: PropType<Function>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const GridColumnMenuItemContent: DefineComponent<ExtractPropTypes< {
show: PropType<boolean>;
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
show: PropType<boolean>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const GridColumnMenuItemGroup: DefineComponent< {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The props which the ColumnMenu passes to its children.
*/
export declare interface GridColumnMenuProps extends GridColumnMenuFilterBaseProps, GridColumnMenuSortBaseProps {
/**
* The key of the column menu.
*/
key?: any;
/**
* The method for rendering the column menu.
*/
render?: any;
/**
* The opened column menu.
*/
opened?: boolean;
/**
* The icon that overrides the default(three vertical dots) icon displayed in the column menu of each column.
*/
columnMenuIcon?: SVGIcon;
/**
* The event that is fired when the column menu is focused.
*/
onContentfocus?: (event: any) => void;
/**
* The event that is fired when the column menu is expanded or collapsed.
*/
onExpandchange?: (event: any) => void;
/**
* The event that is fired when the column menu is closed.
*/
onClose?: (event: any) => void;
/**
* The event that is fired when the column menu is about to be sorted.
*/
onSortchange?: (event: any, sort: SortDescriptor[]) => void;
}
/**
* @hidden
*/
export declare const GridColumnMenuSort: DefineComponent<ExtractPropTypes< {
sortable: PropType<GridSortSettings_4>;
sort: {
type: PropType<SortDescriptor[]>;
};
column: PropType<GridColumnMenuColumnProps>;
onSortchange: PropType<(descriptors: SortDescriptor[], e: any) => void>;
onClosemenu: PropType<Function>;
}>, {
kendoLocalizationService: {};
}, {}, {}, {
onAscClick(e: any): void;
onDescClick(e: any): void;
onSort(e: any, selectedDir: 'asc' | 'desc'): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
sortable: PropType<GridSortSettings_4>;
sort: {
type: PropType<SortDescriptor[]>;
};
column: PropType<GridColumnMenuColumnProps>;
onSortchange: PropType<(descriptors: SortDescriptor[], e: any) => void>;
onClosemenu: PropType<Function>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The props passed to the ColumnMenu sort component.
*/
declare interface GridColumnMenuSortBaseProps {
/**
* The current column options.
*/
column: GridColumnMenuColumnProps_2;
/**
* The method that will be called to close the column menu.
*/
onClosemenu?: Function;
/**
* The sortable option of the column.
*/
sortable?: GridSortSettings;
/**
* The current sort state of the Grid.
*/
sort?: SortDescriptor[];
/**
* The method that will be called to notify the parent Grid about a sort change.
*/
onSortchange?: (descriptors: SortDescriptor[], e: any) => void;
}
/**
* The props that can be assigned to the Grid column.
*/
export declare interface GridColumnProps extends Omit<ColumnBaseProps, 'cell'> {
/**
* The field to which the column is bound.
*/
field?: string;
/**
* The title of the column.
*/
title?: string;
/**
* Defines whether the column is editable
* ([more information and examples]({% slug editing_inline_grid %})).
*/
editable?: boolean;
/**
* Allows the column headers to be clicked and the `sortChange` event emitted.
* You have to handle the `sortChange` event yourself and sort the data.
*
* @default true
*/
sortable?: GridColumnSortSettings;
/**
* Defines the custom rendering of the cell. Accepts a Vue component, a `render` function, or a slot name.
* If not set, a `GridCell` will be rendered by default.
*/
cell?: ((h: any, defaultRendering: any | null, props: GridCellProps, listeners: any) => any) | string | any;
/**
* @hidden
*/
internalCell?: any;
/**
* @hidden
*/
internalHeaderCell?: any;
/**
* Defines the custom rendering of the filter cell. Accepts a Vue component, a `render` function, or a slot name.
* If not set, a `GridFilterCell` will be rendered by default.
*/
filterCell?: ((h: any, defaultRendering: any | null, props: GridFilterCellProps, listeners: any) => any) | string | any;
/**
* Defines if a filter UI will be rendered for this column.
*
* @default true
*/
filterable?: boolean;
/**
* Defines the title which will be set to the input element in the filter cell.
*
*/
filterTitle?: string;
/**
* Defines the filter type that will be rendered inside the filter row.
*
* @default 'text'
*/
filter?: GridDataType;
/**
* Defines the editor type. Used when the column enters the edit mode ([more information and examples]({% slug editing_inline_grid %})).
*
* @default 'text'
*/
editor?: GridDataType;
/**
* Overrides the default(three vertical dots) column menu icon or the icon set through the ([`columnMenuIcon`]({% slug api_grid_gridprops %}#toc-columnmenuicon)) property.
*/
menuIcon?: SVGIcon;
/**
* The width of the column (in pixels).
*/
width?: string | number;
/**
* The width of the column (in pixels) below which the user is not able to resize the column through the UI.
* Defaults to `10`. It is responsible only for the minimal width that is observed after the manual drag and it is
* not responsible for the width of the columns when the browser is resized
*/
minResizableWidth?: number;
/**
* Defines the custom rendering of the header cell. Accepts a Vue component, a `render` function, or a slot name.
* If not set, a `GridHeaderCell` will be rendered by default.
*/
headerCell?: ((h: any, defaultRendering: any | null, props: GridHeaderCellProps, listeners: any) => any) | string | any;
/**
* Defines the custom rendering of the footer cell.
* The footer cell have to render an `HTMLTableCellElement` (TD element) and
* apply its `style` and `colspan` values from the footer component `props`.
* Accepts a Vue component, a `render` function, or a slot name.
*/
footerCell?: ((h: any, defaultRendering: any | null, props: GridFooterCellProps, listeners: any) => any) | string | any;
/**
* Sets the custom CSS classes to the column footer cell if there is footer.
*/
footerClassName?: string;
/**
* Defines if the header selection checkbox is checked.
*/
headerSelectionValue?: boolean;
/**
* The format that is applied to the value before it is displayed. Takes the `{0:format}`
* form where `format` is any of the following:
* * A standard number format
* * A custom number format
* * A standard date format
* * A custom date format
*
* For more information on the supported date and number formats,
* refer to the [kendo-intl](https://github.com/telerik/kendo-intl/blob/develop/docs/index.md) documentation.
*/
format?: string;
/**
* 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.
*
* @default 1
*/
colSpan?: number | ((colSpanProps: GridColSpanProps) => number);
/**
* Controls the visibility of the Grid's column.
*
* @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.
*
*/
media?: string;
/**
* Sets the custom CSS classes to the column header cell.
*/
headerClassName?: string;
/**
* Sets the custom CSS classes to the column cells.
*/
className?: string;
/**
* Indicates whether the column is reorderable.
*/
reorderable?: boolean;
/**
* Indicates whether the column is resizable.
*/
resizable?: boolean;
/**
* Determinates the position of the column. Columns with smaller `orderIndex` will appear
* before columns with bigger `orderIndex`. Defaults to `0`.
*/
orderIndex?: number;
/**
* Determines if the column can be dragged to the group panel. Defaults to `true`.
*/
groupable?: boolean;
/**
* A collection of child columns.
*/
children?: (GridColumnProps)[] | (any)[];
/**
* Defines if the column menu will be shown for the column.
* Accepts Boolean, a Vue component, a `render` function, or a slot name
*/
columnMenu?: boolean | any;
/**
* Defines if the column menu is opened.
*/
columnMenuOpened?: boolean;
/**
*
*/
locked?: boolean;
/**
* The type of the data which will be used when formatting the cell data.
* Could be one of the following values 'string' | 'number' | 'boolean' | 'date'.
* Defaults to `string`.
*/
type?: 'string' | 'number' | 'boolean' | 'date';
/**
* Sets the type of the column and renders a dedicated column for interaction.
*
* @default "data"
*/
columnType?: GridColumnType;
/**
* Defines if the cells of the column should be spanned when their values are the same.
*
*/
rowSpannable?: boolean | GridRowSpannableSettings;
}
/**
* Represents the object of the `onColumnReorder` event.
*/
export declare interface GridColumnReorderEvent {
/**
* An event target.
*/
target: GridHandle;
/**
* A native DOM event.
*/
event: any;
/**
* A previous column index.
*/
prev: number;
/**
* A next column index.
*/
next: number;
/**
* The current column collection.
*/
columns: GridColumnProps[];
}
/**
* Represents the object of the `onColumnResize` event.
*/
export declare interface GridColumnResizeEvent {
/**
* An event target.
*/
target: any;
/**
* A native DOM event.
*/
event: any;
/**
* The current column collection.
*/
columns: GridColumnProps[];
/**
* The index of the column.
*/
index: number;
/**
* The new width of the column.
*/
newWidth: number;
/**
* 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 settings for sorting the Grid columns.
*/
declare type GridColumnSortSettings = boolean | {
/**
* Enables the removal of the column sorting functionality.
*/
allowUnsort?: boolean;
};
/**
* Represents the object of the `onColumnsStateChange` Grid event.
*/
export declare interface GridColumnsStateChangeEvent {
/**
* An event target.
*/
target: GridHandle;
/**
* The columns state collection.
*/
columnsState: GridColumnState[];
}
/**
* The state of the GridColumn
*/
export declare 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;