@progress/kendo-vue-grid
Version:
2,900 lines • 88.2 kB
text/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;
};
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;
} | {
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>;
highlight: PropType<{
[id: string]: boolean | {
[id: string]: boolean;
};
}>;
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;
licenseMessage: any;
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>;
highlight: PropType<{
[id: string]: boolean | {
[id: string]: boolean;
};
}>;
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>;
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>;
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>;
/**
* 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 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
*/
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: PropType<any>;
operator: PropType<string>;
operators: PropType<GridFilterOperators_3[]>;
booleanValues: PropType<GridFilterOperator_2[]>;
onChange: PropType<(event: {
value: any;
operator: string | Function;
event: any;
}) => void>;
render: PropType<any>;
ariaLabel: PropType<string>;
size: PropType<string>;
}>, {
kendoIntlService: {};
kendoLocalizationService: {};
}, {}, {}, {
inputChange(value: any, e: any): void;
operatorChange(operatorValue: any, e: any): void;
boolDropdownChange(value: any, e: any): void;
clear(e: any): void;
triggerChange(filter: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
id: PropType<string>;
grid: PropType<any>;
field: PropType<string>;
filterType: PropType<string>;
colSpan: PropType<number>;
title: PropType<string>;
value: PropType<any>;
operator: PropType<string>;
operators: PropType<GridFilterOperators_3[]>;
booleanValues: PropType<GridFilterOperator_2[]>;
onChange: PropType<(event: {
value: any;
operator: string | Function;
event: any;
}) => void>;
render: PropType<any>;
ariaLabel: PropType<string>;
size: PropType<string>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The props of the GridFilterCell component
* ([more information and examples]({% slug filtering_grid %})).
*/
/**
* @hidden
*/
export declare interface GridFilterCellProps {
/**
* @hidden
*/
id: string;
/**
* The instance of the Grid component.
*/
grid?: any;
/**
* The title of the filter editor.
*/
title?: string;
/**
* The column span of the cell.
*/
colSpan?: number;
/**
* The column field in which the cell is located.
*/
field?: string;
/**
* The type of the filter. Determines which editor will be rendered for filtering.
* The supported values are the following 0 'text' | 'numeric' | 'boolean' | 'date;
*/
filterType: string;
/**
* The value of the cell.
*/
value: any;
/**
* The operator that will be used for the cell filtering.
*/
operator: string;
/**
* The list of the default operators for the current filter type.
*/
operators: GridFilterOperators[];
/**
* The list of values for the Boolean filter.
*/
booleanValues: GridFilterOperator[];
/**
* 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;
event: any;
}) => void;
/**
* The method for rendering the filter cell.
*/
render?: any;
/**
* The ariaLabel of the filter editor.
*/
ariaLabel?: string;
/**
* Configures the `size` of the cell.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `class`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large' | string;
}
/**
* Represents the object of the `onFilterChange` event.
*/
export declare interface GridFilterChangeEvent extends GridEvent {
/**
* The new `CompositeFilterDescriptor` based on the user action.
*/
filter: CompositeFilterDescriptor;
}
/**
* The filter operator for the Grid filters.
*/
declare interface GridFilterOperator {
text: string;
operator: any;
}
/**
* 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' }
* ]
* }
* ```
*/
declare interface GridFilterOperators {
[type: string]: GridFilterOperator[];
}
export declare interface GridFooterCellProps {
/**
* The field to which the footer cell is bound.
*/
field?: string;
colSpan?: number;
}
/**
* The settings for grouping the data of the Grid
* ([see example]({% slug groupingaggregates_grid %})).
*/
export declare 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 `false`.
*/
footer?: 'always' | 'visible' | 'none';
}
/**
* @hidden
*/
export declare const GridGroupCell: DefineComponent<ExtractPropTypes< {
id: PropType<string>;
field: PropType<string>;
dataItem: PropType<any>;
format: PropType<string>;
type: PropType<string>;
colSpan: PropType<number>;
className: PropType<string>;
columnIndex: PropType<number>;
columnsCount: PropType<number>;
rowType: PropType<string>;
level: PropType<number>;
expanded: PropType<boolean>;
editor: PropType<string>;
dataIndex: PropType<number>;
isSelected: PropType<boolean>;
isRtl: PropType<boolean>;
ariaColumnIndex: PropType<number>;
render: PropType<any>;
}>, {}, {}, {
tdClass(): {
[x: number]: any;
'k-table-td': boolean;
};
}, {
triggerKeydown(event: any, expanded: boolean | undefined): void;
clickHandler(e: any, dataItem: any, expanded: boolean | undefined): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
change: any;
cellkeydown: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
id: PropType<string>;
field: PropType<string>;
dataItem: PropType<any>;
format: PropType<string>;
type: PropType<string>;
colSpan: PropType<number>;
className: PropType<string>;
columnIndex: PropType<number>;
columnsCount: PropType<number>;
rowType: PropType<string>;
level: PropType<number>;
expanded: PropType<boolean>;
editor: PropType<string>;
dataIndex: PropType<number>;
isSelected: PropType<boolean>;
isRtl: PropType<boolean>;
ariaColumnIndex: PropType<number>;
render: PropType<any>;
}>> & Readonly<{
onChange?: (...args: any[] | unknown[]) => any;
onCellkeydown?: (...args: any[] | unknown[]) => any;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the object of the `onGroupChange` event.
*/
export declare interface GridGroupChangeEvent extends GridEvent {
/**
* An array of `GroupDescriptor` based on the user action.
*/
group: GroupDescriptor[];
}
/**
* @hidden
*/
export declare const GridHeaderCell: DefineComponent<ExtractPropTypes< {
field: PropType<string>;
title: PropType<string>;
sortable: PropType<GridSortSettings_3>;
render: PropType<any>;
selectionValue: PropType<any>;
onHeadercellclick: PropType<any>;
}>, {}, {}, {
linkClass(): {
'k-link': boolean;
'!k-cursor-default': boolean;
};
}, {
clickHandler(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
field: PropType<string>;
title: PropType<string>;
sortable: PropType<GridSortSettings_3>;
render: PropType<any>;
selectionValue: PropType<any>;
onHeadercellclick: PropType<any>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The props of the GridHeaderCellProps component.
*/
/**
* @hidden
*/
export declare interface GridHeaderCellProps {
/**
* The key in which the cell is located.
*/
key?: any;
/**
* The column field in which the cell is located.
*/
field?: string;
/**
* The title of the column in which the cell is located.
*/
title?: string;
/**
* The `click` event handler of the cell.
*/
onClick?: any;
/**
* @hidden
*/
selectionValue?: any;
/**
* The method for rendering the header cell.
*/
sortable?: GridSortSettings;
/**
* The method for rendering the cell.
*/
render?: any;
}
/**
* Represents the object of the `onHeaderSelectionChange` event.
*/
export declare interface GridHeaderSelectionChangeEvent extends GridEvent {
/**
* The field of the column in which the cell is located.
*/
field?: string;
}
/**
* @hidden
*/
export declare const GridHierarchyCell: 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>;
dataIndex: PropType<number>;
ariaColumnIndex: PropType<number>;
render: PropType<any>;
isRtl: PropType<boolean>;
}>, {}, {}, {
wrapperClass(): {
[x: number]: any;
'k-table-td': boolean;
'k-hierarchy-cell': boolean;
};
}, {
triggerKeydown(event: any, expanded: boolean | undefined): void;
clickHandler(e: any, dataItem: any, expanded: boolean | undefined): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
change: any;
cellkeydown: 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>;
dataIndex: PropType<number>;
ariaColumnIndex: PropType<number>;
render: PropType<any>;
isRtl: PropType<boolean>;
}>> & Readonly<{
onChange?: (...args: any[] | unknown[]) => any;
onCellkeydown?: (...args: any[] | unknown[]) => any;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the object of the `onItemChange` event.
*/
export declare interface GridItemChangeEvent extends GridEvent {
/**
* The data object that represents the current row.
*/
dataItem: any;
/**
* The field to which the row is bound.
*/
field?: string;
/**
* The value of the item.
*/
value: any;
}
/**
* Represents the object of the `GridKeyDownEvent` Grid event.
*/
export declare interface GridKeyDownEvent extends GridEvent {
/**
* The current Grid leaf data items.
*/
dataItems: any[];
/**
* Grid selection mode.
*/
mode: 'single' | 'multiple';
/**
* Indicates if cell selection mode is enabled.
*/
cell: boolean;
/**
* The `selectedField` prop of the Grid.
*/
selectedField: string;
/**
* The component unique identifier.
*/
componentId: string;
}
/**
* Represents the object of the `GridNavigationActionEvent` Grid event.
*/
export declare interface GridNavigationActionEvent extends GridEvent {
/**
* The focused element.
*/
focusElement: any;
}
/**
* Represents the GridNoRecords component which is rendered
* when the `data` property of the Grid is empty or `null`.
*/
export declare const GridNoRecords: DefineComponent< {}, {
kendoLocalizationService: {};
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The props of the GridNoRecords component.
*/
export declare interface GridNoRecordsProps {
/**
* The Vue slots that will be rendered inside the Grid when no records are available.
*/
children?: any;
}
/**
* Represents the object of the `onPageChange` event.
*/
export declare interface GridPageChangeEvent extends GridEvent {
page: any;
/**
* A specific native DOM event which is fetched by Vue.
*/
event: any;
}
export { GridPagerSettings }
/**
* Represents the props of the [native Vue Grid component by Kendo UI]({% slug overview_grid %}).
*/
export declare interface GridProps {
/**
* Sets the Grid row key prop to the value of this field in the dataItem.
* If not set, the dataItem index will be used for the row key, which
* might lead to row not updated during paging or scrolling.
*/
dataItemKey?: string;
/**
* When set to `true` it sets the alternating of the rows per groups so each group could start
* with the same color row. There is a known limitation when virtual scrolling with groups and
* alternatePerGroup set to `true`- there may be a slight flicker of the alternating rows in
* groups with larger amount of items - in this case we would rather recommend
* using rowTemplates and set the row alternating based on the data or dataItems.
*/
alternatePerGroup?: boolean;
/**
* Sets the properties of the columns that are used by the Grid.
*/
columns?: GridColumnProps[] | null;
/**
* Sets the data of the Grid ([see example]({% slug paging_grid %})). If you use paging,
* the `data` option has to contain only the items for the current page.
*/
dataItems?: any[] | DataResult | null;
/**
* Enables the sorting for the columns with their `field` option set
* ([see example]({% slug sorting_grid %})).
*/
sortable?: GridSortSettings;
/**
* Fires when the sorting of the Grid is changed ([see example]({% slug sorting_grid %})).
* You have to handle the event yourself and sort the data.
*/
onSortchange?: (event: GridSortChangeEvent) => void;
/**
* The descriptors by which the data is sorted.
* Applies the sorting styles and buttons to the affected columns.
*/
sort?: SortDescriptor[];
/**
* Enables the filtering of the columns with their `field` option set
* ([more information and examples]({% slug filtering_grid %})).
*/
filterable?: boolean;
/**
* The descriptor by which the data is filtered
* ([more information and examples]({% slug filtering_grid %})).
* Affects the values and buttons in the `FilterRow` of the Grid.
*/
filter?: CompositeFilterDescriptor;
/**
* The filter operators for the Grid filters.
*/
filterOperators?: GridFilterOperators;
/**
* Fires when the Grid filter is modified through the UI
* ([more information and examples]({% slug filtering_grid %})).
* You have to handle the event yourself and filter the data.
*/
onFilterchange?: (event: GridFilterChangeEvent) => void;
/**
* 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;
/**
* Globally overrides the default(three vertical dots) column menu icon for the whole Grid. If set, the prop can be overridden on column level using the ([menuIcon]({% slug api_grid_gridcolumnprops %}#toc-menuicon)) property.
*/
columnMenuIcon?: SVGIcon;
/**
* Controls the ColumnMenu animation. By default, the opening and closing animations are enabled.
*/
columnMenuAnimate?: boolean | PopupAnimation;
/**
* The descriptors by which the data will be grouped
* ([more information and examples]({% slug groupingbasics_grid %})).
*/
group?: GroupDescriptor[];
/**
* Fires when the grouping of the Grid is changed. You have to handle the event yourself and group the data
* ([more information and examples]({% slug groupingbasics_grid %})).
*/
onGroupchange?: (event: GridGroupChangeEvent) => void;
/**
* Configures the pager of the Grid ([see example]({% slug paging_grid %})).
*
* The available options are:
* - `buttonCount: Number`—Sets the maximum numeric buttons count before the buttons are collapsed.
* - `info: Boolean`—Toggles the information about the current page and the total number of records.
* - `type: PagerType`—Accepts the `numeric` (buttons with numbers)
* and `input` (input for typing the page number) values.
* - `pageSizes: Boolean` or `Array<number>`—Shows a menu for selecting the page size.
* - `previousNext: Boolean`—Toggles the **Previous** and **Next** buttons.
*/
pageable?: GridPagerSettings | any;
/**
* Defines the page size that is used by the Grid pager
* ([see example]({% slug paging_grid %})). Required by the paging functionality.
*/
pageSize?: number;
/**
* Alias of the `pageSize` property. If `take` is set, `pageSize` will be ignored.
*/
take?: number;
/**
* Fires when the page of the Grid is changed ([see example]({% slug paging_grid %})).
* You have to handle the event yourself and page the data.
*/
onPagechange?: (event: GridPageChangeEvent) => void;
/**
* Defines the total number of data items in all pages
* ([see example]({% slug paging_grid %})). Required by the paging functionality.
*/
total?: number;
/**
* Defines the number of records that will be skipped by the pager
* ([see example]({% slug paging_grid %})). Required by the paging functionality.
*/
skip?: number;
/**
* Fires when the user tries to expand or collapse a row.
*/
onExpandchange?: (event: GridExpandChangeEvent) => void;
/**
* Specifies the name of the field which will provide a Boolean representation
* of the expanded state of the item ([see example]({% slug detailrow_grid %}).
*/
expandField?: string;
/**
* Specifies the name of the field which will provide a Boolean representation
* of the selected state of the item ([see example]({% slug selection_grid %})).
*/
selectedField?: string;
/**
* Fires when the user tries to select or deselect a row
* ([see example]({% slug selection_grid %})).
*/
onSelectionchange?: (event: GridSelectionChangeEvent) => void;
/**
* The descriptor by which the highlight state of an item is defined.
* Passing a boolean value will highlight the whole row, while passing an object will highlight individual cells by their field.
*
*/
highlight?: {
[id: string]: boolean | {
[id: string]: boolean;
};
};
/**
* Fires when the user clicks the checkbox of a column header whose `field` matches `selectedField`.
* ([see example]({% slug selection_grid %})).
*/
onHeaderselectionchange?: (event: GridHeaderSelectionChangeEvent) => void;
/**
* Fires when the user clicks a row.
*/
onRowclick?: (event: GridRowClickEvent) => void;
/**
* Fires when the user double clicks a row.
*/
onRowdblclick?: (event: GridRowClickEvent) => void;
/**
* Fires when the user clicks a cell.
*/
onCellclick?: (event: any) => void;
/**
* Fires when Grid is scrolled.
*/
onScroll?: (event: any) => void;
/**
* Fires when the user triggers an edit operation from a cell.
*/
onEdit?: (event: GridEditEvent) => void;
/**
* Fires when the user triggers a removal operation from a cell.
*/
onRemove?: (event: GridRemoveEvent) => void;
/**
* Fires when the user triggers a saving operation from a cell.
*/
onSave?: (event: GridSaveEvent) => void;
/**
* Fires when the user triggers a canceling operation from a cell.
*/
onCancel?: (event: GridCancelEvent) => void;
/**
* Fires when the user changes the values of the item.
* The event is not debounced and fires on every `onChange` event of the input in the current `EditCell`.
* ([more information and examples]({% slug editing_inline_grid %})).
*/
onItemchange?: (event: GridItemChangeEvent) => void;
/**
* Specifies the name of the field which will provide a Boolean representation of the edit state of the current
* item ([more information and examples]({% slug editing_inline_grid %})).
*/
editField?: string;
/**
* A function that returns a custom class applied to the row.
*
* @param item - the item for the row.
*/
rowClass?: Function;
/**
* Defines the scroll mode that is used by the Grid ([see example]({% slug scrollmmodes_grid %}).
*
* The available options are:
* - `none`—Renders no scrollbar.
* - `scrollable`—This is the default scroll mode. It requires the setting of the `height` option.
* - `virtual`—Displays no pager and renders a portion of the data (optimized rendering)
* while the user is scrolling the content.
*/
scrollable?: string;
/**
* Configures the `size` of the Grid.
*
* The available options are:
* - small
* - medium
*
* @default `medium`
*/
size?: 'small' | 'medium' | string;
/**
* Defines the row height and forces an equal height to all rows
* ([see example]({% slug scrollmmodes_grid %})).
*/
rowHeight?: number;
/**
* @hidden
*/
detailRowHeight?: number;
/**
* Specifies a custom rendering that will be cloned and rendered inside the detail rows
* of the currently expanded items ([see example]({% slug master_detail_grid %}).
* Accepts a Vue component, a `render` function, or a slot name.
* An item will be rendered as expanded if the value of its `expandField` is `true`.
*/
detail?: null | any;
/**
* Defines the GridColumnProps of the expand column.
*/
expandColumn?: GridColumnProps;
/**
* Represents the `style` HTML attribute.
*/
style?: any;
/**
* Fires when the data state of the Grid is changed.
*/
onDatastatechange?: (event: GridDataStateChangeEvent) => void;
/**
* If set to `true`, the user can resize columns by dragging the edges (resize handles) of their
* header cells ([see example]({% slug resizing_columns_grid %}).
*/
resizable?: boolean;
/**
* If set to `true`, the user can reorder columns by dragging their
* header cells ([see example]({% slug reordering_columns_grid %}).
*/
reorderable?: boolean;
/**
* Determines if grouping by dragging and dropping the column headers is allowed
* ([more information and examples]({% slug groupingbasics_grid %})).
*/
groupable?: GridGroupableSettings | boolean;
/**
* Fires when a column is resized
*/
onColumnresize?: (event: GridColumnResizeEvent) => void;
/**
* Fires when columns are reordered.
*/
onColumnreorder?: (event: GridColumnReorderEvent) => void;
/**
* Defines the custom rendering of the row. Accepts a Vue component, a `render` function, or a slot name.
*/
rowRender?: string | boolean | ((h: any, defaultRendering: any | null, defaultSlots: any, props: any, listeners: any) => any);
/**
* Defines the custom rendering of the cell. Accepts a Vue component, a `render` function, or a slot name.
* ([see example]({% slug groupingaggregates_grid %})).
*/
cellRender?: ((h: any, defaultRendering: any | null, props: GridCellProps, listeners: any) => any) | string | null | boolean;
/**
* Defines the custom rendering of the filter cell. Accepts a Vue component, a `render` function, or a slot name.
*/
filterCellRender?: ((h: any, defaultRendering: any | null, props: GridCellProps, listeners: any) => any) | string | any;
/**
* Defines the custom rendering of the header cell. Accepts a Vue component, a `render` function, or a slot name.
*/
headerCellRender?: ((h: any, defaultRendering: any | null, props: GridCellProps, listeners: any) => any) | string | any;
/**
* Defines if the loader will be shown. Defaults to `false`. Accepts a slot name, a `render` function, or a Vue component.
*/
loader?: boolean | Object | Function | string;
/**
* Defines the custom rendering of the pager. Accepts a slot name, a `render` function, or a Vue component.
*/
pager?: Object | Function | string | boolean;
/**
* Enables virtualization of the columns. If virtualization is
* enabled, the columns outside the view are not rendered.
*/
columnVirtualization?: boolean;
/**
* If set to `true`, the user can use dedicated shortcuts to interact with the Grid.
* By default, navigation is disabled and the Grid content is accessible in the normal tab sequence.
*/
navigatable?: boolean;
/**
* Passes the number of cached top items needed for the grouping virtualization scenario. Defaults to 4.
*/
topCacheCount?: number;
/**
* Passes the calculated height of all the items in the Grid grouped hierarchy.
*/
totalGroupedHeight?: number;
/**
* Passes the collection of all grouped items that is needed for the virtualization scenario.
*/
allGroupedItems?: DataResult | null;
/**
* Passes the collection of all collapsed groups for every grouped level.
*/
collapsedGroups?: any[][];
/**
* Specifies the name of the field which will provide a unique for every item identifier.
*/
uniqueField?: string;
/**
* Fires when Grid keyboard navigation position is changed.
*/
onNavigationaction?: (event: GridNavigationActionEvent) => void;
/**
* Fires when the user press keyboard key.
*/
onKeydown?: (event: GridKeyDownEvent) => void;
}
/**
* Represents the object of the `remove` event.
*/
export declare interface GridRemoveEvent {
/**
* The item from the `data` property of the Grid that corresponds to the item that is removed by the user.
*/
dataItem: any;
}
/**
* @hidden
*/
export declare const GridRow: DefineComponent<ExtractPropTypes< {
rowType: PropType<string>;
dataItem: PropType<any>;
isAltRow: PropType<boolean>;
isHidden: PropType<boolean>;
isHighlighted: PropType<boolean>;
onClick: PropType<any>;
isInEdit: PropType<boolean>;
isSelected: PropType<boolean>;
selectedField: PropType<string>;
rowHeight: PropType<number>;
ariaRowIndex: PropType<Number>;
dataIndex: PropType<Number>;
render: PropType<any>;
onRowclick: PropType<any>;
onRowdblclick: PropType<Function>;
}>, {}, {}, {
trClass(): {
'k-table-row': boolean;
'k-selected': any;
'k-highlighted': any;
'k-table-group-row': boolean;
'k-grouping-row': boolean;
'k-group-footer': boolean;
'k-master-row': boolean;
'k-table-alt-row': any;
'k-edit-row': any;
};
}, {
handleClick(e: any): void;
handleDoubleClick(e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
rowType: PropType<string>;
dataItem: PropType<any>;
isAltRow: PropType<boolean>;
isHidden: PropType<boolean>;
isHighlighted: PropType<boolean>;
onClick: PropType<any>;
isInEdit: PropType<boolean>;
isSelected: PropType<boolean>;
selectedField: PropType<string>;
rowHeight: PropType<number>;
ariaRowIndex: PropType<Number>;
dataIndex: PropType<Number>;
render: PropType<any>;
onRowclick: PropType<any>;
onRowdblclick: PropType<Function>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the object of the `onRowClick` event.
*/
export declare interface GridRowClickEvent extends GridEvent {
/**
* The item from the `data` property of the Grid which corresponds to the row that is clicked by the user.
*/
dataItem: any;
}
/**
* The props that the Grid passes to the GridRow component when creating it.
* Accessible during the `rowRender` callback of the Grid.
*/
/**
* @hidden
*/
export declare interface GridRowProps {
/**
* The 'key' prop that may be applied to the row.
*/
key?: number;
/**
* The `data` object that represents the current row.
*/
dataItem: any;
/**
* Indicates whether the row is an alternating row.
*/
isAltRow: boolean;
/**
* Indicates if the row is hidden. The hidden row is rendered above the
* visible area of the Grid. Occurs when the Grid uses virtualization and
* the row is on the current page. When `rowHeight` is set, `isHidden` is always `true`.
*/
isHidden: boolean;
/**
* @hidden
*/
isHighlighted?: boolean;
/**
* The event that is fired when the row is clicked.
*/
onClick: any;
/**
* The name of the field which will provide a Boolean representation of the selected state of the item.
*/
selectedField?: string;
/**
* The row height. Configuring `rowHeight` sets the height to the height of the current Grid row.
*/
rowHeight?: number;
/**
* The type of the row.
*/
rowType: string;
/**
* The method for rendering the cell.
*/
render?: any;
/**
* @hidden
*/
ariaRowIndex?: Number;
/**
* @hidden
*/
dataIndex?: Number;
}
/**
* The type of the GridRow component.
*
* The available values are:
* - `groupHeader`—The row is a group header.
* - `groupFooter`—The row is a group footer.
* - `data`—The row corresponds to an item from the `data` collection which is passed to the Grid.
*/
declare type GridRowType = 'groupFooter' | 'groupHeader' | 'data';
/**
* Represents the object of the `save` event.
*/
export declare interface GridSaveEvent {
/**
* The item from the `data` property of the Grid that corresponds to the item that is saved by the user.
*/
dataItem: any;
}
/**
* Represents the object of the `onSelectionChange` event.
*/
export declare interface GridSelectionChangeEvent extends GridEvent {
/**
* The data item which was selected or deselected by the user.
*/
dataItem: any;
}
/**
* Represents the object of the `onSortChange` event.
*/
export declare interface GridSortChangeEvent extends GridEvent {
/**
* The new `SortDescriptor` based on the user action.
*/
sort: SortDescriptor[];
}
/**
* The settings for sorting the Grid data.
*/
export declare type GridSortSettings = boolean | GridColumnSortSettings & {
/**
* The sort mode of the Grid.
*
* The available modes are:
* - `single`
* - `multiple`
*/
mode?: 'single' | 'multiple';
};
/**
* Represents the GridToolbar component.
*
* @hidden
*/
export declare const GridToolbar: DefineComponent<ExtractPropTypes< {
size: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
}>, {}, {}, {
wrapperClass(): {
[x: string]: any;
'k-toolbar': boolean;
'k-grid-toolbar': boolean;
'k-toolbar-solid': boolean;
};
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
size: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
}>> & Readonly<{}>, {
size: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* The props of the GridToolbarProps component.
*/
export declare interface GridToolbarProps {
/**
* Configures the `size` of the Grid.
*
* The available options are:
* - small
* - medium
*
* @default `medium`
*/
size?: 'small' | 'medium' | string;
}
/**
* @hidden
*/
export declare function groupedFirstItemValue(item: any, field: string): any;
/**
* @hidden
*/
export declare function isRtl(element: Element | null): boolean;
/**
* @hidden
*/
export declare function mapColumns(columns: Array<{
parentIndex: number;
colSpan: number;
rowSpan: number;
depth: number;
kFirst?: boolean;
children: any[];
width?: string | number;
locked?: boolean;
index: number;
left: number;
right: number;
rightBorder: boolean;
}>): number[][];
/**
* @hidden
*/
export declare const parsers: {
number: (value: any, intl: IntlService, format?: string) => number;
date: (value: any, intl: IntlService, format?: string) => Date;
boolean: (value: any) => any;
string: (value: any) => any;
default: (value: any) => any;
};
/**
* @hidden
*/
export declare function readColumns(newColumns: GridColumnProps[] | null | undefined, oldColumns: GridColumnProps[], idInfo: {
prevId: number;
idPrefix: string;
}, depth?: number): ExtendedColumnProps[];
/**
* @hidden
*/
declare class RowHeightService {
private total;
private offsets;
private heights;
constructor(total: number, rowHeight: number, detailRowHeight: number, data?: DataItemWrapper[]);
height(rowIndex: number): number;
index(position: number): number | undefined;
offset(rowIndex: number): number;
totalHeight(): number;
}
/**
* Can be used to check if sorting is applied to a specific field ([see example]({% slug column_menu_grid %}#toc-styling-the-column-menu-icon)). Useful for creating active sort indicators.
*/
export declare const sortGroupByField: (field: string, sort?: SortDescriptor[]) => boolean;
/**
* @hidden
*/
declare class VirtualScroll implements VirtualScrollInterface {
table: HTMLTableElement | null;
containerHeight: number;
topCacheCount: number;
attendedSkip: number;
propsSkip: number;
total: number;
scrollableVirtual: boolean;
realSkip: number;
pageSize: number;
PageChange: (page: Page, event: any) => void;
tableBodyRef: any;
fixedScroll: boolean;
askedSkip: number | undefined;
containerRef: any;
tableTransform: string;
rowHeightService?: RowHeightService;
get container(): HTMLDivElement | null;
private prevScrollPos;
private tableTranslate;
private scrollSyncing;
constructor(cached: boolean, topCacheCount: number);
/**
* @return - The row heights in an array.
*/
get rowHeights(): Array<{
line: number;
acc: number;
}>;
changePage(skip: number, e: any): void;
translate(dY: number): void;
reset(): void;
localScrollUp(e: any): void;
localScrollDown(e: any): void;
scrollNonStrict(e: any): void;
scrollHandler(e: any): void;
private topItems;
private horizontalScrollbarHeight;
}
/**
* @hidden
*/
declare interface VirtualScrollInterface {
PageChange: ((page: Page, e: any) => void) | null;
reset: () => void;
askedSkip: number | undefined;
total: number;
table: HTMLTableElement | null;
tableBodyRef: any;
fixedScroll: boolean;
realSkip: number;
pageSize: number;
scrollableVirtual: boolean;
propsSkip: number;
topCacheCount: number;
attendedSkip: number;
containerHeight: number;
containerRef: any;
tableTransform: string;
rowHeightService?: RowHeightService;
get container(): HTMLDivElement | null;
scrollHandler(e: any): void;
}
export { }