@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
106 lines (105 loc) • 3.06 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
/**
* Defines the type of the Grid pager.
*
* The available values are:
* * `numeric`—Shows buttons with numbers.
* * `input`—Shows an input for typing the page number.
*
* @example
* ```html
* <kendo-grid [pageable]="{ type: 'numeric' }">
* <kendo-grid-column field="ProductID"></kendo-grid-column>
* </kendo-grid>
* ```
*/
export type PagerType = 'numeric' | 'input';
/**
* Sets the position of the Grid pager.
*
* The available values are:
* * `top`—Renders the pager above the Grid headers.
* * `bottom`—(Default) Renders the pager below the data table.
* * `both`—Renders two pagers: one above the Grid headers and one below the data table.
*
* @example
* ```html
* <kendo-grid [pageable]="{ position: 'both' }">
* <kendo-grid-column field="ProductID"></kendo-grid-column>
* ...
* </kendo-grid>
* ```
*/
export type PagerPosition = 'top' | 'bottom' | 'both';
/**
* Configures the pager settings of the Grid ([see example](slug:paging_grid_settings)).
*
* @example
* ```typescript
* public pagerSettings: PagerSettings = {
* buttonCount: 5,
* info: true,
* type: 'numeric',
* pageSizes: [5, 10, 20],
* previousNext: true,
* responsive: true,
* position: 'bottom'
* };
* ```
*/
export interface PagerSettings {
/**
* Sets the maximum number of numeric buttons before collapsing them.
*/
buttonCount?: number;
/**
* Shows information about the current page and the total number of records.
*/
info?: boolean;
/**
* Sets the type of the Grid pager.
*/
type?: PagerType;
/**
* Shows a menu for selecting the page size.
*/
pageSizes?: boolean | Array<number>;
/**
* Shows the **Previous** and **Next** buttons.
*/
previousNext?: boolean;
/**
* Enables the built-in responsive behavior of the Pager.
*/
responsive?: boolean;
/**
* Sets the Pager position relative to the Grid data table.
* The possible values are `'top'`, `'bottom'`, and `'both'` ([see example](slug:paging_grid_settings)).
*/
position?: PagerPosition;
}
/**
* Describes the `PageSizeItem` options for the `PagerPageSizesComponent`.
*
* @example
* ```typescript
* const pageSizeItem: PageSizeItem = { text: 'Show All', value: 'all' };
* ```
*/
export interface PageSizeItem {
/**
* Sets the text for each option in the pager's PageSize selector.
*/
text: string;
/**
* Sets the value used as the page size. If set to `'all'`, the page size matches the Grid data `total`.
*/
value: number | 'all';
}
/**
* @hidden
*/
export declare const normalize: (settings: any) => any;