/** * @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, input: Array, footer: 'always' | 'visible' | 'none', dataIndex: { index: number; }, groupDefined: boolean, field?: string, level?: number): number; /** * @hidden */ export declare const Footer: DefineComponent, { colGroupHeaderRef: Ref; footerWrapRef: Ref; }, { 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> & Readonly<{}>, { staticHeaders: boolean; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * @hidden */ export declare const footerColumns: (columns: ExtendedColumnProps[]) => ExtendedColumnProps[]; /** * @hidden */ export declare const FooterRow: DefineComponent; columns: PropType; rowIndex: PropType; }>, {}, {}, {}, { columnStyles(column: ExtendedColumnProps): { left: string; right: string; } | { left?: undefined; right?: undefined; }; }, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly; columns: PropType; rowIndex: PropType; }>> & 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; default: number; }; collapsedGroups: { type: PropType; default: () => any[]; }; uniqueField: PropType; totalGroupedHeight: PropType; allGroupedItems: PropType; alternatePerGroup: PropType; columns: PropType; columnVirtualization: PropType; dataItems: PropType; sortable: PropType; sort: PropType; filterable: PropType; filterOperators: PropType; filterCellRender: PropType; headerCellRender: PropType; loader: PropType; filter: PropType; pageable: PropType; pageSize: PropType; total: PropType; skip: PropType; take: PropType; expandField: PropType; expandColumn: PropType; selectedField: PropType; cellRender: PropType any)>; rowRender: PropType any)>; resizable: PropType; reorderable: PropType; group: PropType; groupable: PropType; editField: PropType; rowClass: PropType; scrollable: { type: PropType; default: string; }; size: { type: PropType; default: string; validator: (value: string) => any; }; pager: PropType; rowHeight: PropType; detailRowHeight: PropType; detail: PropType; columnMenu: PropType; columnMenuAnimate: { type: PropType; default: () => true; }; columnMenuIcon: DefineComponent, {}, {}, { 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> & Readonly<{ onClick?: (...args: any[] | unknown[]) => any; }>, { viewBox: string; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; dataItemKey: StringConstructor; navigatable: { type: PropType; 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; dropElementClueRef: Ref; dragElementClueRef: Ref; headerRef: Ref; footerRef: Ref; gridNavRef: Ref; colGroupRef: Ref; scrollContainerRef: Ref; scrollTableRef: Ref; scrollTableBodyRef: Ref; }, { 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): number; addSubItems(gridData: Array, allRowsCount: number): number; }, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly; default: number; }; collapsedGroups: { type: PropType; default: () => any[]; }; uniqueField: PropType; totalGroupedHeight: PropType; allGroupedItems: PropType; alternatePerGroup: PropType; columns: PropType; columnVirtualization: PropType; dataItems: PropType; sortable: PropType; sort: PropType; filterable: PropType; filterOperators: PropType; filterCellRender: PropType; headerCellRender: PropType; loader: PropType; filter: PropType; pageable: PropType; pageSize: PropType; total: PropType; skip: PropType; take: PropType; expandField: PropType; expandColumn: PropType; selectedField: PropType; cellRender: PropType any)>; rowRender: PropType any)>; resizable: PropType; reorderable: PropType; group: PropType; groupable: PropType; editField: PropType; rowClass: PropType; scrollable: { type: PropType; default: string; }; size: { type: PropType; default: string; validator: (value: string) => any; }; pager: PropType; rowHeight: PropType; detailRowHeight: PropType; detail: PropType; columnMenu: PropType; columnMenuAnimate: { type: PropType; default: () => true; }; columnMenuIcon: DefineComponent, {}, {}, { 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> & Readonly<{ onClick?: (...args: any[] | unknown[]) => any; }>, { viewBox: string; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; dataItemKey: StringConstructor; navigatable: { type: PropType; 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; field: PropType; dataItem: PropType; format: PropType; readFormat: PropType; className: PropType; colSpan: PropType; columnIndex: PropType; columnsCount: PropType; dataIndex: PropType; rowType: PropType; level: PropType; expanded: PropType; type: PropType; editor: PropType; isSelected: PropType; ariaColumnIndex: PropType; render: PropType; isRtl: PropType; 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; field: PropType; dataItem: PropType; format: PropType; readFormat: PropType; className: PropType; colSpan: PropType; columnIndex: PropType; columnsCount: PropType; dataIndex: PropType; rowType: PropType; level: PropType; expanded: PropType; type: PropType; editor: PropType; isSelected: PropType; ariaColumnIndex: PropType; render: PropType; isRtl: PropType; 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; filter: PropType; filterable: PropType; filterOperators: PropType; checkAllItem: PropType; item: PropType; expanded: { type: PropType; default: any; }; dataItems: PropType<(string | object)[]>; searchBox: { type: PropType; default: boolean; }; uniqueData: { type: PropType; 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; /** * 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; filter: PropType; expanded: { type: PropType; default: any; }; filterable: PropType; filterOperators: { type: PropType; default: () => GridFilterOperators_3; }; hideSecondFilter: { type: PropType; default: () => any; }; filterUI: PropType; onFilterfocus: PropType<(e: any) => void>; onFilterchange: PropType<(filter: CompositeFilterDescriptor, syntheticEvent: any) => any>; onExpandchange: PropType<(nextExpandState: boolean) => void>; onClosemenu: PropType; }>, { 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; filter: PropType; expanded: { type: PropType; default: any; }; filterable: PropType; filterOperators: { type: PropType; default: () => GridFilterOperators_3; }; hideSecondFilter: { type: PropType; default: () => any; }; filterUI: PropType; onFilterfocus: PropType<(e: any) => void>; onFilterchange: PropType<(filter: CompositeFilterDescriptor, syntheticEvent: any) => any>; onExpandchange: PropType<(nextExpandState: boolean) => void>; onClosemenu: PropType; }>> & 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; filterType: PropType; value: PropType; operator: PropType; operators: PropType<{ text: string; operator: any; }[]>; booleanValues: PropType; }>, {}, {}, {}, { 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; filterType: PropType; value: PropType; operator: PropType; operators: PropType<{ text: string; operator: any; }[]>; booleanValues: PropType; }>> & Readonly<{ onChange?: (...args: any[] | unknown[]) => any; onFiltercellfocus?: (...args: any[] | unknown[]) => any; }>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * @hidden */ export declare const GridColumnMenuFilterUI: DefineComponent; secondFilterProps: PropType; logicValue: PropType<{ text: string; operator: any; }>; logicData: PropType<{ text: string; operator: any; }[]>; hideSecondFilter: PropType; operators: PropType<{ text: string; operator: any; }[]>; render: PropType; }>, {}, {}, {}, { 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; secondFilterProps: PropType; logicValue: PropType<{ text: string; operator: any; }>; logicData: PropType<{ text: string; operator: any; }[]>; hideSecondFilter: PropType; operators: PropType<{ text: string; operator: any; }[]>; render: PropType; }>> & 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; iconClass: PropType; icon: PropType; svgIcon: PropType; selected: PropType; onMenuitemclick: PropType; }>, {}, {}, {}, { onClick(e: any): void; onKeyDown(event: any): void; }, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly; iconClass: PropType; icon: PropType; svgIcon: PropType; selected: PropType; onMenuitemclick: PropType; }>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * @hidden */ export declare const GridColumnMenuItemContent: DefineComponent; }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly; }>> & 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; sort: { type: PropType; }; column: PropType; onSortchange: PropType<(descriptors: SortDescriptor[], e: any) => void>; onClosemenu: PropType; }>, { kendoLocalizationService: {}; }, {}, {}, { onAscClick(e: any): void; onDescClick(e: any): void; onSort(e: any, selectedDir: 'asc' | 'desc'): void; }, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly; sort: { type: PropType; }; column: PropType; onSortchange: PropType<(descriptors: SortDescriptor[], e: any) => void>; onClosemenu: PropType; }>> & 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; field: PropType; dataItem: PropType; format: PropType; type: PropType; className: PropType; colSpan: PropType; columnIndex: PropType; columnsCount: PropType; rowType: PropType; level: PropType; expanded: PropType; editor: PropType; isSelected: PropType; ariaColumnIndex: PropType; render: PropType; isRtl: PropType; readFormat: PropType; dataIndex: PropType; }>, { 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; field: PropType; dataItem: PropType; format: PropType; type: PropType; className: PropType; colSpan: PropType; columnIndex: PropType; columnsCount: PropType; rowType: PropType; level: PropType; expanded: PropType; editor: PropType; isSelected: PropType; ariaColumnIndex: PropType; render: PropType; isRtl: PropType; readFormat: PropType; dataIndex: PropType; }>> & 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; grid: PropType; field: PropType; filterType: PropType; colSpan: PropType; title: PropType; value: PropType; operator: PropType; operators: PropType; booleanValues: PropType; onChange: PropType<(event: { value: any; operator: string | Function; event: any; }) => void>; render: PropType; ariaLabel: PropType; size: PropType; }>, { 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; grid: PropType; field: PropType; filterType: PropType; colSpan: PropType; title: PropType; value: PropType; operator: PropType; operators: PropType; booleanValues: PropType; onChange: PropType<(event: { value: any; operator: string | Function; event: any; }) => void>; render: PropType; ariaLabel: PropType; size: PropType; }>> & 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; field: PropType; dataItem: PropType; format: PropType; type: PropType; colSpan: PropType; className: PropType; columnIndex: PropType; columnsCount: PropType; rowType: PropType; level: PropType; expanded: PropType; editor: PropType; dataIndex: PropType; isSelected: PropType; isRtl: PropType; ariaColumnIndex: PropType; render: PropType; }>, {}, {}, { 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; field: PropType; dataItem: PropType; format: PropType; type: PropType; colSpan: PropType; className: PropType; columnIndex: PropType; columnsCount: PropType; rowType: PropType; level: PropType; expanded: PropType; editor: PropType; dataIndex: PropType; isSelected: PropType; isRtl: PropType; ariaColumnIndex: PropType; render: PropType; }>> & 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; title: PropType; sortable: PropType; render: PropType; selectionValue: PropType; onHeadercellclick: PropType; }>, {}, {}, { linkClass(): { 'k-link': boolean; '!k-cursor-default': boolean; }; }, { clickHandler(event: any): void; }, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly; title: PropType; sortable: PropType; render: PropType; selectionValue: PropType; onHeadercellclick: PropType; }>> & 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; field: PropType; dataItem: PropType; format: PropType; type: PropType; className: PropType; colSpan: PropType; columnIndex: PropType; columnsCount: PropType; rowType: PropType; level: PropType; expanded: PropType; editor: PropType; isSelected: PropType; dataIndex: PropType; ariaColumnIndex: PropType; render: PropType; isRtl: PropType; }>, {}, {}, { 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; field: PropType; dataItem: PropType; format: PropType; type: PropType; className: PropType; colSpan: PropType; columnIndex: PropType; columnsCount: PropType; rowType: PropType; level: PropType; expanded: PropType; editor: PropType; isSelected: PropType; dataIndex: PropType; ariaColumnIndex: PropType; render: PropType; isRtl: PropType; }>> & 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`—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; /** * 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; dataItem: PropType; isAltRow: PropType; isHidden: PropType; onClick: PropType; isInEdit: PropType; isSelected: PropType; selectedField: PropType; rowHeight: PropType; ariaRowIndex: PropType; dataIndex: PropType; render: PropType; onRowclick: PropType; onRowdblclick: PropType; }>, {}, {}, {}, { handleClick(e: any): void; handleDoubleClick(e: any): void; }, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly; dataItem: PropType; isAltRow: PropType; isHidden: PropType; onClick: PropType; isInEdit: PropType; isSelected: PropType; selectedField: PropType; rowHeight: PropType; ariaRowIndex: PropType; dataIndex: PropType; render: PropType; onRowclick: PropType; onRowdblclick: PropType; }>> & 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; /** * 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; default: string; validator: (value: string) => any; }; }>, {}, {}, { wrapperClass(): { [x: string]: any; 'k-toolbar': boolean; 'k-grid-toolbar': boolean; }; }, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly; 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 { }