/*!
*
* Wijmo Library 5.20251.40
* 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.vue2.grid}
* Contains Vue 2 and 3 components for the wijmo.grid module.
*/
/**
*
*/
export declare var ___keepComment: any;
import * as wjcCore from 'wijmo/wijmo';
import * as wjcInteropGrid from 'wijmo/wijmo.interop.grid';
/**
* Represents a cell template types enumeration.
*/
export import CellTemplateType = wjcInteropGrid.GridCellTemplateType;
/**
* Vue component for the {@link wijmo.grid.FlexGrid} control.
*
* The wj-flex-grid component may contain
* the following child components:
* {@link wijmo.vue2.grid.detail.WjFlexGridDetail}
* , {@link wijmo.vue2.grid.filter.WjFlexGridFilter}
* , {@link wijmo.vue2.grid.WjFlexGridColumn}
* , {@link wijmo.vue2.grid.WjFlexGridColumnGroup}
* and {@link wijmo.vue2.grid.WjFlexGridCellTemplate}.
*
* The component supports all properties and events of the pure JavaScript {@link wijmo.grid.FlexGrid} control 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 markup.
* The signature of the handler function is the same as any other Wijmo event handlers.
*
* The example below shows how to instantiate and initialize a
* {@link wijmo.grid.FlexGrid} control using Vue markup:
*
*
*
* The code sets the itemsSource property to a collection that contains the grid
* data, then specifies the columns to display using wj-flex-grid-column
* components.
*/
export declare var WjFlexGrid: any;
/**
* Vue component for the {@link wijmo.grid.Column} class.
*
* The wj-flex-grid-column component should be contained in
* a {@link wijmo.vue2.grid.WjFlexGrid} component.
*
* The wj-flex-grid-column component may contain
* a {@link wijmo.vue2.grid.WjFlexGridCellTemplate} 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 markup.
* The signature of the handler function is the same as any other Wijmo event handlers.
*/
export declare var WjFlexGridColumn: any;
/**
* Vue component for the {@link wijmo.grid.ColumnGroup} class.
*
* The wj-flex-grid-column-group component should be contained in
* one of the following components:
* {@link wijmo.vue2.grid.WjFlexGrid}
* or {@link wijmo.vue2.grid.WjFlexGridColumnGroup}.
*
* The wj-flex-grid-column-group component may contain
* the following child components:
* {@link wijmo.vue2.grid.WjFlexGridColumnGroup}
* and {@link wijmo.vue2.grid.WjFlexGridCellTemplate}.
*
* 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 markup.
* The signature of the handler function is the same as any other Wijmo event handlers.
*/
export declare var WjFlexGridColumnGroup: any;
interface ICellTemplateInfoVue extends wjcInteropGrid.ICellTemplateInfo {
_instantiateTemplate(parent: HTMLElement, dataContext: any): any;
}
interface ICellTemplateCacheVue extends wjcInteropGrid.ICellTemplateCache {
cellCmp: typeof CellTemplateCmp;
}
interface ICellRenderingInfoVue extends wjcInteropGrid.ICellRenderingInfo {
templateContext: ICellTemplateInfoVue;
templateCache: ICellTemplateCacheVue;
}
export declare class DirectiveCellFactory extends wjcInteropGrid.DirectiveCellFactoryBase {
protected shouldInstantiate(cellInfo: ICellRenderingInfoVue): boolean;
protected renderTemplate(cellInfo: ICellRenderingInfoVue, initNew: boolean): void;
protected disposeTemplate(cell: HTMLElement, templateCache: ICellTemplateCacheVue, templateContext: ICellTemplateInfoVue): void;
protected clearCell(cell: HTMLElement): void;
protected applyImmediately(cellInfo: ICellRenderingInfoVue): void;
protected flushPendingEvents(control: wjcCore.Control): void;
protected getEditorFocusFlag(): boolean;
protected setEditorFocusFlag(value: boolean): void;
}
export declare const WjFlexGridCellTemplateDefinition: {
props: {
cellOverflow: {
default: any;
};
cellType: {
default: any;
};
autoSizeRows: {
default: boolean;
};
forceFullEdit: {
default: boolean;
};
};
render: (createElement: any) => any;
mounted: () => void;
methods: {
_attachToControl: () => void;
_detachFromControl: () => void;
_instantiateTemplate: (parent: HTMLElement, dataContext: any) => any;
};
};
/**
* Vue component for the {@link FlexGrid} cell templates.
*
* The wj-flex-grid-cell-template component defines a template for a certain
* cell type in {@link FlexGrid}. The template element must contain a cellType attribute that
* specifies the {@link wijmo.vue2.grid.CellTemplateType}. Depending on the template's cell type,
* the wj-flex-grid-cell-template element must be a child
* of either {@link wijmo.vue2.grid.WjFlexGrid}
* or {@link wijmo.vue2.grid.WjFlexGridColumn} components.
*
* Column-specific cell templates must be contained in wj-flex-grid-column
* components, and cells that are not column-specific (like row header or top left cells)
* must be contained in the wj-flex-grid component.
*
* The wj-flex-grid-cell-template element
* may contain an arbitrary HTML fragment with Vue interpolation expressions and
* other components and directives.
*
* Bindings in HTML fragment can use scoped slot properties that store cell specific data.
* The properties are col, row, and item, 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
* property containing an unformatted cell value is provided.
*
* To reference slot properties, you can use either a new v-slot directive right on the
* wj-flex-grid-cell-template element (it's available in Vue 2.6.0 or higher),
* or an old slot-scope directive on the <template> element nested in
* wj-flex-grid-cell-template.
*
* 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
*
*
*
* {{cell.row.index}}
*
*
* ...
*
*
*
*
*
* {{cell.col.header}}
*
*
*
* {{cell.item.country}}
*
*
*
*
* ```
*
* The wj-flex-grid-cell-template directive supports the following attributes:
*
*
*
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.vue2.grid.WjFlexGridColumn} component.
* For example, this cell template shows flags in the cells of Country column:
*
* ```html
*
*
*
* {{cell.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.vue2.grid.WjFlexGridColumn} component.
* This cell type has an additional value scoped slot property available for binding. 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
*
*
*
*
*
* ```
*
* Note that two-way binding can also be specified using the binding's sync modifier:
* ```html
*
*
*
*
*
* ```
*
* ColumnHeader
*
* Defines a template for a column header cell. Must be a child of the {@link wijmo.vue2.grid.WjFlexGridColumn} component.
* For example, this template adds an image to the header of the "Country" column:
*
* ```html
*
*
*
* {{cell.col.header}}
*
*
* ```
*
* RowHeader
*
* Defines a template for a row header cell. Must be a child of the {@link wijmo.vue2.grid.WjFlexGrid} component.
* For example, this template shows row indices in the row headers:
*
* ```html
*
*
* {{cell.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.vue2.grid.WjFlexGrid} 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
*
*
* ✎︎
*
*
* ```
*
* TopLeft
*
* Defines a template for the top left cell. Must be a child of the {@link wijmo.vue2.grid.WjFlexGrid} component.
* For example, this template shows a down/right glyph in the top-left cell of the grid:
*
* ```html
*
*
*
*
*
* ```
*
* GroupHeader
*
* Defines a template for a group header cell in a {@link GroupRow}. Must be a child of the {@link wijmo.vue2.grid.WjFlexGridColumn} component.
*
* The row scoped slot property contains an instance of the GroupRow class. If the grouping comes
* from {@link CollectionView}, the item scoped slot property references the {@link CollectionViewGroup} object.
*
* For example, this template uses a checkbox element as an expand/collapse toggle:
*
* ```html
*
*
*
* {{cell.item.name}} ({{cell.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.vue2.grid.WjFlexGridColumn} component. This cell type has an additional value scoped
* slot property available for
* binding. 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
*
*
* Average: {{formatNumber(cell.value, 'N0')}}
*
*
* ```
*
* ColumnFooter
*
* Defines a template for a regular cell in a columnFooters panel. Must be a child of the
* {@link wijmo.vue2.grid.WjFlexGridColumn} component. This cell type has an additional value
* scoped slot property available for binding that contains a cell value.
*
* For example, this template shows aggregate's value and kind for a footer cell in the "Sales"
* column:
*
* ```html
*
*
* Average: {{formatNumber(cell.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.vue2.grid.WjFlexGrid} 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.vue2.grid.WjFlexGridColumn} component.
* Note that the cell.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 var WjFlexGridCellTemplate: any;
declare var CellTemplateCmp: any;
export declare function registerGrid(app: any): void;
export {};
* {{cell.col.header}}
*