@progress/kendo-vue-grid
Version:
1,681 lines (1,638 loc) • 87 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
import { DataResult } from '@progress/kendo-data-query';
import { DefineComponent } from 'vue';
import { ExtractPropTypes } from 'vue';
import { GridCellProps as GridCellProps_2 } from '.';
import { GridColumnMenuColumnProps } from '../interfaces/GridColumnMenuColumnProps';
import { GridDataStateChangeEvent as GridDataStateChangeEvent_2 } from './interfaces/events';
import { GridFilterCellProps as GridFilterCellProps_2 } from '..';
import { GridFilterChangeEvent as GridFilterChangeEvent_2 } from './interfaces/events';
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 './interfaces/events';
import { GridPageChangeEvent as GridPageChangeEvent_2 } from './interfaces/events';
import { GridPagerSettings } from '@progress/kendo-vue-data-tools';
import { GridSortChangeEvent as GridSortChangeEvent_2 } from './interfaces/events';
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 { IntlService } from '@progress/kendo-vue-intl';
import { JSX } from 'vue/jsx-runtime';
import { Page } from '@progress/kendo-vue-data-tools';
import { PopupAnimation } from '@progress/kendo-vue-popup';
import { PropType } from 'vue';
import { PublicProps } from 'vue';
import { Ref } from 'vue';
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';
/**
* @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, expandField: string | undefined, idInfo: {
prevId: number;
idPrefix: string;
}): ExtendedColumnProps[];
/**
* @hidden
*/
export declare function checkPropCompatibility(props: GridProps): void;
/**
* @hidden
*/
export declare interface DataItemWrapper {
dataItem: any;
rowType: GridRowType;
level: number;
expanded: boolean;
dataIndex: number;
}
/**
* @hidden
*/
declare interface ExtendedColumnProps extends GridColumnProps {
id: string;
declarationIndex: number;
parentIndex: number;
colSpan: number;
rowSpan: number;
depth: number;
kFirst?: boolean;
index: number;
children: ExtendedColumnProps[];
left: number;
right: number;
rightBorder: boolean;
ariaColumnIndex: number;
isAccessible: boolean;
}
/**
* 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, field?: string, level?: number): 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;
};
divStyle(): {
padding: string;
};
tableStyl(): {
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;
} | {
left?: undefined;
right?: undefined;
};
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
isRtl: PropType<boolean>;
columns: PropType<ExtendedColumnProps[]>;
rowIndex: PropType<number>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @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 Grid: DefineComponent<ExtractPropTypes< {
topCacheCount: {
type: PropType<number>;
default: number;
};
collapsedGroups: {
type: PropType<any[][]>;
default: () => any[];
};
uniqueField: PropType<string>;
totalGroupedHeight: PropType<number>;
allGroupedItems: PropType<DataResult>;
alternatePerGroup: PropType<boolean>;
columns: PropType<GridColumnProps[]>;
columnVirtualization: PropType<boolean>;
dataItems: PropType<any[] | DataResult>;
sortable: PropType<GridSortSettings_2>;
sort: PropType<SortDescriptor[]>;
filterable: PropType<boolean>;
filterOperators: PropType<GridFilterOperators_2>;
filterCellRender: PropType<any>;
headerCellRender: PropType<any>;
loader: PropType<string | boolean | Object | Function>;
filter: PropType<CompositeFilterDescriptor>;
pageable: PropType<any>;
pageSize: PropType<number>;
total: PropType<number>;
skip: PropType<number>;
take: 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)>;
resizable: PropType<boolean>;
reorderable: PropType<boolean>;
group: PropType<GroupDescriptor[]>;
groupable: PropType<boolean | GridGroupableSettings_2>;
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: () => true;
};
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) => void>;
onExpandchange: PropType<(event: GridExpandChangeEvent) => 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>;
}>, {
groupPanelDivRef: Ref<any, any>;
dropElementClueRef: Ref<any, any>;
dragElementClueRef: Ref<any, any>;
headerRef: Ref<any, any>;
footerRef: Ref<any, any>;
gridNavRef: Ref<any, any>;
colGroupRef: Ref<any, any>;
scrollContainerRef: Ref<any, any>;
scrollTableRef: Ref<any, any>;
scrollTableBodyRef: Ref<any, any>;
}, {
isRtl: boolean;
context: any;
navigation: any;
showLicenseWatermark: boolean;
notHiddenColumns: any[];
}, {
nonscrollableWrapperClass(): {
[x: string]: any;
'k-grid': boolean;
'k-grid-md': boolean;
};
scrollableWrapperClass(): any;
gridTableClass(): {
[x: string]: any;
'k-table': boolean;
'k-grid-table': boolean;
'k-grid-md': boolean;
};
getCorrectHeight(): any;
currentGroupable(): any;
computedCollapsed(): any[];
getAriaRowCount(): any;
getAriaColCount(): any;
}, {
getColumnsEssentialProps(columns: any[]): string;
calculateMedia(): void;
filterHiddenColumns(columns: GridColumnProps[]): GridColumnProps[];
/**
* A getter of the current columns. Gets the current column width or current columns,
* or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column.
* Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the `ref`
* callback. The following example demonstrates how to reorder the columns by dragging their handlers
* and check the properties afterwards. You can check the result in the browser console.
*/
getColumns(): GridColumnProps[];
setRefs(): void;
gridUnmounted(): void;
resetVirtual(): void;
getVirtualScroll(): typeof VirtualScroll;
isAllData(): boolean;
initializeVirtualization(total: number): void;
onSkipChanged(value: number, _oldValue: number): void;
onTotalChanged(_value: number, _oldValue: number): void;
onRowHeightChanged(_value: number, _oldValue: number): void;
scrollHandler(event: any): void;
rowClick(e: any, item: any): void;
rowDoubleClick(e: any, item: any): void;
loopGroupedItems(dataItems: any, func: any, level?: number, item?: any): any;
updateGroupCollapsed(event: {
dataItem: any;
event: any;
level: number;
field?: string;
value?: any;
}): any;
itemChange(event: {
dataItem: any;
event: any;
field?: string;
value?: any;
}): void;
cellClickHandler(event: any): void;
cellKeydownHandler(event: any): void;
editHandler(dataItem: any): void;
removeHandler(dataItem: any): void;
saveHandler(dataItem: any): void;
cancelHandler(dataItem: any): void;
selectionChangeHandler(options: {
event: {
event: any;
};
dataItem: any;
dataIndex: number;
columnIndex: number;
}): void;
onHeaderSelectionChangeHandler(event: any): void;
pageChangeHandler(page: Page, event: any): void;
sortChangeHandler(sort: SortDescriptor[], event: any): void;
filterChangeHandler(filter: CompositeFilterDescriptor, event: any): void;
groupChangeHandler(groups: GroupDescriptor[], event: any): void;
raiseDataEvent(handler: string, data: {}, moreData: State, event: any): void;
columnReorder(prev: number, next: number, event: any): void;
groupReorder(prevIndex: number, nextIndex: number, event: any): void;
columnToGroup(columnIndex: number, groupIndex: number, event: any): void;
resetTableWidth(): void;
onResize(index: number, newWidth: number, oldWidth: number, event: any, end: boolean): void;
initColumns(columnElements: GridColumnProps[] | null | undefined, groupCount: number): void;
resolveTitle(field: string): string;
findColumnByField(field: string): any;
searchColumn(column: any, field: String): any;
getDataState(): {
filter: any;
sort: any;
skip: any;
take: any;
group: any;
};
getArguments(event: any): {
event: any;
target: any;
};
getLeafDataItems(): any;
totalGroupedRows(gridData: Array<any>): number;
addSubItems(gridData: Array<any>, allRowsCount: number): number;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
topCacheCount: {
type: PropType<number>;
default: number;
};
collapsedGroups: {
type: PropType<any[][]>;
default: () => any[];
};
uniqueField: PropType<string>;
totalGroupedHeight: PropType<number>;
allGroupedItems: PropType<DataResult>;
alternatePerGroup: PropType<boolean>;
columns: PropType<GridColumnProps[]>;
columnVirtualization: PropType<boolean>;
dataItems: PropType<any[] | DataResult>;
sortable: PropType<GridSortSettings_2>;
sort: PropType<SortDescriptor[]>;
filterable: PropType<boolean>;
filterOperators: PropType<GridFilterOperators_2>;
filterCellRender: PropType<any>;
headerCellRender: PropType<any>;
loader: PropType<string | boolean | Object | Function>;
filter: PropType<CompositeFilterDescriptor>;
pageable: PropType<any>;
pageSize: PropType<number>;
total: PropType<number>;
skip: PropType<number>;
take: 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)>;
resizable: PropType<boolean>;
reorderable: PropType<boolean>;
group: PropType<GroupDescriptor[]>;
groupable: PropType<boolean | GridGroupableSettings_2>;
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: () => true;
};
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) => void>;
onExpandchange: PropType<(event: GridExpandChangeEvent) => 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>;
}>> & Readonly<{}>, {
size: string;
scrollable: string;
navigatable: boolean;
columnMenuAnimate: true;
collapsedGroups: any[][];
topCacheCount: number;
}, {}, {}, {}, 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>;
isSelected: 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;
};
}, {
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>;
isSelected: 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>;
/**
* The props of the GridCell component.
*/
/**
* @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 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
*/
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 {
/**
* 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.
*/
sortable?: boolean;
/**
* 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 displayed for this column. Defaults to `true`.
*/
filterable?: boolean;
/**
* Defines the filter type that is displayed inside the filter row.
* Defaults to `text`.
*/
filter?: 'text' | 'numeric' | 'boolean' | 'date';
/**
* Defines the editor type. Used when the column enters the edit mode
* ([more information and examples]({% slug editing_inline_grid %})).
* Defaults to `text`.
*/
editor?: 'text' | 'numeric' | 'boolean' | 'date';
/**
* 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;
/**
* Controls the visibility of Grid's column. Defaults to `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';
}
/**
* Represents the object of the `onColumnReorder` event.
*/
export declare interface GridColumnReorderEvent {
/**
* An event target.
*/
target: any;
/**
* 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;
};
/**
* The returned type of the `onDataStateChange` event.
*/
export declare interface GridDataStateChangeEvent extends GridEvent {
/**
* The state of the Grid based on the user action.
*/
data: State;
}
/**
* @hidden
*/
export declare const GridDetailRow: DefineComponent< {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface GridDetailRowProps {
/**
* The data object that represents the current row.
*/
dataItem: any;
}
/**
* @hidden
*/
export declare const GridEditCell: DefineComponent<ExtractPropTypes< {
id: PropType<string>;
field: PropType<string>;
dataItem: PropType<any>;
format: PropType<string>;
type: PropType<string>;
className: PropType<string>;
colSpan: PropType<number>;
columnIndex: PropType<number>;
columnsCount: PropType<number>;
rowType: PropType<string>;
level: PropType<number>;
expanded: PropType<boolean>;
editor: PropType<string>;
isSelected: PropType<boolean>;
ariaColumnIndex: PropType<number>;
render: PropType<any>;
isRtl: PropType<boolean>;
readFormat: PropType<string>;
dataIndex: PropType<number>;
}>, {
kendoIntlService: {};
}, {
inputId: any;
}, {
tdClass(): {
[x: number]: any;
'k-table-td': boolean;
};
}, {
triggerKeydown(e: any): void;
triggerEdit(dataItem: any): void;
triggerAdd(dataItem: any): void;
triggerCancel(dataItem: any): void;
triggerSave(dataItem: any): void;
triggerRemove(dataItem: any): void;
changeHandler(event: any, value: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
change: any;
cellkeydown: any;
edit: any;
add: any;
cancel: any;
save: any;
remove: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
id: PropType<string>;
field: PropType<string>;
dataItem: PropType<any>;
format: PropType<string>;
type: PropType<string>;
className: PropType<string>;
colSpan: PropType<number>;
columnIndex: PropType<number>;
columnsCount: PropType<number>;
rowType: PropType<string>;
level: PropType<number>;
expanded: PropType<boolean>;
editor: PropType<string>;
isSelected: PropType<boolean>;
ariaColumnIndex: PropType<number>;
render: PropType<any>;
isRtl: PropType<boolean>;
readFormat: PropType<string>;
dataIndex: PropType<number>;
}>> & Readonly<{
onCancel?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onAdd?: (...args: any[] | unknown[]) => any;
onRemove?: (...args: any[] | unknown[]) => any;
onCellkeydown?: (...args: any[] | unknown[]) => any;
onEdit?: (...args: any[] | unknown[]) => any;
onSave?: (...args: any[] | unknown[]) => any;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the object of the `edit` event.
*/
export declare interface GridEditEvent {
/**
* The item from the `data` property of the Grid that corresponds to the item that is edited by the user.
*/
dataItem: any;
}
/**
* Represents the base event object of the Grid.
*/
/**
* @hidden
*/
export declare interface GridEvent {
/**
* An event target.
*/
target?: any;
/**
* A specific native DOM event which is fetched by Vue.
*/
event?: any;
}
/**
* Represents the object of the `onExpandChange` event.
*/
export declare interface GridExpandChangeEvent extends GridEvent {
/**
* The array with collapsed groups.
*/
collapsedGroups?: any[][];
/**
* The data item that is expanded or collapsed.
*/
dataItem: any;
/**
* The available values are:
* - `true`—If the data item is expanded.
* - `false`—If the data item is collapsed.
*/
value: boolean;
}
/**
* @hidden
*/
export declare const GridFilterCell: DefineComponent<ExtractPropTypes< {
id: PropType<string>;
grid: PropType<any>;
field: PropType<string>;
filterType: PropType<string>;
colSpan: PropType<number>;
title: PropType<string>;
value: Pr