*
* The code sets the autoGenerateColumns property to false, then
* sets the columns property, and finally sets the itemsSource
* property. This order is important, it prevents the grid from automatically
* generating the columns.
*/
export declare const FlexGrid: WjForwardRefExoticComponent;
export declare type RowColInputs = BaseInputs & {
align?: string | null;
allowDragging?: boolean;
allowMerging?: boolean;
allowResizing?: boolean;
binding?: string | null;
cssClass?: string | null;
cssClassAll?: string | null;
dataMap?: wjcGrid.DataMap | string[] | null;
dataMapEditor?: wjcGrid.DataMapEditor | string;
dataType?: DataType | string | null;
dropDownCssClass?: string | null;
format?: string | null;
inputType?: string | null;
isContentHtml?: boolean;
isReadOnly?: boolean;
isRequired?: boolean | null;
isSelected?: boolean;
isVisible?: boolean;
mask?: string | null;
maxLength?: number | null;
multiLine?: boolean;
size?: number | null;
sortMemberPath?: string | null;
visible?: boolean;
wordWrap?: boolean;
placeholder?: string | null;
};
export declare type RowColEvents = {
gridChanged?: IEventHandler;
};
export declare const RowColMeta: {
inputs: string[];
events: string[];
};
export declare type FlexGridColumnInputs = RowColInputs & {
aggregate?: Aggregate | string;
allowSorting?: boolean;
cellTemplate?: string | wjcGrid.ICellTemplateFunction | null;
describedById?: string | null;
editor?: Control | null;
header?: string | null;
maxWidth?: number | null;
minWidth?: number | null;
name?: string | null;
quickAutoSize?: boolean | null;
sortOrder?: wjcGrid.SortOrder | string | null;
width?: any | null;
children?: any;
};
export declare type FlexGridColumnEvents = RowColEvents & {};
export declare const FlexGridColumnMeta: {
inputs: string[];
events: string[];
};
export declare type FlexGridColumnProps = FlexGridColumnInputs & FlexGridColumnEvents;
export declare type FlexGridColumnRef = WjRef;
/**
* React component for the {@link wijmo.grid.Column} class.
*
* The flex-grid-column component should be contained in
* a {@link wijmo.react.grid.FlexGrid} component.
*
* The flex-grid-column component may contain
* a {@link wijmo.react.grid.FlexGridCellTemplate} child component.
*
* The component supports all properties and events of the pure JavaScript {@link wijmo.grid.Column} class it represents.
*
* The component includes an initialized event that is raised when the control is initialized after it is added to the page.
* You can use this event to perform further initialization in addition to setting properties in JSX.
* The signature of the handler function is the same as any other Wijmo event handlers.
*/
export declare const FlexGridColumn: WjForwardRefExoticComponent;
export declare type FlexGridColumnGroupInputs = FlexGridColumnInputs & {
collapseTo?: string | string[];
columns?: wjcGrid.ColumnGroupCollection;
height?: number;
isCollapsed?: boolean;
};
export declare type FlexGridColumnGroupEvents = FlexGridColumnEvents & {};
export declare const FlexGridColumnGroupMeta: {
inputs: string[];
events: string[];
};
export declare type FlexGridColumnGroupProps = FlexGridColumnGroupInputs & FlexGridColumnGroupEvents;
export declare type FlexGridColumnGroupRef = WjRef;
/**
* React component for the {@link wijmo.grid.ColumnGroup} class.
*
* The flex-grid-column-group component should be contained in
* one of the following components:
* {@link wijmo.react.grid.FlexGrid}
* or {@link wijmo.react.grid.FlexGridColumnGroup}.
*
* The flex-grid-column-group component may contain
* the following child components:
* {@link wijmo.react.grid.FlexGridColumnGroup}
* and {@link wijmo.react.grid.FlexGridCellTemplate}.
*
* The component supports all properties and events of the pure JavaScript {@link wijmo.grid.ColumnGroup} class it represents.
*
* The component includes an initialized event that is raised when the control is initialized after it is added to the page.
* You can use this event to perform further initialization in addition to setting properties in JSX.
* The signature of the handler function is the same as any other Wijmo event handlers.
*/
export declare const FlexGridColumnGroup: WjForwardRefExoticComponent;
export declare type FlexGridCellTemplateInputs = BaseInputs & {
cellType?: CellTemplateType | string;
template?: CellTemplateRender;
autoSizeRows?: boolean;
};
export declare type FlexGridCellTemplateEvents = {};
export declare const FlexGridCellTemplateMeta: {
inputs: string[];
events: any[];
};
export declare type FlexGridCellTemplateProps = FlexGridCellTemplateInputs & FlexGridCellTemplateEvents;
export declare type FlexGridCellTemplateRef = WjRef;
/**
* React component for the {@link FlexGrid} cell templates.
*
* The FlexGridCellTemplate component defines a template for a certain
* cell type in {@link FlexGrid}. The template element must contain a cellType property that
* specifies the {@link wijmo.react.grid.CellTemplateType}. Depending on the template's cell type,
* the FlexGridCellTemplate element must be a child
* of either {@link wijmo.react.grid.FlexGrid}
* or {@link wijmo.react.grid.FlexGridColumn} components.
*
* Column-specific cell templates must be contained in FlexGridColumn
* components, and cells that are not column-specific (like row header or top left cells)
* must be contained in the FlexGrid component.
*
* The content of cells is defined using the templaterender prop, which receives
* a render function that should return a virtual element tree representing the cell content.
* The function has the context parameter where the data context of each certain cell is
* passed. This is an object with the col, row, and item properties,
* which refer to the {@link Column}, {@link Row}, and Row.dataItem objects pertaining to the cell.
*
* For cell types like Group and CellEdit, an additional value
* context property containing an unformatted cell value is provided.
*
* For example, here is a
* {@link FlexGrid} control with templates for row header cells and, regular
* and column header cells of the Country column:
*
* ```html
*
*
* context.row.index + 1 } />
* '...' } />
*
*
* {
* return
*
* {context.col.header}
*
* }
* }
* />
* {
* return
*
* {context.item.country}
*
* } }
* />
*
*
*
* ```
*
* The FlexGridCellTemplate directive supports the following properties:
*
*
*
cellType
*
* The CellTemplateType value defining the type of cell to which the template is applied.
*
*
autoSizeRows
*
* Indicates whether the cell template will increase grid's default row height
* to accomodate cells content. Defaults to true.
*
*
cellOverflow
*
* Defines the style.overflow property value for cells.
*
*
forceFullEdit
*
* For cell edit templates, indicates whether cell editing forcibly starts in full edit mode,
* regardless of how the editing was initiated. In full edit mode pressing cursor keys don't finish editing.
* Defaults to true.
*
*
*
* The cellType attribute takes any of the following enumerated values:
*
* Cell
*
* Defines a regular (data) cell template. Must be a child of the {@link wijmo.react.grid.FlexGridColumn} component.
* For example, this cell template shows flags in the cells of Country column:
*
* ```html
*
* {
* return
*
* {context.item.country}
*
* }
* }
* />
*
* ```
*
* If Group template is not provided for a hierarchical {@link FlexGrid} (that is, one with the childItemsPath property
* specified), non-header cells in group rows of
* this {@link Column} also use this template.
*
* CellEdit
*
* Defines a template for a cell in edit mode. Must be a child of the {@link wijmo.react.grid.FlexGridColumn} component.
* This cell type has an additional context.value property. It contains the
* original cell value before editing, and the updated value after editing.
*
* For example, here is a template that uses the Wijmo {@link InputNumber} control as an editor
* for the "Sales" column:
* ```html
*
* {
* return
* context.value = inpNum.value
* } />
* }
* }
* />
*
* ```
*
* ColumnHeader
*
* Defines a template for a column header cell. Must be a child of the {@link wijmo.react.grid.FlexGridColumn} component.
* For example, this template adds an image to the header of the "Country" column:
*
* ```html
*
* {
* return
*
* {context.col.header}
*
* }
* }
* />
*
* ```
*
* RowHeader
*
* Defines a template for a row header cell. Must be a child of the {@link wijmo.react.grid.FlexGrid} component.
* For example, this template shows row indices in the row headers:
*
* ```html
*
* context.row.index + 1 } />
*
* ```
*
* Note that this template is applied to a row header cell, even if it is in a row that is
* in edit mode. In order to provide an edit-mode version of a row header cell with alternate
* content, define the RowHeaderEdit template.
*
* RowHeaderEdit
*
* Defines a template for a row header cell in edit mode. Must be a child of the
* {@link wijmo.react.grid.FlexGrid} component. For example, this template shows dots in the header
* of rows being edited:
*
* ```html
*
* '...' } />
*
* ```
*
* Use the following RowHeaderEdit template to add the standard edit-mode indicator to cells where
* the RowHeader template applies:
*
* ```html
*
* '\u270e\ufe0e' } />
*
* ```
*
* TopLeft
*
* Defines a template for the top left cell. Must be a child of the {@link wijmo.react.grid.FlexGrid} component.
* For example, this template shows a down/right glyph in the top-left cell of the grid:
*
* ```html
*
* {
* return
* } }
* />
*
* ```
*
* GroupHeader
*
* Defines a template for a group header cell in a {@link GroupRow}. Must be a child of
* the {@link wijmo.react.grid.FlexGridColumn} component.
*
* The context.row property contains an instance of the GroupRow class. If the grouping comes
* from {@link CollectionView}, the context.item property references the {@link CollectionViewGroup} object.
*
* For example, this template uses a checkbox element as an expand/collapse toggle:
*
* ```html
*
* {
* return
*
* context.row.isCollapsed = e.target.checked as boolean
* } />
* {context.item.name} ({context.item.items.length} items)
*
* }
* }
* />
*
* ```
*
* Group
*
* Defines a template for a regular cell (not a group header) in a {@link GroupRow}. Must be a child of the
* {@link wijmo.react.grid.FlexGridColumn} component. This cell type has an additional context.value
* property. In cases where columns have the aggregate property specified, it contains the unformatted
* aggregate value.
*
* For example, this template shows aggregate's value and kind for group row cells in the "Sales"
* column:
*
* ```html
*
* {
* return
* Average: {wjcCore.Globalize.formatNumber(context.value, 'N0')}
*
* }
* }
* />
*
* ```
*
* ColumnFooter
*
* Defines a template for a regular cell in a columnFooters panel. Must be a child of the
* {@link wijmo.react.grid.FlexGridColumn} component. This cell type provides an additional context.value
* property available for binding that contains an aggregated cell value.
*
* For example, this template shows aggregate's value and kind for a footer cell in the "Sales"
* column:
*
* ```html
*
* {
* return
* Average: {wjcCore.Globalize.formatNumber(context.value, 'N0')}
*
* }
* }
* />
*
* ```
*
* BottomLeft
*
* Defines a template for the bottom left cells (at the intersection of the row header and column footer cells).
* Must be a child of the {@link wijmo.react.grid.FlexGrid} component.
* For example, this template shows a sigma glyph in the bottom-left cell of the grid:
*
* ```html
*
* Σ} />
*
* ```
*
* NewCellTemplate
*
* Defines a cell in a new row template. Must be a child of the {@link wijmo.react.grid.FlexGridColumn} component.
* Note that the context.item property is undefined for this type of a cell.
* For example, this cell template shows a placeholder in the Date column's cell in the "new row" item:
*
* ```html
*
* 'Enter a date here' } />
*
* ```
*/
export declare const FlexGridCellTemplate: WjForwardRefExoticComponent;
export declare class ReactFlexGridCellTemplate {
cellType: wjcInteropGrid.GridCellTemplateType;
template: any;
lastTempContextProp: any;
parent: any;
autoSizeRows: boolean;
constructor(parent: any, props: any);
initialize(options: any): void;
removeBinding(): void;
dispose(): void;
}
interface ICellTemplateInfoReact extends wjcInteropGrid.ICellTemplateInfo {
template: CellTemplateRender;
}
interface ICellRenderingInfoReact extends wjcInteropGrid.ICellRenderingInfo {
templateContext: ICellTemplateInfoReact;
}
export declare class DirectiveCellFactory extends wjcInteropGrid.DirectiveCellFactoryBase {
private readonly _renderedCells;
constructor(grid: wjcGrid.FlexGrid);
protected shouldInstantiate(cellInfo: wjcInteropGrid.ICellRenderingInfo): boolean;
protected renderTemplate(cellInfo: ICellRenderingInfoReact, initNew: boolean): void;
protected flushPendingUpdates(): void;
protected applyImmediately(cellInfo: wjcInteropGrid.ICellRenderingInfo): void;
protected flushPendingEvents(control: Control): void;
protected getEditorFocusFlag(): boolean;
protected setEditorFocusFlag(value: boolean): void;
protected disposeTemplate(cell: HTMLElement, templateCache: wjcInteropGrid.ICellTemplateCache, templateContext: ICellTemplateInfoReact): void;
protected clearCell(cell: HTMLElement): void;
protected canRender(tplCtx: any): boolean;
private _renderCell;
private _addRenderedCell;
private _removeRenderedCell;
private _reRenderCells;
protected checkHeight(cellInfo: wjcInteropGrid.ICellRenderingInfo): void;
}
export interface ICellTemplateContext {
row: wjcGrid.Row;
col: wjcGrid.Column;
item: any;
value: any;
values: any;
}
export declare type CellTemplateRender = (context: ICellTemplateContext) => any;
export {};
* {context.col.header}
* 
* {context.item.country}
*