@mescius/wijmo.grid
Version:
UI library for pure JS, Angular, React, Vue and more...
1,358 lines • 219 kB
TypeScript
/*!
*
* Wijmo Library 5.20252.44
* https://developer.mescius.com/wijmo
*
* Copyright(c) MESCIUS inc. All rights reserved.
*
* Licensed under the End-User License Agreement For MESCIUS Wijmo Software.
* us.sales@mescius.com
* https://developer.mescius.com/wijmo/licensing
*
*/
/**
* {@module wijmo.grid}
* Defines the {@link FlexGrid} control and associated classes.
*
* The example below creates a {@link FlexGrid} control and binds it to a
* 'data' array. The grid has three columns, specified by explicitly
* populating the grid's {@link FlexGrid.columns} array.
*
* {@sample Grid/Data-binding/Basics/purejs Example}
*/
/**
*
*/
export declare var ___keepComment: any;
import { Size, CancelEventArgs, NotifyCollectionChangedEventArgs, ObservableArray, Point, Control, Event, EventArgs, _MaskProvider, ICollectionView, DataType, Aggregate, Binding, CollectionViewGroup, Rect, Tooltip, IEditableCollectionView, IBindingInfo } from '@mescius/wijmo';
import * as mInput from '@mescius/wijmo.input';
import * as selfModule from '@mescius/wijmo.grid';
export declare type _BrowserVer = {
full: string;
major: number;
minor: number;
};
export declare function _getSafariVer(): _BrowserVer;
export declare const FlexGridClsNames: {
alt: string;
bigHeader: string;
bottomLeft: string;
cell: string;
cellCheck: string;
cellIndex: string;
cells: string;
colFooters: string;
colGroup: string;
colHeaders: string;
elemCollapse: string;
elemCollapseSpace: string;
elemDropDown: string;
elemPin: string;
errorTip: string;
focusHeaderCell: string;
frozen: string;
frozenClone: string;
frozenCol: string;
frozenColLeft: string;
frozenColRight: string;
frozenColRightEdge: string;
frozenRow: string;
frozenRowBottom: string;
gridEditor: string;
gridIme: string;
gridListBox: string;
group: string;
groupSummary: string;
hasDropDown: string;
header: string;
headerAlt: string;
hostElement: string;
lastFrozenRow: string;
lastFrozenRowBottom: string;
lastVisibleCol: string;
lastVisibleRow: string;
marker: string;
marquee: string;
multiline: string;
new: string;
radioMap: string;
row: string;
rowHeaders: string;
sortAsc: string;
sortDesc: string;
sortIndex: string;
topLeft: string;
whiteSpacePre: string;
wrap: string;
noDataOverlay: string;
screenReaderOnly: string;
};
export declare const _CustomEditorClsNames: {
editorsContainer: string;
};
/**
* Represents a function that matches text against a search string.
* @param text Text to test.
* @param searchText Search string.
* @returns true if the text satisfies the search text, false otherwise.
*/
export declare type ITextSearch = (text: string, searchText: string) => boolean;
/**
* Specifies constants that define the type of editor used with data-mapped columns.
*/
export declare enum DataMapEditor {
/** Use an input element with auto-complete and validation. */
AutoComplete = 0,
/** Use an input element with auto-complete, validation, and a drop-down list. */
DropDownList = 1,
/** Use radio buttons with mouse and keyboard support. */
RadioButtons = 2,
/** Use Menu type control, only display dropdown and not accompied input element */
Menu = 3
}
/**
* Represents a data map for use with a column's {@link Column.dataMap} property.
*
* Data maps provide the grid with automatic look up capabilities. For example,
* you may want to display a customer name instead of his ID, or a color name
* instead of its RGB value.
*
* The code below binds a grid to a collection of products, then assigns a
* {@link DataMap} to the grid's 'CategoryID' column so the grid displays the
* category names rather than the raw IDs.
*
* The grid takes advantage of data maps also for editing. If the <b>wijmo.input</b>
* module is loaded, then when editing data-mapped columns the grid will show
* a drop-down list containing the values on the map.
*
* ```typescript
* import { FlexGrid, Column } from '@mescius/wijmo.grid';
*
* // bind grid to products
* let flex = new FlexGrid({
* itemsSource: products
* });
*
* // map CategoryID column to show category name instead of ID
* let col = flex.getColumn('CategoryID');
* col.dataMap = new DataMap(categories, 'CategoryID', 'CategoryName');
* ```
*
* In general, data maps apply to whole columns. However, there are situations
* where you may want to restrict the options available for a cell based on a
* value on a different column. For example, if you have "Country" and "City"
* columns, you will probably want to restrict the cities based on the current
* country.
*
* There are two ways you can implement these "dynamic" data maps:
*
* <ol>
* <li>
* If the {@link DataMap} is just a list of strings, you can change it before
* the grid enters edit mode. In this case, the cells contain the string
* being displayed, and changing the map won't affect other cells in the
* same column.
* This fiddle demonstrates:
* <a href="https://jsfiddle.net/Wijmo5/8brL80r8/">show me</a>.
* </li>
* <li>
* If the {@link DataMap} is a real map (stores key values in the cells, shows
* a corresponding string), then you can apply a filter to restrict the
* values shown in the drop-down. The {@link DataMap} will still contain the
* same keys and values, so other cells in the same column won't be disturbed
* by the filter.
* This fiddle demonstrates:
* <a href="https://jsfiddle.net/Wijmo5/xborLd4t/">show me</a>.
* </li>
* </ol>
*
* In some cases, you may want to create a {@link DataMap} to represent an enumeration.
* This can be done with the following code:
*
* ```typescript
* // build a DataMap for a given enum
* function getDataMap(enumClass) {
* let pairs = [];
* for (let key in enumClass) {
* var val = parseInt(key);
* if (!isNaN(val)) {
* pairs.push({ key: val, name: enumClass[val] });
* }
* }
* return new DataMap(pairs, 'key', 'name');
* }
* ```
* DataMap can treat keys in two different ways, this functionality is controlled by the
* {@link serializeKeys} property. By default, key values are converted to strings before
* processing, that is different values will produce the same key value if their string
* representations are equal. This is usually the preferred behavior. You maw need to change
* this mode if your keys are complex objects or arrays of complex objects. See the
* {@link serializeKeys} property documentation for more details.
*/
export declare class DataMap<K = any, V = any, T = any> {
_cv: ICollectionView<T>;
_keyPath: string;
_displayPath: string;
_sortByVal: boolean;
_editable: boolean;
_useFilter: boolean;
private _map;
private _serK;
private _search;
/**
* Initializes a new instance of the {@link DataMap} class.
*
* @param itemsSource An array or {@link ICollectionView} that contains the items to map.
* @param selectedValuePath The name of the property that contains the keys (data values).
* @param displayMemberPath The name of the property to use as the visual representation of the items.
*/
constructor(itemsSource: any, selectedValuePath?: string, displayMemberPath?: string);
/**
* Gets or sets a value that determines whether grid controls should
* use mapped (display) or raw (key) values when sorting data in columns
* that use this {@link DataMap}.
*
* The default value for this property is <b>true</b>.
*/
sortByDisplayValues: boolean;
/**
* Gets or sets a value indicating whether key values are converted to strings before use.
*
* The default value is true.
*
* This property is set to true by default, which means that for example the keys 123 (number) and
* ‘123’ (string), two Date objects defining the same date/time, and two different arrays of
* primitive values (like [1,2,3]), are treated as the equal key pairs and mapped to the same value.
*
* If to set this property to false, the keys equality will be determined as in the native Map class,
* that is using the triple-equality (===) operator. This mode is useful if your keys are objects
* or arrays of objects.
* Note that in this case DataMap uses the native browser’s Map implementation. Some old mobile
* browsers, as well as IE9/10, don’t implement the Map interface. In this case DataMap will use
* its own array based implementation, which can bring serious performance penalties in case
* of big data arrays.
*/
serializeKeys: boolean;
/**
* Gets the {@link ICollectionView} object that contains the map data.
*/
readonly collectionView: ICollectionView<T>;
/**
* Gets the name of the property to use as a key for the item (data value).
*/
readonly selectedValuePath: string;
/**
* Gets the name of the property to use as the visual representation of the item.
*/
readonly displayMemberPath: string;
/**
* Gets the item that corresponds to a given key.
*
* @param key The key of the item to retrieve.
*/
getDataItem(key: K): V;
/**
* Gets the display value that corresponds to a given key.
*
* @param key The key of the item to retrieve.
*/
getDisplayValue(key: K): string;
/**
* Gets the key that corresponds to a given display value.
*
* @param displayValue The display value of the item to retrieve.
* @param html Whether to convert the lookup values from HTML to plain text.
*/
getKeyValue(displayValue: string, html?: boolean): K;
/**
* Gets an array with all of the display values on the map.
*
* @param dataItem Data item for which to get the display items.
* This parameter is optional. If not provided, all possible display
* values should be returned.
*/
getDisplayValues(dataItem?: V): string[];
/**
* Gets an array with all of the items that is filtered.
*
* @param dataItem Data item for which to filter.
* This parameter is optional. If not provided, all items of the collection view
* should be returned.
*/
getFilteredItems(dataItem?: V): any[];
/**
* Gets or sets a value that determines whether the {@link DataMap} allows filter by items instead of display values.
*
* The default value for this property is <b>false</b>.
*/
useFilter: boolean;
/**
* Gets an array with all of the keys on the map.
*/
getKeyValues(): K[];
/**
* Gets or sets a value that indicates whether users should be allowed to enter
* values that are not present on the {@link DataMap}.
*
* In order for a {@link DataMap} to be editable, the {@link selectedValuePath} and
* {@link displayMemberPath} must be set to the same value.
*/
isEditable: boolean;
/**
* Gets or sets a callback used to determine if a display value matches a search string
* typed by a user in the data map combo-box.
*
* If the callback is not specified, search is performed based on the
* {@link FlexGrid.caseSensitiveSearch} property value. By specifying this function,
* you can provide an arbitrary logic to determine a matching value.
*
* If the callback is specified, it's called for each data map's lookup list value, until
* it returns true for the matched text.
*/
search: ITextSearch | null | undefined;
/**
* Occurs when the map data changes.
*/
readonly mapChanged: Event<DataMap<any, any, any>, EventArgs>;
/**
* Raises the {@link mapChanged} event.
*/
onMapChanged(e?: EventArgs): void;
private _indexOf;
}
/**
* Represents a rectangular group of cells defined by two row indices and
* two column indices.
*/
export declare class CellRange {
_row: number;
_col: number;
_row2: number;
_col2: number;
/**
* Initializes a new instance of the {@link CellRange} class.
*
* @param r The index of the first row in the range (defaults to -1).
* @param c The index of the first column in the range (defaults to -1).
* @param r2 The index of the last row in the range (defaults to <b>r</b>).
* @param c2 The index of the last column in the range (defaults to <b>c</b>).
*/
constructor(r?: number, c?: number, r2?: number, c2?: number);
/**
* Initializes an existing {@link CellRange}.
*
* @param r The index of the first row in the range (defaults to -1).
* @param c The index of the first column in the range (defaults to -1).
* @param r2 The index of the last row in the range (defaults to <b>r</b>).
* @param c2 The index of the last column in the range (defaults to <b>c</b>).
*/
setRange(r?: number, c?: number, r2?: number, c2?: number): void;
/**
* Gets or sets the index of the first row in this range.
*/
row: number;
/**
* Gets or sets the index of the first column in this range.
*/
col: number;
/**
* Gets or sets the index of the second row in this range.
*/
row2: number;
/**
* Gets or sets the index of the second column in this range.
*/
col2: number;
/**
* Creates a copy of this range.
*/
clone(): CellRange;
/**
* Copies an existing cell range into this one.
*
* @param rng {@link CellRange} to copy into this one.
*/
copy(rng: CellRange): void;
/**
* Gets the number of rows in this range.
*/
readonly rowSpan: number;
/**
* Gets the number of columns in this range.
*/
readonly columnSpan: number;
/**
* Gets the index of the top row in this range.
*/
readonly topRow: number;
/**
* Gets the index of the bottom row in this range.
*/
readonly bottomRow: number;
/**
* Gets the index of the leftmost column in this range.
*/
readonly leftCol: number;
/**
* Gets the index of the rightmost column in this range.
*/
readonly rightCol: number;
/**
* Checks whether this range contains valid row and column indices
* (row and column values are zero or greater).
*/
readonly isValid: boolean;
/**
* Checks whether this range corresponds to a single cell.
*/
readonly isSingleCell: boolean;
/**
* Checks whether this range contains another range or a specific cell.
*
* @param r The {@link CellRange} or row index to find.
* @param c The column index (required if the r parameter is not a {@link CellRange} object).
*/
contains(r: any, c?: number): boolean;
/**
* Checks whether this range contains a given row.
*
* @param r The index of the row to find.
*/
containsRow(r: number): boolean;
/**
* Checks whether this range contains a given column.
*
* @param c The index of the column to find.
*/
containsColumn(c: number): boolean;
/**
* Checks whether this range intersects another range.
*
* @param rng The {@link CellRange} object to check.
*/
intersects(rng: CellRange): boolean;
/**
* Checks whether this range intersects the rows in another range.
*
* @param rng The {@link CellRange} object to check.
*/
intersectsRow(rng: CellRange): boolean;
/**
* Checks whether this range intersects the columns in another range.
*
* @param rng The {@link CellRange} object to check.
*/
intersectsColumn(rng: CellRange): boolean;
/**
* Gets the rendered size of this range.
*
* @param p The {@link GridPanel} object that contains this range.
* @return A {@link Size} object that represents the sum of row heights and column widths in this range.
*/
getRenderSize(p: GridPanel): Size;
/**
* Checks whether this range equals another range.
*
* @param rng The {@link CellRange} object to compare to this range.
*/
equals(rng: CellRange): boolean;
/**
* Returns a new {@link CellRange} that represents the union of
* this range and another given range.
*
* @param rng {@link CellRange} to combine with this range.
* @return A {@link CellRange} object that represents the union of
* this range and the given range, or this range if the range to
* combine with is null.
*/
combine(rng: CellRange): CellRange;
/**
* Returns a string representing this {@link CellRange}.
*/
toString(): string;
}
/**
* Specifies constants that define the type of cell in a {@link GridPanel}.
*/
export declare enum CellType {
/** Unknown or invalid cell type. */
None = 0,
/** Regular data cell. */
Cell = 1,
/** Column header cell. */
ColumnHeader = 2,
/** Row header cell. */
RowHeader = 3,
/** Top-left cell (intersection between row headers and column headers). */
TopLeft = 4,
/** Column footer cell. */
ColumnFooter = 5,
/** Bottom left cell (intersection between row headers and column footers). **/
BottomLeft = 6
}
/**
* Represents a logical part of the grid, such as the column headers, row headers,
* and scrollable data part.
*/
export declare class GridPanel {
private _g;
private _ct;
private _e;
private _rows;
private _cols;
private _offsetY;
private _activeCell;
private _docRange;
private _rng;
private _recycle;
_vrb: CellRange;
_vru: CellRange;
_uid: string;
static readonly _INDEX_KEY: string;
static readonly _HTML_CELL: string;
/**
* Initializes a new instance of the {@link GridPanel} class.
*
* @param g The {@link FlexGrid} object that owns the panel.
* @param cellType The type of cell in the panel.
* @param rows The rows displayed in the panel.
* @param cols The columns displayed in the panel.
* @param host The HTMLElement that hosts the cells in the control.
*/
constructor(g: FlexGrid, cellType: CellType, rows: RowCollection, cols: ColumnCollection, host: HTMLElement);
/**
* Gets the active cell in this panel.
*/
readonly activeCell: HTMLElement | null;
/**
* Gets the grid that owns the panel.
*/
readonly grid: FlexGrid;
/**
* Gets the type of cell contained in the panel.
*/
readonly cellType: CellType;
/**
* Gets a {@link CellRange} that indicates the range of cells currently visible on the panel.
*/
readonly viewRange: CellRange;
/**
* Gets the total width of the content in the panel.
*/
readonly width: number;
/**
* Gets the total height of the content in this panel.
*/
readonly height: number;
/**
* Gets the panel's row collection.
*/
readonly rows: RowCollection;
/**
* Gets the panel's column collection.
*/
readonly columns: ColumnCollection;
/**
* Gets the value stored in a cell in the panel.
*
* @param r The row index of the cell.
* @param c The index, name, or binding of the column that contains the cell.
* @param formatted Whether to format the value for display.
*/
getCellData(r: number, c: number | string, formatted: boolean): any;
_getCellData(r: number, c: number, formatted: boolean): any;
/**
* Sets the content of a cell in the panel.
*
* @param r The index of the row that contains the cell.
* @param c The index, name, or binding of the column that contains the cell.
* @param value The value to store in the cell.
* @param coerce Whether to change the value automatically to match the column's data type.
* @param invalidate Whether to invalidate the grid to show the change.
* @param isMapKeyValue value passed is already key value of dataMap, don't need re-find.
* @return Returns true if the value is stored successfully, false otherwise (failed cast).
*/
setCellData(r: number, c: number | string, value: any, coerce?: boolean, invalidate?: boolean, isMapKeyValue?: boolean): boolean;
_getRowData(r: number): any;
_getSpecialData(r: number, row: Row, c: number, col: Column, bindingCol: any, isGroupRow: boolean, group: CollectionViewGroup, originalValue: any): any;
/**
* Gets a cell's bounds in viewport coordinates.
*
* The returned value is a {@link Rect} object which contains the position and dimensions
* of the cell in viewport coordinates.
* The viewport coordinates are the same as those used by the
* <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect"
* target="_blank">getBoundingClientRect</a> method.
*
* @param r The index of the row that contains the cell.
* @param c The index, name, or binding of the column that contains the cell.
* @param raw Whether to return the rectangle in raw panel coordinates as opposed to viewport coordinates.
*/
getCellBoundingRect(r: number, c: number | string, raw?: boolean): Rect;
/**
* Gets the element that represents a cell within this {@link GridPanel}.
*
* If the cell is not currently in view, this method returns null.
*
* @param r The index of the row that contains the cell.
* @param c The index, name, or binding of the column that contains the cell.
*/
getCellElement(r: number, c: number | string): HTMLElement;
/**
* Gets a {@link SelectedState} value that indicates the selected state of a cell.
*
* @param r Row index of the cell to inspect.
* @param c The index, name, or binding of the column that contains the cell.
* @param rng {@link CellRange} that contains the cell to inspect.
*/
getSelectedState(r: number, c: number | string, rng?: CellRange): SelectedState;
/**
* Gets the host element for the panel.
*/
readonly hostElement: HTMLElement;
/**
* Checks whether a given CellRange is valid for this panel's row and column collections.
*
* @param rng Range to check.
*/
isRangeValid(rng: CellRange): boolean;
/**
* Returns the next visible row present in the panel including the start position.
* return -1 if no visible row is present
*
* @param start Starting index of row.
*/
getNextVisibleRow(start?: number): number;
/**
* Returns the last visible row present in the panel upto and including the end position.
* return -1 if no visible row is present
*
* @param end Last index of row to check.
*/
getLastVisibleRow(end?: number): number;
/**
* Returns the next visible column present in the panel including the start position.
* return -1 if no visible column is present
*
* @param start Starting index of column.
*/
getNextVisibleColumn(start?: number): number;
/**
* Returns the last visible column present in the panel upto and including the end position.
* return -1 if no visible column is present
*
* @param end Last index of column to check.
*/
getLastVisibleColumn(end?: number): number;
_toIndex(c: number | string): number;
_getAdjustedSelection(sel: CellRange): CellRange;
_getOffsetY(): number;
_updateContent(recycle: boolean, state: boolean, offsetY: number, columnIndexOffset?: number): HTMLElement;
_updateCells(state: boolean, ctr: number, columnIndexOffset?: number): void;
_scanAndRemoveExtraCells(ctr: any): void;
_clearCells(): void;
_reorderCells(rngNew: CellRange, rngOld: CellRange): void;
_createRange(host: Element, start: number, end: number): Range;
_renderRowHdrCell(row: HTMLElement, r: number, value: any): number;
_renderRow(r: number, rng: CellRange, state: boolean, ctr: number, columnIndexOffset?: number): number;
_allowSetAriaOwns(ariaOwnsStr: string, row: HTMLElement): boolean;
_renderCell(row: HTMLElement, r: number, c: number, rng: CellRange, state: boolean, ctr: number, columnIndexOffset?: number): number;
_removeExtraCells(row: HTMLElement, count: number): void;
_getViewRange(): CellRange;
_getFrozenPos(): Point;
dispose(): void;
}
/**
* Provides arguments for {@link CellRange} events.
*/
export declare class CellRangeEventArgs extends CancelEventArgs {
_p: GridPanel;
_rng: CellRange;
_data: any;
/**
* Initializes a new instance of the {@link CellRangeEventArgs} class.
*
* @param p {@link GridPanel} that contains the range.
* @param rng Range of cells affected by the event.
* @param data Data related to the event.
*/
constructor(p: GridPanel, rng: CellRange, data?: any);
/**
* Gets the {@link GridPanel} affected by this event.
*/
readonly panel: GridPanel;
/**
* Gets the {@link CellRange} affected by this event.
*/
readonly range: CellRange;
/**
* Gets the index of the row affected by this event.
*
* To get the {@link Row} object, use the {@link getRow} method.
*/
readonly row: number;
/**
* Gets the index of the column affected by this event.
*
* To get the {@link Column} object, use the {@link getColumn} method.
*/
readonly col: number;
/**
* Gets or sets the data associated with the event.
*/
data: any;
/**
* Gets the {@link Row} affected by this event.
*
* To get the row index, use the {@link row} property.
*/
getRow(): Row;
/**
* Gets the {@link Column} affected by this event.
*
* To get the column index, use the {@link col} property.
*
* @param binding Whether to get the column by index or by binding.
* This parameter only makes a difference in grids that have multiple
* rows per data item (like the {@link MultiRow} grid).
*/
getColumn(binding?: boolean): Column;
}
/**
* Provides arguments for the {@link FlexGrid.formatItem} event.
*/
export declare class FormatItemEventArgs extends CellRangeEventArgs {
_cell: HTMLElement;
_updateContent: boolean;
/**
* Initializes a new instance of the {@link FormatItemEventArgs} class.
*
* @param p {@link GridPanel} that contains the range.
* @param rng Range of cells affected by the event.
* @param cell Element that represents the grid cell to be formatted.
* @param updateContent Whether to set the cell content in addition to its dimensions and styles.
*/
constructor(p: GridPanel, rng: CellRange, cell: HTMLElement, updateContent?: boolean);
/**
* Gets a reference to the element that represents the grid cell to be formatted.
*/
readonly cell: HTMLElement;
/**
* Gets a value that determines whether the handler should set the cell content
* in addition to its dimensions and styles.
*/
readonly updateContent: boolean;
}
/**
* Provides arguments for the {@link FlexGrid.cellEditEnding} event.
*/
export declare class CellEditEndingEventArgs extends CellRangeEventArgs {
_stayInEditMode: boolean;
_refresh: boolean;
_previousData: any;
/**
* Gets or sets whether the cell should remain in edit mode
* instead of finishing the edits.
*/
stayInEditMode: boolean;
/**
* Gets or sets a value that determines whether the grid should
* refresh all its contents after the edits are done.
*/
refresh: boolean;
/**
* Gets or sets original data associated with the event.
*/
previousData: any;
}
export declare function softInput(): typeof mInput;
export declare function softDetailRow(): any;
export declare function softMultirow(): any;
export declare function softTransposed(): any;
export declare function softTransposedMultirow(): any;
export declare function softRestCV(): any;
export declare function softODataCV(): any;
export declare function softGridInteropBase(): any;
/**
* Specifies constants that define the selection behavior.
*/
export declare enum SelectionMode {
/** The user cannot select cells using the mouse or keyboard. */
None = 0,
/** The user can select only a single cell at a time. */
Cell = 1,
/** The user can select contiguous blocks of cells. */
CellRange = 2,
/** The user can select a single row at a time. */
Row = 3,
/** The user can select contiguous rows. */
RowRange = 4,
/** The user can select non-contiguous rows by ctrl+clicking. */
ListBox = 5,
/** The user can select multiple ranges by ctrl+clicking and dragging the mouse. */
MultiRange = 6
}
/**
* Specifies constants that represent the selected state of a cell.
*/
export declare enum SelectedState {
/** The cell is not selected. */
None = 0,
/** The cell is selected but is not the active cell. */
Selected = 1,
/** The cell is selected and is the active cell. */
Cursor = 2,
/** The cell is active cell but not in a selected state. */
Active = 3
}
/**
* Specifies constants that represent a type of movement for the selection.
*/
export declare enum SelMove {
/** Do not change the selection. */
None = 0,
/** Select the next visible cell. */
Next = 1,
/** Select the previous visible cell. */
Prev = 2,
/** Select the first visible cell in the next page. */
NextPage = 3,
/** Select the first visible cell in the previous page. */
PrevPage = 4,
/** Select the first visible cell. */
Home = 5,
/** Select the last visible cell. */
End = 6,
/** Select the next visible cell skipping columns and rows if necessary. */
NextCell = 7,
/** Select the previous visible cell skipping columns and rows if necessary. */
PrevCell = 8,
/** Select the next visible and editable cell skipping columns and rows if necessary. */
NextEditableCell = 9,
/** Select the previous visible cell skipping columns and rows if necessary. */
PrevEditableCell = 10
}
/**
* Handles the grid's selection.
*/
export declare class _SelectionHandler {
protected _g: FlexGrid;
private _sel;
private _xSel;
private _e;
private _mode;
private _collectionChangedHandler;
/**
* Initializes a new instance of the {@link _SelectionHandler} class.
*
* @param g {@link FlexGrid} that owns this {@link _SelectionHandler}.
*/
constructor(g: FlexGrid);
/**
* Gets or sets the current selection mode.
*/
selectionMode: SelectionMode;
/**
* Gets or sets the current selection.
*/
selection: CellRange;
/**
* Gets an array with {@link CellRange} objects that are part of
* the grid's extended selection.
*/
readonly extendedSelection: ObservableArray<CellRange>;
/**
* Gets the {@link CellRangeEventArgs} related to current selection
*/
readonly cellRangeEventArgs: CellRangeEventArgs;
/**
* Selects a cell range and optionally scrolls it into view.
*
* @param rng Range to select (or index of the row to select).
* @param show Whether to scroll the new selection into view (or index/name of the column to select).
* @param force Whether to update the selection even if the {@link selectionChanging}
* @param panel The GridPanel to the selected range belongs {@link GridPanel}
* event cancels the change.
*/
select(rng: CellRange | number, show?: boolean | number | string, force?: boolean, panel?: GridPanel): boolean;
/**
* Moves the selection by specified amount in the vertical and horizontal direction
* inside the selected panel
* @param rowMove Number to rows to move selection.
* @param colMove Number to columns to move selection.
*/
moveSelectionWithinSelectedPanel(rowMove: number, colMove: number): void;
/**
* Moves the selection by a specified amount in the vertical and horizontal directions.
* @param rowMove How to move the row selection.
* @param colMove How to move the column selection.
* @param extend Whether to extend the current selection or start a new one.
*/
moveSelection(rowMove: SelMove, colMove: SelMove, extend: boolean): void;
_getNextColumnCell(r: number, c: number, move: SelMove, pageSize?: number): any;
_getNextRowCell(r: number, c: number, move: SelMove, pageSize?: number): any;
_setSelectionMode(value: SelectionMode): void;
_adjustSelection(range: CellRange, mode: SelectionMode, force?: boolean): void;
_expandSelection(): void;
_deselectRange(rng: CellRange): boolean;
private _expandSelectedRows;
private _expandSelectionRange;
private _selectRows;
private _showSelection;
private _showHeaderSelection;
private _adjustReferenceCell;
dispose(): void;
}
/**
* Specifies flags that represent the state of a grid row or column.
*/
export declare enum RowColFlags {
/** The row or column is visible. */
Visible = 1,
/** The row or column can be resized. */
AllowResizing = 2,
/** The row or column can be dragged to a new position with the mouse. */
AllowDragging = 4,
/** The row or column can contain merged cells. */
AllowMerging = 8,
/** The column can be sorted by clicking its header with the mouse. */
AllowSorting = 16,
/** The column was generated automatically. */
AutoGenerated = 32,
/** The group row is collapsed. */
Collapsed = 64,
/** The row has a parent group that is collapsed. */
ParentCollapsed = 128,
/** The row or column is selected. */
Selected = 256,
/** The row or column is read-only (cannot be edited). */
ReadOnly = 512,
/** Cells in this row or column contain HTML text. */
HtmlContent = 1024,
/** Cells in this row or column may contain wrapped text. */
WordWrap = 2048,
/** Cells in this row or column may contain wrapped text. */
MultiLine = 4096,
/** Cells in this column have templates. */
HasTemplate = 8192,
/** Default settings for new rows. */
RowDefault = 3,
/** Default settings for new columns. */
ColumnDefault = 23
}
/**
* An abstract class that serves as a base for the {@link Row} and {@link Column} classes.
*/
export declare class RowCol<T = any> {
protected _type: DataType;
protected _align: string;
protected _inpType: string;
protected _mask: string;
protected _maxLen: number;
protected _required: boolean;
protected _fmt: string;
protected _map: DataMap;
protected _mapEditor: DataMapEditor;
protected _ddCssClass: string;
protected _cssClass: string;
protected _cssClassAll: string;
protected _szMin: number;
protected _szMax: number;
protected _f: RowColFlags;
_sz: number;
_list: RowColCollection;
_pos: number;
_antipos: number;
_idx: number;
_idxVis: number;
_idxData: number;
_binding: Binding;
_bindingSort: Binding;
/**
* Gets or sets the name of the property the column is bound to.
*
* The default value for this property is **null**, which means
* the column is not bound to any data fields.
*
* This property is set automatically for auto-generated columns
* (see {@link FlexGrid.autoGenerateColumns}).
*/
binding: string | null;
/**
* Gets or sets the name of the property to use when sorting this column.
*
* Use this property in cases where you want the sorting to be performed
* based on values other than the ones specified by the {@link binding} property.
*
* The default value for this property is **null**, which causes the grid to
* use the value of the {@link binding} property to sort the column.
*/
sortMemberPath: string | null;
/**
* Gets or sets the type of value stored in the column or row.
*
* Values are coerced into the proper type when editing the grid.
*
* The default value for this property is **null**, which causes
* the grid not to perform any data type coercion.
*
* This property is set automatically for auto-generated columns
* (see {@link FlexGrid.autoGenerateColumns}).
*/
dataType: DataType | null;
/**
* Gets or sets the "type" attribute of the HTML input element used to
* edit values in this column or row.
*
* The default value for this property is **null**, which causes the
* grid to use the type "tel" for numeric columns, and "text" for all
* other non-boolean column types.
*
* The "tel" input type causes mobile devices to show a numeric keyboard
* that includes a negative sign and a decimal separator.
*
* Use this property to change the default setting if the default does not
* work well for the current culture, device, or application.
* In these cases, try setting the property to "number" or simply "text."
*/
inputType: string | null;
/**
* Gets or sets a mask to use while editing values in this column or row.
*
* The format used to define the mask is the same used by the
* {@link wijmo.input.InputMask} control.
*
* If specified, the mask must be compatible with the value of the
* {@link format} property. For example, the mask '99/99/9999' can be used
* for entering dates formatted as 'MM/dd/yyyy'.
*
* The default value for this property is **null**, which means any
* character is accepted at any position.
*/
mask: string | null;
/**
* Gets or sets the maximum number of characters that the can
* be entered into cells in this column or row.
*
* The default value for this property is **null**, which
* allows entries with any number of characters.
*/
maxLength: number | null;
/**
* Gets or sets the horizontal alignment of cells in the column or row.
*
* The default value for this property is **null**, which causes the grid
* to select the alignment automatically based on the column's {@link dataType}
* (numbers are right-aligned, Boolean values are centered, and other types
* are left-aligned).
*
* If you want to override the default alignment, set this property
* to 'left', 'right', 'center', or 'justify'.
*/
align: string | null;
/**
* Gets or sets the format string used to convert raw values into
* display values for the column or row (see {@link Globalize}).
*
* The default value for this property is **null**, which causes
* the grid to use default formats that depend on the data type.
*/
format: string | null;
/**
* Gets or sets the {@link DataMap} used to convert raw values into display
* values for the column or row.
*
* By default, data-mapped cells have drop-down lists that can be used for
* quick editing. You can change the type of editor by setting the
* column's {@link dataMapEditor} property.
*
* The default value for this property is **null**.
*/
dataMap: DataMap | null;
/**
* Gets or sets a value that indicates the type of editor to use when
* editing data-mapped cells in this column or row.
*
* The default value for this property is {@link DataMapEditor.DropDownList},
* which adds drop-down buttons to cells to columns that have a {@link dataMap}
* and are not read-only.
*
* Clicking on the drop-down buttons causes the grid to show a list where
* users can select the value for the cell.
*
* The {@link DataMapEditor.RadioButtons} setting causes the grid to
* show radio buttons for each option. The buttons can be clicked with
* the mouse or keyboard (by pressing each option's initial letter or
* the space key to cycle through the options.)
*
* Note that drop-down lists are available only if the **wijmo.input.ListBox**
* class is loaded/imported by the application.
*/
dataMapEditor: DataMapEditor;
showDropDown: boolean;
/**
* Gets or sets a CSS class name to add to drop-downs in this column or row.
*
* The drop-down buttons are shown only if the column has a {@link dataMap}
* set and is editable. Clicking on the drop-down buttons causes the grid
* to show a list where users can select the value for the cell.
*
* Note that drop-down lists are available only if the **wijmo.input.ListBox**
* class is loaded/imported by the application.
*
* The default value for this property is **null**.
*/
dropDownCssClass: string | null;
/**
* Gets or sets a value that indicates whether the column or row
* is visible.
*
* The default value for this property is **true**.
*/
visible: boolean;
/**
* Gets a value that indicates whether the column or row is
* visible and not collapsed.
*
* This property is read-only. To change the visibility of a
* column or row, use the {@link visible} property instead.
*/
readonly isVisible: boolean;
/**
* Gets the position of the column or row in pixels.
*/
readonly pos: number;
/**
* Gets the index of the column or row in the parent collection.
*/
readonly index: number;
/**
* Gets the index of the column or row in the parent collection
* ignoring invisible elements ({@link isVisible}).
*/
readonly visibleIndex: number;
/**
* Gets or sets the size of the column or row.
*
* Setting this property to null or negative values causes
* the element to use the parent collection's default size.
*/
size: number | null;
/**
* Gets the render size of the column or row.
*
* This property accounts for visibility, default size,
* and min and max sizes.
*/
readonly renderSize: number;
/**
* Gets or sets a value that indicates whether the user can resize
* the column or row with the mouse.
*
* The default value for this property is **true**.
*/
allowResizing: boolean;
/**
* Gets or sets a value that indicates whether the user can move
* the column or row to a new position with the mouse.
*
* The default value for this property is **true**.
*/
allowDragging: boolean;
/**
* Gets or sets a value that indicates whether cells in the
* column or row can be merged.
*
* The default value for this property is **false**.
*/
allowMerging: boolean;
/**
* Gets or sets a value that indicates whether the column or row
* is selected.
*
* The default value for this property is **false**.
*/
isSelected: boolean;
/**
* Gets or sets a value that indicates whether cells in the
* column or row can be edited.
*
* The default value for this property is **false**.
*/
isReadOnly: boolean;
/**
* Gets or sets a value that determines whether values in this
* column or row are required.
*
* The default value for this property is to **null**, which
* means dates, booleans, and numeric values are required,
* but non-masked string columns may contain empty strings.
*
* When set to true, values are required and empty strings are
* not allowed.
*
* When set to false, null values and empty strings are allowed.
*/
isRequired: boolean | null;
/**
* Gets or sets a value that indicates whether cells in this column or row
* contain HTML content rather than plain text.
*
* This property only applies to regular cells. Row and column header cells
* contain plain text by default. If you want to display HTML in column or
* row headers, you must use the {@link FlexGrid.formatItem} event and set
* the cell's innerHTML content in code.
*
* Unless the column's {@link isReadOnly} property is set to true, cells
* that show HTML can be edited. By default, the editor will show HTML
* markup and users will be able to change it. If the column has a
* {@link dataMap}, however, the drop-down list will show formatted
* items and the editor will show plain text instead of HTML markup.
*
* The default value for this property is **false**.
*/
isContentHtml: boolean;
/**
* Gets or sets a value that indicates whether the content of cells in
* this column or row should wrap to fit the available column width.
*
* The default value for this property is **false**.
*/
wordWrap: boolean;
/**
* Gets or sets a value that indicates whether the content of cells in
* this column or row should wrap at new line characters (\n).
* The default value for this property is **false**.
*/
multiLine: boolean;
/**
* Gets or sets a CSS class name to use when rendering
* data (non-header) cells in the column or row.
*
* The default value for this property is **null**.
*/
cssClass: string | null;
/**
* Gets or sets a CSS class name to use when rendering
* all cells (data and headers) in the column or row.
*
* This property is also supported on the parent column group header.
*
* The default value for this property is **null**.
*/
cssClassAll: string | null;
/**
* Gets the {@link FlexGrid} that owns this column or row.
*/
readonly grid: FlexGrid;
/**
* Gets the {@link ICollectionView} bound to this column or row.
*/
readonly collectionView: ICollectionView<T>;
/**
* Marks the owner list as dirty and refreshes the owner grid.
*/
onPropertyChanged(): void;
/**
* Occurs when the value of the {@link grid} property changes.
*/
readonly gridChanged: Event<RowCol<any>, EventArgs>;
/**
* Raises the {@link gridChanged} event.
*/
onGridChanged(e?: EventArgs): void;
_setList(list: RowColCollection): void;
_getFlag(flag: RowColFlags): boolean;
_setFlag(flag: RowColFlags, value: boolean, quiet?: boolean): boolean;
}
/**
* Represents a function that takes an {@link ICellTemplateContext}
* object and returns an HTML string to be used as content for a
* cell.
*
* Alternatively, the function may modify the content of the cell element
* directly and return null to indicate the cell element should not be
* modified.
*
* @param ctx {@link ICellTemplateContext} object that contains information about the cell.
* @param cell **HTMLElement** that represents the cell.
* @returns A template string built using the context, or null to indicate the function
* updated the cell element and it should not be modified by the grid.
*/
export declare type ICellTemplateFunction =
/**
* @param ctx {@link ICellTemplateContext} object that contains information about the cell.
* @param cell **HTMLElement** that represents the cell.
* @returns A template string built using the context, or null to indicate the function
* updated the cell element and it should not be modified by the grid.
*/
(ctx: ICellTemplateContext, cell?: HTMLElement) => string | null;
/**
* Represents a context used for generating HTML strings to
* be used as content for a cell.
*/
export interface ICellTemplateContext {
/** {@link Row} that contains the cell. */
row: Row;
/** {@link Column} that contains the cell. */
col: Column;
/** Data item bound to the cell. */
item: any;
/** Raw value of the property bound to the cell. */
value: any;
/** Formatted/mapped value of the property bound to the cell. */
text: string;
}
/**
* Represents a column on the grid.
*/
export declare class Column extends RowCol {
private static _ctr;
private _hdr;
private _plholder;
private _name;
private _agg;
private _quickSize;
private _descById;
private _sortOrder;
_edt: _CustomEditor;
_tpl: string | ICellTemplateFunction;
_szStar: string;
_hash: string;
_uid: string;
/**
* Initializes a new instance of the {@link Column} class.
*
* @param options Initialization options for the column.
*/
constructor(options?: any);
/**
* Gets or sets the name of the column.
*
* The column name can be used to retrieve the column using the
* {@link FlexGrid.getColumn} method.
*
* This property is especially useful when dealing with unbound
* columns or multiple columns with the same {@link binding}
* value.
*
* The default value for this property is **null**.
*/
name: string | null;
/**
* Gets or sets the width of the column.
*
* Column widths may be positive numbers (sets the column width in pixels),
* null or negative numbers (uses the collection's default column width), or
* strings in the format '{number}*' (star sizing).
*
* The star-sizing option performs a XAML-style dynamic sizing where column
* widths are proportional to the number before the star. For example, if
* a grid has three columns with widths "100", "*", and "3*", the first column
* will be 100 pixels wide, the second will take up 1/4th of the remaining
* space, and the last will take up the remaining 3/4ths of the remaining space.
*
* Star-sizing allows you to define columns that automatically stretch to fill
* the width available. For example, set the width of the last column to "*"
* and it will automatically extend to fill the entire grid width so there's
* no empty space. You may also want to set the column's