/*! * * 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.angular.grid} * AngularJS directives for wijmo.grid module */ /** * */ export declare var ___keepComment: any; import { WjDirective, WjLink } from 'wijmo/wijmo.angular.base'; import * as wjcGrid from 'wijmo/wijmo.grid'; /** * Angular module name, which can be used in the angular.module(moduleName) * function to obtain a reference to the module . */ export declare const ngModuleName = "wj.grid"; /** * AngularJS directive for the {@link FlexGrid} control. * * Use the wj-flex-grid directive to add grids to your AngularJS applications. * Note that directive and parameter names must be formatted as lower-case with dashes * instead of camel-case. For example: * * 
<p>Here is a FlexGrid control:</p>
    * <wj-flex-grid items-source="data">
    *   <wj-flex-grid-column
    *     header="Country"
    *     binding="country">
    *   </wj-flex-grid-column>
    *   <wj-flex-grid-column
    *     header="Sales"
    *     binding="sales">
    *   </wj-flex-grid-column>
    *   <wj-flex-grid-column
    *     header="Expenses"
    *     binding="expenses">
    *   </wj-flex-grid-column>
    *   <wj-flex-grid-column
    *     header="Downloads"
    *     binding="downloads">
    *   </wj-flex-grid-column>
    * </wj-flex-grid>
* * The example below creates a FlexGrid control and binds it to a 'data' array * exposed by the controller. The grid has three columns, each corresponding to * a property of the objects contained in the source array. * * Example * * The wj-flex-grid directive supports the following attributes: * *
*
allow-add-new
@ A value indicating whether to show a new row * template so users can add items to the source collection.
*
allow-delete
@ A value indicating whether the grid deletes the * selected rows when the Delete key is pressed.
*
allow-dragging
@ An {@link AllowDragging} value indicating * whether and how the user can drag rows and columns with the mouse.
*
allow-merging
@ An {@link AllowMerging} value indicating * which parts of the grid provide cell merging.
*
allow-resizing
@ An {@link AllowResizing} value indicating * whether users are allowed to resize rows and columns with the mouse.
*
allow-sorting
@ A boolean value indicating whether users can sort * columns by clicking the column headers.
*
auto-generate-columns
@ A boolean value indicating whether the grid generates * columns automatically based on the items-source.
*
child-items-path
@ The name of the property used to generate * child rows in hierarchical grids (or an array of property names if items * at different hierarchical levels use different names for their child items).
*
control
= A reference to the {@link FlexGrid} control * created by this directive.
*
defer-resizing
= A boolean value indicating whether row and column * resizing should be deferred until the user releases the mouse button.
*
frozen-columns
@ The number of frozen (non-scrollable) columns in the grid.
*
frozen-rows
@ The number of frozen (non-scrollable) rows in the grid.
*
group-header-format
@ The format string used to create the group * header content.
*
headers-visibility
= A {@link HeadersVisibility} value * indicating whether the row and column headers are visible.
*
headers-focusibility
= A {@link HeadersFocusability} value * indicatinf whether the row and column headers are focusible.
*
ime-enabled
@ Gets or sets a value that determines whether the grid should * support Input Method Editors (IME) while not in edit mode.
*
initialized
& This event occurs after the binding has finished * initializing the control with attribute values.
*
is-initialized
= A value indicating whether the binding has finished * initializing the control with attribute values.
*
item-formatter
= A function that customizes * cells on this grid.
*
items-source
= An array or {@link ICollectionView} object that * contains the items shown on the grid.
*
is-read-only
@ A boolean value indicating whether the user is * prevented from editing grid cells by typing into them.
*
merge-manager
= A {@link MergeManager} object that specifies * the merged extent of the specified cell.
*
selection-mode
@ A {@link SelectionMode} value * indicating whether and how the user can select cells.
*
show-groups
@ A boolean value indicating whether to insert group * rows to delimit data groups.
*
show-sort
@ A boolean value indicating whether to display sort * indicators in the column headers.
*
sort-row-index
@ A number specifying the index of row in the column * header panel that shows and changes the current sort.
*
tree-indent
@ The indentation, in pixels, used to offset row * groups of different levels.
*
beginning-edit
& Handler for the {@link FlexGrid.beginningEdit} event.
*
cell-edit-ended
& Handler for the {@link FlexGrid.cellEditEnded} event.
*
cell-edit-ending
& Handler for the {@link FlexGrid.cellEditEnding} event.
*
prepare-cell-for-edit
& Handler for the {@link FlexGrid.prepareCellForEdit} event.
*
resizing-column
& Handler for the {@link FlexGrid.resizingColumn} event.
*
resized-column
& Handler for the {@link FlexGrid.resizedColumn} event.
*
dragged-column
& Handler for the {@link FlexGrid.draggedColumn} event.
*
dragging-column
& Handler for the {@link FlexGrid.draggingColumn} event.
*
sorted-column
& Handler for the {@link FlexGrid.sortedColumn} event.
*
sorting-column
& Handler for the {@link FlexGrid.sortingColumn} event.
*
deleting-row
& Handler for the {@link FlexGrid.deletingRow} event.
*
dragging-row
& Handler for the {@link FlexGrid.draggingRow} event.
*
dragged-row
& Handler for the {@link FlexGrid.draggedRow} event.
*
resizing-row
& Handler for the {@link FlexGrid.resizingRow} event.
*
resized-row
& Handler for the {@link FlexGrid.resizedRow} event.
*
row-added
& Handler for the {@link FlexGrid.rowAdded} event.
*
row-edit-ended
& Handler for the {@link FlexGrid.rowEditEnded} event.
*
row-edit-ending
& Handler for the {@link FlexGrid.rowEditEnding} event.
*
loaded-rows
& Handler for the {@link FlexGrid.loadedRows} event.
*
loading-rows
& Handler for the {@link FlexGrid.loadingRows} event.
*
group-collapsed-changed
& Handler for the {@link FlexGrid.groupCollapsedChanged} event.
*
group-collapsed-changing
& Handler for the {@link FlexGrid.groupCollapsedChanging} event.
*
items-source-changed
& Handler for the {@link FlexGrid.itemsSourceChanged} event.
*
selection-changing
& Handler for the {@link FlexGrid.selectionChanging} event.
*
selection-changed
& Handler for the {@link FlexGrid.selectionChanged} event.
*
got-focus
& Handler for the {@link FlexGrid.gotFocus} event.
*
lost-focus
& Handler for the {@link FlexGrid.lostFocus} event.
*
scroll-position-changed
& Handler for the {@link FlexGrid.scrollPositionChanged} event.
*
* * The wj-flex-grid directive may contain {@link wijmo.angular.grid.WjFlexGridColumn}, {@link wijmo.angular.grid.WjFlexGridCellTemplate} and * {@link wijmo.angular.grid.detail.WjFlexGridDetail} child directives. */ export declare class WjFlexGrid extends WjDirective { _$compile: any; _$interpolate: any; constructor($compile: any, $interpolate: any); readonly _controlConstructor: typeof wjcGrid.FlexGrid; _createLink(): WjLink; _initProps(): void; } /** * AngularJS directive for the {@link Column} object. * * The wj-flex-grid-column directive must be contained in a {@link wijmo.angular.grid.WjFlexGrid} directive. * It supports the following attributes: * *
*
aggregate
@ The {@link Aggregate} object to display in * the group header rows for this column.
*
align
@ The string value that sets the horizontal * alignment of items in the column to left, right, or center.
*
allow-dragging
@ The value indicating whether the user can move * the column to a new position with the mouse.
*
allow-sorting
@ The value indicating whether the user can sort * the column by clicking its header.
*
allow-resizing
@ The value indicating whether the user can * resize the column with the mouse.
*
allow-merging
@ The value indicating whether the user can merge * cells in the column.
*
binding
@ The name of the property to which the column is * bound.
*
css-class
@ The name of a CSS class to use when * rendering the column.
*
data-map
= The {@link DataMap} object to use to convert raw * values into display values for the column.
*
data-type
@ The enumerated {@link DataType} value that indicates * the type of value stored in the column.
*
format
@ The format string to use to convert raw values * into display values for the column (see {@link Globalize}).
*
header
@ The string to display in the column header.
*
input-type
@ The type attribute to specify the input element * used to edit values in the column. The default is "tel" for numeric * columns, and "text" for all other non-Boolean columns.
*
is-content-html
@ The value indicating whether cells in the column * contain HTML content rather than plain text.
*
is-read-only
@ The value indicating whether the user is prevented * from editing values in the column.
*
is-selected
@ The value indicating whether the column is selected.
*
mask
@ The mask string used to edit values in the * column.
*
max-width
@ The maximum width for the column.
*
min-width
@ The minimum width for the column.
*
name
@ The column name. You can use it to retrieve the * column.
*
is-required
@ The value indicating whether the column must contain * non-null values.
*
show-drop-down
@ The value indicating whether to show drop-down buttons * for editing based on the column's {@link DataMap}.
*
visible
@ The value indicating whether the column is visible.
*
width
@ The width of the column in pixels or as a * star value.
*
word-wrap
@ The value indicating whether cells in the column wrap * their content.
*
placeholder
@ The string which will be displayed when editing an empty cell.
*
* * Any html content within the wj-flex-grid-column directive is treated as a template for the cells in that column. * The template is applied only to regular cells. If you wish to apply templates to specific cell types such as * column or group headers, then please see the {@link wijmo.angular.grid.WjFlexGridCellTemplate} directive. * * The following example creates two columns with a template and a conditional style: * * Example * * The wj-flex-grid-column directive may contain {@link wijmo.angular.grid.WjFlexGridCellTemplate} child directives. */ export declare class WjFlexGridColumn extends WjDirective { static _colTemplateProp: string; static _colWjLinkProp: string; static _cellCtxProp: string; _$compile: any; constructor($compile: any); readonly _controlConstructor: typeof wjcGrid.Column; _initControl(element: any): any; _createLink(): WjLink; } /** * Defines the type of cell to which the template applies. * This value is specified in the cell-type attribute * of the {@link wijmo.angular.grid.WjFlexGridCellTemplate} directive. */ export declare enum CellTemplateType { /** Defines a regular (data) cell. */ Cell = 0, /** Defines a cell in edit mode. */ CellEdit = 1, /** Defines a column header cell. */ ColumnHeader = 2, /** Defines a row header cell. */ RowHeader = 3, /** Defines a row header cell in edit mode. */ RowHeaderEdit = 4, /** Defines a top left cell. */ TopLeft = 5, /** Defines a group header cell in a group row. */ GroupHeader = 6, /** Defines a regular cell in a group row. */ Group = 7, /** Defines a column footer cell. */ ColumnFooter = 8, /** Defines a bottom left cell (at the intersection of the row header and column footer cells). **/ BottomLeft = 9 } /** * AngularJS directive for the {@link FlexGrid} cell templates. * * The wj-flex-grid-cell-template directive defines a template for a certain * cell type in {@link FlexGrid}, and must contain a cell-type attribute that * specifies the {@link CellTemplateType}. Depending on the template's cell type, * the wj-flex-grid-cell-template directive must be a child of either {@link wijmo.angular.grid.WjFlexGrid} * or {@link wijmo.angular.grid.WjFlexGridColumn} directives. * * Column-specific cell templates must be contained in wj-flex-grid-column * directives, and cells that are not column-specific (like row header or top left cells) * must be contained in the wj-flex-grid directive. * * In addition to an HTML fragment, wj-flex-grid-cell-template directives may * contain an ng-style or ng-class attribute that provides conditional formatting for cells. * * Both the ng-style/ng-class attributes and the HTML fragment can use the $col, * $row and $item template variables that 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 * variable containing an unformatted cell value is provided. For example, here is a * FlexGrid control with templates for row headers and for the Country column's regular * and column header cells: * * 
<wj-flex-grid items-source="data">
 *   <wj-flex-grid-cell-template cell-type="RowHeader">
 *     {​{$row.index}}
 *   </wj-flex-grid-cell-template>
 *   <wj-flex-grid-cell-template cell-type="RowHeaderEdit">
 *     ...
 *   </wj-flex-grid-cell-template>
 *  
 *   <wj-flex-grid-column header="Country" binding="country">
 *     <wj-flex-grid-cell-template cell-type="ColumnHeader">
 *       <img ng-src="resources/globe.png" />
 *         {​{$col.header}}
 *       </wj-flex-grid-cell-template>
 *       <wj-flex-grid-cell-template cell-type="Cell">
 *         <img ng-src="resources/{​{$item.country}}.png" />
 *         {​{$item.country}}
 *       </wj-flex-grid-cell-template>
 *     </wj-flex-grid-column>
 *   <wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column>
 * </wj-flex-grid>
* * For more detailed information on specific cell type templates refer to the * documentation for the {@link CellTemplateType} enumeration. * * Note that the wj-flex-grid-column directive may also contain arbitrary content * that is treated as a template for a regular data cell (cell-type="Cell"). But if * a wj-flex-grid-cell-template directive exists and is set to cell-type="Cell" * under the wj-flex-grid-column directive, it takes priority and overrides the * arbitrary content. * * The wj-flex-grid-cell-template directive supports the following attributes: * *
*
cell-type
*
@ * The {@link CellTemplateType} value defining the type of cell the template applies to. *
*
auto-size-rows
*
@ * Indicates whether the cell template will increase grid's default row height to accommodate * cells content. Defaults to true. *
*
cell-overflow
*
@ * Defines the style.overflow property value for cells. *
*
force-full-edit
*
@ * 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 cell-type attribute takes any of the following enumerated values: * * Cell * * Defines a regular (data) cell template. Must be a child of the {@link wijmo.angular.grid.WjFlexGridColumn} directive. * For example, this cell template shows flags in the Country column's cells: * * 
<wj-flex-grid-column header="Country" binding="country">
 *   <wj-flex-grid-cell-template cell-type="Cell">
 *     <img ng-src="resources/{​{$item.country}}.png" />
 *     {​{$item.country}}
 *   </wj-flex-grid-cell-template>
 * </wj-flex-grid-column>
* * For a hierarchical {@link FlexGrid} (that is, one with the childItemsPath property * specified), if no Group template is provided, non-header cells in group rows in * 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.angular.grid.WjFlexGridColumn} directive. * This cell type has an additional $value 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: * * 
<wj-flex-grid-column header="Sales" binding="sales">
    *   <wj-flex-grid-cell-template cell-type="CellEdit">
    *     <wj-input-number value="$value" step="1"></wj-input-number>
    *   </wj-flex-grid-cell-template>
    * </wj-flex-grid-column>
* * ColumnHeader * * Defines a template for a column header cell. Must be a child of the {@link wijmo.angular.grid.WjFlexGridColumn} directive. * For example, this template adds an image to the header of the "Country" column: * * 
<wj-flex-grid-column header="Country" binding="country">
    *   <wj-flex-grid-cell-template cell-type="ColumnHeader">
    *     <img ng-src="resources/globe.png" />
    *     {​{$col.header}}
    *   </wj-flex-grid-cell-template>
    * </wj-flex-grid-column>
* * RowHeader * * Defines a template for a row header cell. Must be a child of the {@link wijmo.angular.grid.WjFlexGrid} directive. * For example, this template shows row indices in the row headers: * * 
<wj-flex-grid items-source="data">
    *   <wj-flex-grid-cell-template cell-type="RowHeader">
    *     {​{$row.index}}
    *   </wj-flex-grid-cell-template>
    * </wj-flex-grid>
* * 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.angular.grid.WjFlexGrid} directive. For example, this template shows dots in the header * of rows being edited: * * 
<wj-flex-grid items-source="data">
    *   <wj-flex-grid-cell-template cell-type="RowHeaderEdit">
    *       ...
    *   </wj-flex-grid-cell-template>
    * </wj-flex-grid>
* * To add the standard edit-mode indicator to cells where the RowHeader template * applies, use the following RowHeaderEdit template: * * 
<wj-flex-grid items-source="data">
    *   <wj-flex-grid-cell-template cell-type="RowHeaderEdit">
    *     {​{&#x270e;}}
    *   </wj-flex-grid-cell-template>
    * </wj-flex-grid>
* * TopLeft * * Defines a template for the top left cell. Must be a child of the {@link wijmo.angular.grid.WjFlexGrid} directive. * For example, this template shows a down/right glyph in the top-left cell of the grid: * * 
<wj-flex-grid items-source="data">
    *   <wj-flex-grid-cell-template cell-type="TopLeft">
    *     <span class="wj-glyph-down-right"></span>
    *   </wj-flex-grid-cell-template>
    * </wj-flex-grid>
* *

GroupHeader

* * Defines a template for a group header cell in a {@link GroupRow}, Must be a child of the {@link wijmo.angular.grid.WjFlexGridColumn} directive. * * The $row variable contains an instance of the GroupRow class. If the grouping comes * from the a {@link CollectionView}, the $item variable references the {@link CollectionViewGroup} object. * * For example, this template uses a checkbox element as an expand/collapse toggle: * * 
<wj-flex-grid-column header="Country" binding="country">
    *   <wj-flex-grid-cell-template cell-type="GroupHeader">
    *     <input type="checkbox" ng-model="$row.isCollapsed"/>
    *     {​{$item.name}} ({​{$item.items.length}} items)
    *   </wj-flex-grid-cell-template>
    * </wj-flex-grid-column>
* * Group * * Defines a template for a regular cell (not a group header) in a {@link GroupRow}. Must be a child of the * {@link wijmo.angular.grid.WjFlexGridColumn} directive. This cell type has an additional $value varible available for * binding. In cases where columns have the aggregate property specified, it contains the unformatted * aggregate value. * * For example, this template shows an aggregate's value and kind for group row cells in the "Sales" * column: * * 
<wj-flex-grid-column header="Sales" binding="sales" aggregate="Avg">
    *   <wj-flex-grid-cell-template cell-type="Group">
    *     Average: {​{$value | number:2}}
    *   </wj-flex-grid-cell-template>
    * </wj-flex-grid-column>
* * ColumnFooter * * Defines a template for a regular cell in a columnFooters panel. Must be a child of the * {@link wijmo.angular.grid.WjFlexGridColumn} directive. This cell type has an additional $value * 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: * * 
<wj-flex-grid-column header="Sales" binding="sales" aggregate="Avg">
*   <wj-flex-grid-cell-template cell-type="ColumnFooter">
*     Average: {​{$value | number:2}}
*   </wj-flex-grid-cell-template>
* </wj-flex-grid-column>
* * 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.angular.grid.WjFlexGrid} directive. * For example, this template shows a sigma glyph in the bottom-left cell of the grid: * * 
<wj-flex-grid items-source="data">
*   <wj-flex-grid-cell-template cell-type="BottomLeft">
*    &#931;
*   </wj-flex-grid-cell-template>
* </wj-flex-grid>
*/ export declare class WjFlexGridCellTemplate extends WjDirective { static _tagName: string; static _getTemplContextProp(templateType: CellTemplateType): string; constructor(); _initControl(element: any): any; _createLink(): WjLink; _getMetaDataId(): any; }