@progress/kendo-vue-grid/RootGrid.d.ts

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { GridProps } from './interfaces/GridProps';
import { GridColumnProps } from './interfaces/GridColumnProps';
/**
 * Represent the `ref` of the Grid component.
 */
export interface GridHandle {
    /**
     * Returns the HTML element of the Grid component.
     */
    element: HTMLDivElement | null;
    /**
     * The props values of the Grid.
     */
    props: GridProps;
    /**
     * 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.
     *
     */
    columns: GridColumnProps[];
    /**
     * Method to allow the scroll to be set to a specific row index when the Grid is scrollable. It is zero based.
     *
     * @param options - Object, containing the rowIndex to which is going to be scrolled.
     */
    scrollIntoView: (options: {
        rowIndex: number;
    }) => void;
    /**
     * Method to fit columns according to their content.
     *
     * @param columnIds - Array of column ids to be fitted.
     */
    fitColumns: (columnIds: string[]) => void;
    /**
     * Method to trigger a PDF export of the Grid.
     * The 'pdf' prop of the Grid should be set to true or object of setting that will be applied the exported Grid.
     */
    exportAsPdf: () => void;
}
/**
 * Represents the [KendoVue Grid component]({% slug overview_grid %}).
 *
 * @remarks
 * Supported children components are: {@link GridColumn}, {@link GridToolbar}, {@link GridNoRecords}, {@link StatusBar}.
 *
 * @hidden
 *
 */
export declare const RootGrid: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
    id: import('vue').PropType<string>;
    autoProcessData: import('vue').PropType<boolean | import('./utils/dataProcessing').AutoProcessDataConfig>;
    topCacheCount: {
        type: import('vue').PropType<number>; /**
         * Represent the `ref` of the Grid component.
         */
        default: number;
    };
    collapsedGroups: {
        type: import('vue').PropType<any[][]>;
        default: () => any[];
    };
    uniqueField: import('vue').PropType<string>;
    totalGroupedHeight: import('vue').PropType<number>;
    allGroupedItems: import('vue').PropType<import('@progress/kendo-data-query').DataResult>;
    alternatePerGroup: import('vue').PropType<boolean>;
    columns: import('vue').PropType<GridColumnProps[]>;
    columnsState: {
        type: import('vue').PropType<import('.').GridColumnState[]>;
        default: () => any;
    };
    cells: import('vue').PropType<import('.').GridCellsSettings>;
    contextMenu: import('vue').PropType<boolean | import('.').GridContextMenuOptions | ((options: import('.').GridCellBaseOptions) => boolean | import('.').GridContextMenuOptions)>;
    rows: import('vue').PropType<import('./interfaces/GridRowsSettings').GridRowsSettings>;
    defaultColumnsState: {
        type: import('vue').PropType<import('.').GridColumnState[]>;
        default: () => any;
    };
    columnVirtualization: import('vue').PropType<boolean>;
    dataItems: import('vue').PropType<any[] | import('@progress/kendo-data-query').DataResult>;
    sortable: import('vue').PropType<import('.').GridSortSettings>;
    defaultSort: import('vue').PropType<import('@progress/kendo-data-query').SortDescriptor[]>;
    sort: import('vue').PropType<import('@progress/kendo-data-query').SortDescriptor[]>;
    filterable: import('vue').PropType<boolean>;
    filterOperators: import('vue').PropType<import('./interfaces/GridFilterOperators').GridFilterOperators>;
    filterCellRender: import('vue').PropType<any>;
    headerCellRender: import('vue').PropType<any>;
    showLoader: {
        type: import('vue').PropType<boolean>;
        default: any;
    };
    loader: import('vue').PropType<string | Object | Function>;
    lockGroups: import('vue').PropType<boolean>;
    pinnable: import('vue').PropType<boolean>;
    defaultPinnedTopRows: import('vue').PropType<any[]>;
    defaultPinnedBottomRows: import('vue').PropType<any[]>;
    pinnedTopRows: import('vue').PropType<any[]>;
    pinnedBottomRows: import('vue').PropType<any[]>;
    defaultFilter: import('vue').PropType<import('@progress/kendo-data-query').CompositeFilterDescriptor>;
    filter: import('vue').PropType<import('@progress/kendo-data-query').CompositeFilterDescriptor>;
    defaultSearch: import('vue').PropType<import('@progress/kendo-data-query').CompositeFilterDescriptor>;
    search: import('vue').PropType<import('@progress/kendo-data-query').CompositeFilterDescriptor>;
    searchFields: import('vue').PropType<(string | import('@progress/kendo-vue-data-tools').SearchField)[]>;
    highlight: import('vue').PropType<{
        [id: string]: boolean | {
            [id: string]: boolean;
        };
    }>;
    pageable: import('vue').PropType<any>;
    pageSize: import('vue').PropType<number>;
    total: import('vue').PropType<number>;
    fixedScroll: import('vue').PropType<boolean>;
    skip: import('vue').PropType<number>;
    defaultSkip: import('vue').PropType<number>;
    take: import('vue').PropType<number>;
    defaultTake: import('vue').PropType<number>;
    expandField: import('vue').PropType<string>;
    expandColumn: import('vue').PropType<GridColumnProps>;
    selectedField: import('vue').PropType<string>;
    cellRender: import('vue').PropType<string | boolean | ((h: any, defaultRendering: any, props: import('.').GridCellProps, listeners: any) => any)>;
    rowRender: import('vue').PropType<string | boolean | ((h: any, defaultRendering: any, defaultSlots: any, props: any, listeners: any) => any)>;
    rowSpannable: import('vue').PropType<boolean | import('./interfaces/GridRowSpannableSettings').GridRowSpannableSettings>;
    resizable: import('vue').PropType<boolean>;
    reorderable: import('vue').PropType<boolean>;
    group: import('vue').PropType<import('@progress/kendo-data-query').GroupDescriptor[]>;
    defaultGroup: import('vue').PropType<import('@progress/kendo-data-query').GroupDescriptor[]>;
    groupable: import('vue').PropType<boolean | import('.').GridGroupableSettings>;
    groupExpand: import('vue').PropType<import('@progress/kendo-vue-data-tools').GroupExpandDescriptor[]>;
    defaultGroupExpand: import('vue').PropType<import('@progress/kendo-vue-data-tools').GroupExpandDescriptor[]>;
    detailExpand: import('vue').PropType<import('@progress/kendo-vue-data-tools').DetailExpandDescriptor>;
    defaultDetailExpand: import('vue').PropType<import('@progress/kendo-vue-data-tools').DetailExpandDescriptor>;
    editField: import('vue').PropType<string>;
    rowClass: import('vue').PropType<Function>;
    select: import('vue').PropType<import('@progress/kendo-vue-data-tools').SelectDescriptor>;
    defaultSelect: import('vue').PropType<import('@progress/kendo-vue-data-tools').SelectDescriptor>;
    selectable: import('vue').PropType<boolean | import('./interfaces/GridSelectableSettings').GridSelectableSettings>;
    scrollable: {
        type: import('vue').PropType<string>;
        default: string;
    };
    size: {
        type: import('vue').PropType<string>;
        default: string;
        validator: (value: string) => any;
    };
    dir: import('vue').PropType<string>;
    pager: import('vue').PropType<string | boolean | Object | Function>;
    rowHeight: import('vue').PropType<number>;
    detailRowHeight: import('vue').PropType<number>;
    detail: import('vue').PropType<any>;
    columnMenu: import('vue').PropType<any>;
    columnMenuAnimate: {
        type: import('vue').PropType<boolean | import('@progress/kendo-vue-popup').PopupAnimation>;
        default: () => boolean;
    };
    columnMenuIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
        name: StringConstructor;
        icon: ObjectConstructor;
        themeColor: {
            type: StringConstructor;
        };
        size: {
            type: StringConstructor;
        };
        flip: {
            type: StringConstructor;
        };
        fillMode: {
            type: StringConstructor;
        };
        variant: {
            type: StringConstructor;
        };
        id: StringConstructor;
        ariaLabel: StringConstructor;
        title: StringConstructor;
        viewBox: {
            type: StringConstructor;
            default: string;
        };
        tabIndex: NumberConstructor;
        svgClassName: StringConstructor;
        svgStyle: ObjectConstructor;
    }>, {}, {}, {
        wrapperClass(this: import('@progress/kendo-vue-common').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;
    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
        click: any;
    }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
        name: StringConstructor;
        icon: ObjectConstructor;
        themeColor: {
            type: StringConstructor;
        };
        size: {
            type: StringConstructor;
        };
        flip: {
            type: StringConstructor;
        };
        fillMode: {
            type: StringConstructor;
        };
        variant: {
            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, import('vue').ComponentProvideOptions, true, {}, any>;
    dataItemKey: StringConstructor;
    navigatable: {
        type: import('vue').PropType<boolean>;
        default: boolean;
    };
    onItemchange: import('vue').PropType<(event: import('.').GridItemChangeEvent) => void>;
    onExpandchange: import('vue').PropType<(event: import('.').GridExpandChangeEvent) => void>;
    onDatastatechange: import('vue').PropType<(event: import('.').GridDataStateChangeEvent) => void>;
    onPagechange: import('vue').PropType<(event: import('.').GridPageChangeEvent) => void>;
    onSortchange: import('vue').PropType<(event: import('.').GridSortChangeEvent) => void>;
    onFilterchange: import('vue').PropType<(event: import('.').GridFilterChangeEvent) => void>;
    onGroupchange: import('vue').PropType<(event: import('.').GridGroupChangeEvent) => void>;
    onSearchchange: import('vue').PropType<(event: import('.').GridSearchChangeEvent) => void>;
    onGroupexpandchange: import('vue').PropType<(event: import('.').GridGroupExpandChangeEvent) => void>;
    onDetailexpandchange: import('vue').PropType<(event: import('.').GridDetailExpandChangeEvent) => void>;
    onContextmenu: import('vue').PropType<(event: import('.').GridContextMenuEvent) => void>;
    onContextmenuitemclick: import('vue').PropType<(event: import('.').GridContextMenuItemClickEvent) => void>;
    clipboard: import('vue').PropType<boolean | import('@progress/kendo-vue-data-tools').ClipboardSettings>;
    onClipboard: import('vue').PropType<(event: import('@progress/kendo-vue-data-tools').GridClipboardEvent) => void>;
    csv: import('vue').PropType<boolean | import('./interfaces/GridProps').GridCSVExportOptions>;
    onCsvexport: import('vue').PropType<(data: any[]) => any[]>;
}>, void, {}, {
    columnsWithTemplates(): any[];
    cellsWithTemplates(): any;
    rowsWithTemplates(): any;
}, {
    transformTemplate(template: any, listeners: any): any;
    transformGroupTemplates(group: any, listeners: any): {
        groupHeader: any;
        data: any;
        groupFooter: any;
    };
    transformCellTemplates(cells: any, listeners: any): {
        headerCell: any;
        filterCell: any;
        footerCell: any;
        groupHeader: any;
        data: any;
        groupFooter: any;
        select: any;
        hierarchy: any;
        group: any;
        edit: {
            text: any;
            numeric: any;
            boolean: any;
            date: any;
        };
    };
    transformRowTemplates(rows: any, listeners: any): {
        groupHeader: any;
        data: any;
        groupFooter: any;
        pinnedData: any;
    };
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
    id: import('vue').PropType<string>;
    autoProcessData: import('vue').PropType<boolean | import('./utils/dataProcessing').AutoProcessDataConfig>;
    topCacheCount: {
        type: import('vue').PropType<number>; /**
         * Represent the `ref` of the Grid component.
         */
        default: number;
    };
    collapsedGroups: {
        type: import('vue').PropType<any[][]>;
        default: () => any[];
    };
    uniqueField: import('vue').PropType<string>;
    totalGroupedHeight: import('vue').PropType<number>;
    allGroupedItems: import('vue').PropType<import('@progress/kendo-data-query').DataResult>;
    alternatePerGroup: import('vue').PropType<boolean>;
    columns: import('vue').PropType<GridColumnProps[]>;
    columnsState: {
        type: import('vue').PropType<import('.').GridColumnState[]>;
        default: () => any;
    };
    cells: import('vue').PropType<import('.').GridCellsSettings>;
    contextMenu: import('vue').PropType<boolean | import('.').GridContextMenuOptions | ((options: import('.').GridCellBaseOptions) => boolean | import('.').GridContextMenuOptions)>;
    rows: import('vue').PropType<import('./interfaces/GridRowsSettings').GridRowsSettings>;
    defaultColumnsState: {
        type: import('vue').PropType<import('.').GridColumnState[]>;
        default: () => any;
    };
    columnVirtualization: import('vue').PropType<boolean>;
    dataItems: import('vue').PropType<any[] | import('@progress/kendo-data-query').DataResult>;
    sortable: import('vue').PropType<import('.').GridSortSettings>;
    defaultSort: import('vue').PropType<import('@progress/kendo-data-query').SortDescriptor[]>;
    sort: import('vue').PropType<import('@progress/kendo-data-query').SortDescriptor[]>;
    filterable: import('vue').PropType<boolean>;
    filterOperators: import('vue').PropType<import('./interfaces/GridFilterOperators').GridFilterOperators>;
    filterCellRender: import('vue').PropType<any>;
    headerCellRender: import('vue').PropType<any>;
    showLoader: {
        type: import('vue').PropType<boolean>;
        default: any;
    };
    loader: import('vue').PropType<string | Object | Function>;
    lockGroups: import('vue').PropType<boolean>;
    pinnable: import('vue').PropType<boolean>;
    defaultPinnedTopRows: import('vue').PropType<any[]>;
    defaultPinnedBottomRows: import('vue').PropType<any[]>;
    pinnedTopRows: import('vue').PropType<any[]>;
    pinnedBottomRows: import('vue').PropType<any[]>;
    defaultFilter: import('vue').PropType<import('@progress/kendo-data-query').CompositeFilterDescriptor>;
    filter: import('vue').PropType<import('@progress/kendo-data-query').CompositeFilterDescriptor>;
    defaultSearch: import('vue').PropType<import('@progress/kendo-data-query').CompositeFilterDescriptor>;
    search: import('vue').PropType<import('@progress/kendo-data-query').CompositeFilterDescriptor>;
    searchFields: import('vue').PropType<(string | import('@progress/kendo-vue-data-tools').SearchField)[]>;
    highlight: import('vue').PropType<{
        [id: string]: boolean | {
            [id: string]: boolean;
        };
    }>;
    pageable: import('vue').PropType<any>;
    pageSize: import('vue').PropType<number>;
    total: import('vue').PropType<number>;
    fixedScroll: import('vue').PropType<boolean>;
    skip: import('vue').PropType<number>;
    defaultSkip: import('vue').PropType<number>;
    take: import('vue').PropType<number>;
    defaultTake: import('vue').PropType<number>;
    expandField: import('vue').PropType<string>;
    expandColumn: import('vue').PropType<GridColumnProps>;
    selectedField: import('vue').PropType<string>;
    cellRender: import('vue').PropType<string | boolean | ((h: any, defaultRendering: any, props: import('.').GridCellProps, listeners: any) => any)>;
    rowRender: import('vue').PropType<string | boolean | ((h: any, defaultRendering: any, defaultSlots: any, props: any, listeners: any) => any)>;
    rowSpannable: import('vue').PropType<boolean | import('./interfaces/GridRowSpannableSettings').GridRowSpannableSettings>;
    resizable: import('vue').PropType<boolean>;
    reorderable: import('vue').PropType<boolean>;
    group: import('vue').PropType<import('@progress/kendo-data-query').GroupDescriptor[]>;
    defaultGroup: import('vue').PropType<import('@progress/kendo-data-query').GroupDescriptor[]>;
    groupable: import('vue').PropType<boolean | import('.').GridGroupableSettings>;
    groupExpand: import('vue').PropType<import('@progress/kendo-vue-data-tools').GroupExpandDescriptor[]>;
    defaultGroupExpand: import('vue').PropType<import('@progress/kendo-vue-data-tools').GroupExpandDescriptor[]>;
    detailExpand: import('vue').PropType<import('@progress/kendo-vue-data-tools').DetailExpandDescriptor>;
    defaultDetailExpand: import('vue').PropType<import('@progress/kendo-vue-data-tools').DetailExpandDescriptor>;
    editField: import('vue').PropType<string>;
    rowClass: import('vue').PropType<Function>;
    select: import('vue').PropType<import('@progress/kendo-vue-data-tools').SelectDescriptor>;
    defaultSelect: import('vue').PropType<import('@progress/kendo-vue-data-tools').SelectDescriptor>;
    selectable: import('vue').PropType<boolean | import('./interfaces/GridSelectableSettings').GridSelectableSettings>;
    scrollable: {
        type: import('vue').PropType<string>;
        default: string;
    };
    size: {
        type: import('vue').PropType<string>;
        default: string;
        validator: (value: string) => any;
    };
    dir: import('vue').PropType<string>;
    pager: import('vue').PropType<string | boolean | Object | Function>;
    rowHeight: import('vue').PropType<number>;
    detailRowHeight: import('vue').PropType<number>;
    detail: import('vue').PropType<any>;
    columnMenu: import('vue').PropType<any>;
    columnMenuAnimate: {
        type: import('vue').PropType<boolean | import('@progress/kendo-vue-popup').PopupAnimation>;
        default: () => boolean;
    };
    columnMenuIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
        name: StringConstructor;
        icon: ObjectConstructor;
        themeColor: {
            type: StringConstructor;
        };
        size: {
            type: StringConstructor;
        };
        flip: {
            type: StringConstructor;
        };
        fillMode: {
            type: StringConstructor;
        };
        variant: {
            type: StringConstructor;
        };
        id: StringConstructor;
        ariaLabel: StringConstructor;
        title: StringConstructor;
        viewBox: {
            type: StringConstructor;
            default: string;
        };
        tabIndex: NumberConstructor;
        svgClassName: StringConstructor;
        svgStyle: ObjectConstructor;
    }>, {}, {}, {
        wrapperClass(this: import('@progress/kendo-vue-common').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;
    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
        click: any;
    }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
        name: StringConstructor;
        icon: ObjectConstructor;
        themeColor: {
            type: StringConstructor;
        };
        size: {
            type: StringConstructor;
        };
        flip: {
            type: StringConstructor;
        };
        fillMode: {
            type: StringConstructor;
        };
        variant: {
            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, import('vue').ComponentProvideOptions, true, {}, any>;
    dataItemKey: StringConstructor;
    navigatable: {
        type: import('vue').PropType<boolean>;
        default: boolean;
    };
    onItemchange: import('vue').PropType<(event: import('.').GridItemChangeEvent) => void>;
    onExpandchange: import('vue').PropType<(event: import('.').GridExpandChangeEvent) => void>;
    onDatastatechange: import('vue').PropType<(event: import('.').GridDataStateChangeEvent) => void>;
    onPagechange: import('vue').PropType<(event: import('.').GridPageChangeEvent) => void>;
    onSortchange: import('vue').PropType<(event: import('.').GridSortChangeEvent) => void>;
    onFilterchange: import('vue').PropType<(event: import('.').GridFilterChangeEvent) => void>;
    onGroupchange: import('vue').PropType<(event: import('.').GridGroupChangeEvent) => void>;
    onSearchchange: import('vue').PropType<(event: import('.').GridSearchChangeEvent) => void>;
    onGroupexpandchange: import('vue').PropType<(event: import('.').GridGroupExpandChangeEvent) => void>;
    onDetailexpandchange: import('vue').PropType<(event: import('.').GridDetailExpandChangeEvent) => void>;
    onContextmenu: import('vue').PropType<(event: import('.').GridContextMenuEvent) => void>;
    onContextmenuitemclick: import('vue').PropType<(event: import('.').GridContextMenuItemClickEvent) => void>;
    clipboard: import('vue').PropType<boolean | import('@progress/kendo-vue-data-tools').ClipboardSettings>;
    onClipboard: import('vue').PropType<(event: import('@progress/kendo-vue-data-tools').GridClipboardEvent) => void>;
    csv: import('vue').PropType<boolean | import('./interfaces/GridProps').GridCSVExportOptions>;
    onCsvexport: import('vue').PropType<(data: any[]) => any[]>;
}>> & Readonly<{}>, {
    size: string;
    scrollable: string;
    navigatable: boolean;
    columnMenuAnimate: boolean;
    topCacheCount: number;
    collapsedGroups: any[][];
    columnsState: import('.').GridColumnState[];
    defaultColumnsState: import('.').GridColumnState[];
    showLoader: boolean;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;