# Wijmo_Angular2_Grid.Wjflexgridcolumn ## Content

WjFlexGridColumn Class

Angular 2 component for the wijmo.grid.Column class.

The wj-flex-grid-column component must be contained in a wijmo.angular2.grid.WjFlexGrid component.

Use the wj-flex-grid-column component to add Column controls to your Angular 2 applications. For details about Angular 2 markup syntax, see Angular 2 Markup.

The WjFlexGridColumn component is derived from the Column class and inherits all its properties, events and methods.

The wj-flex-grid-column component may contain a wijmo.angular2.grid.WjFlexGridCellTemplate child directive.

Type parameters

Heirarchy

Properties

Methods

Events

Properties

aggregate

aggregate: Aggregate

Gets or sets the Aggregate to display in the group header rows for the column.

The default value for this property is Aggregate.None, which causes the grid to show no aggregate values for this column.

align

align: string | 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 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'.

allowDragging

allowDragging: 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.

allowMerging

allowMerging: 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.

allowResizing

allowResizing: boolean

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.

allowSorting

allowSorting: boolean

Gets or sets a value that indicates whether the user can sort the column by clicking its header.

The default value for this property is true.

asyncBindings

asyncBindings: boolean

Allows you to override the global WjOptions.asyncBindings setting for this specific component. See the WjOptions.WjOptions.asyncBindings property description for details.

binding

binding: string | null

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 FlexGrid.autoGenerateColumns).

cellTemplate

cellTemplate: string | ICellTemplateFunction | null

Gets or sets an ICellTemplateFunction or a template string to be used for generating the HTML content of data cells in this Column.

Cell template strings use template literal syntax. The content string is generated using a scope of type ICellTemplateContext.

ICellTemplateFunction functions take an argument of type ICellTemplateContext and return the HTML content to be displayed in the cell.

For example:

// simple/default rendering with a cellTemplate string
col.cellTemplate = '${value}:${col.format}';

// simple/default rendering with a cellTemplate function
col.cellTemplate = (ctx: ICellTemplateContext) => glbz`${ctx.value}:${ctx.col.format}`;

// conditional formatting with cellTemplate string
col.cellTemplate = '<span class=${value > 40000 ? "big-val" : "small-val"}>${text}</span>';

// conditional formatting with a cellTemplate function
col.cellTemplate = (ctx: ICellTemplateContext) => `
    <span class="${ctx.value > 4000 ? 'big-val' : 'small-val'}">${ctx.text}</span>
`;

Notice that string-based cell templates are regular strings, not actual JavaScript template literals. Therefore, they are defined using regular quotes (single or double) as oppsed to the back-quotes used by JavaScript template strings.

Function-based cell templates are usually a better choice than string-based templates because:

1) They provide design-time error checking and command completion, 2) They run faster, and 3) They do not have any issues with content-security policy (CSP).

String-based cell templates also have advantages that may be important in some scenarios:

1) They are slightly more concise, and 2) They can be stored as data and easily changed at run-time.

The cellTemplate property provides a simpler alternative to the formatItem event or the cell templates available in the Wijmo interop modules.

When using cell templates, you should still set the column's binding and format properties. They will be used in edit mode and to support copy/paste/export operations.

Cell templates are used only to render cell data, and have no effect on editing. If you want to customize the cell editors, use the editor property.

Cell templates can also be used to render row header cells. The most common scenario for this would be to add numbers to the row header cells. The example below shows how you can do this:

// get row header column
let col = theGrid.rowHeaders.columns[0];

// assign template that adds the row index to the header
// (but preserves glyphs such as edit and new row template)
col.cellTemplate = ctx => ctx.text || (ctx.row.index + 1).toString();

The default value for this property is null, which means the column has no template.

collectionView

collectionView: ICollectionView<T>

Gets the ICollectionView bound to this column or row.

cssClass

cssClass: string | null

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.

cssClassAll

cssClassAll: 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.

currentSort

currentSort: string

Gets a string that describes the current sorting applied to the column. Possible values are '+' for ascending order, '-' for descending order, or null for unsorted columns.

currentSortIndex

currentSortIndex: number

Gets the index of this column in the sort descriptions array for the grid's collection view.

dataMap

dataMap: DataMap | null

Gets or sets the 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 dataMapEditor property.

The default value for this property is null.

dataMapEditor

dataMapEditor: DataMapEditor

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 DataMapEditor.DropDownList, which adds drop-down buttons to cells to columns that have a 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 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.

dataType

dataType: DataType | 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 FlexGrid.autoGenerateColumns).

describedById

describedById: string | null

Gets or sets the ID of an element that contains a description of the column.

The ID is used as the value of the aria-describedby attribute for the column header element.

THe default value for this property is null.

dropDownCssClass

dropDownCssClass: string | null

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 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.

editor

editor: Control | null

Gets or sets a reference to an input control to be used as a custom cell editor for this Column.

The input control is typically one of the Wijmo input controls. It should be compatible with the column's data type.

For example, this code replaces the built-in editor for all date columns on a grid with a single InputDate control:

import { InputDate } from '@mescius/wijmo.input';
let inputDate = new InputDate(document.createElement('div'));
theGrid.columns.forEach(col => {
    if (col.DataType == DateType.Date) {
        col.editor = inputDate;
    }
})

And this code replaces the built-in editor for all data-mapped columns on a grid with AutoComplete controls:

import { AutoComplete } from '@mescius/wijmo.input';
theGrid.columns.forEach(col => {
    let map = col.dataMap;
    if (map) {
        col.editor = new AutoComplete(document.createElement('div'), {
            itemsSource: map.collectionView,
            displayMemberPath: map.displayMemberPath,
            selectedValuePath: map.selectedValuePath
        });
    }
});

Notice how the example above uses the column's dataMap property to initialize the AutoComplete.

In many cases you may also want to use column properties such as format and isRequired to initialize the custom editors. This is important since the custom editors do not inherit any properties from the column being edited.

The example below shows how you can use the editor property to edit grid items with various Wijmo input controls:

Example

The default value for this property is null, which causes the grid to use the grid's own built-in editors.

format

format: string | null

Gets or sets the format string used to convert raw values into display values for the column or row (see Globalize).

The default value for this property is null, which causes the grid to use default formats that depend on the data type.

grid

grid: FlexGrid

Gets the FlexGrid that owns this column or row.

header

header: string | null

Gets or sets the text displayed in the column header.

The default value for this property is null, which causes the grid to use the binding string as a header.

index

index: number

Gets the index of the column or row in the parent collection.

initialized

initialized: EventEmitter<any>

This event is triggered after the component has been initialized by Angular, that is all bound properties have been assigned and child components (if any) have been initialized.

inputType

inputType: string | 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."

isContentHtml

isContentHtml: boolean

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 FlexGrid.formatItem event and set the cell's innerHTML content in code.

Unless the column's 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 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.

isInitialized

isInitialized: boolean

Indicates whether the component has been initialized by Angular. Changes its value from false to true right before triggering the initialized event.

isReadOnly

isReadOnly: 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.

isRequired

isRequired: boolean | null

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.

isSelected

isSelected: boolean

Gets or sets a value that indicates whether the column or row is selected.

The default value for this property is false.

isSelectedChangePC

isSelectedChangePC: EventEmitter<any>

This event is used to implement two-way binding to the isSelected property. It's triggered when the property value changes, with the event argument holding the new property value. You can bind handlers to this event in templates using the isSelectedChange event name.

isVisible

isVisible: 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 visible property instead.

mask

mask: 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 wijmo.input.InputMask control.

If specified, the mask must be compatible with the value of the 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.

maxLength

maxLength: number | 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.

maxWidth

maxWidth: number | null

Gets or sets the maximum width (in pixels) of the column.

The default value for this property is null, which means there is no upper limit to the column width.

minWidth

minWidth: number | null

Gets or sets the minimum width of the column.

The default value for this property is null, which means there is no lower limit to the column width.

multiLine

multiLine: 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.

name

name: string | null

Gets or sets the name of the column.

The column name can be used to retrieve the column using the FlexGrid.getColumn method.

This property is especially useful when dealing with unbound columns or multiple columns with the same binding value.

The default value for this property is null.

placeholder

placeholder: string | null

Gets or sets the place holder for a column which will be displayed when editing an empty cell.

The default value for this property is null, which causes the grid to use the the header of the column as place holder.

pos

pos: number

Gets the position of the column or row in pixels.

quickAutoSize

quickAutoSize: boolean | null

Gets or sets a value that determines whether the grid should optimize performance over precision when auto-sizing this column.

Setting this property to false disables quick auto-sizing for this column.

Setting it to true enables the feature, subject to the value of the grid's wijmo.grid.FlexGrid.quickAutoSize property.

The default value for this property is null, which enables the feature for columns that display plain text and don't have templates.

renderSize

renderSize: number

Gets the render size of the column or row.

This property accounts for visibility, default size, and min and max sizes.

renderWidth

renderWidth: number

Gets the render width of the column.

The value returned takes into account the column's visibility, default size, and min and max sizes.

size

size: number | null

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.

sortMemberPath

sortMemberPath: 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 binding property.

The default value for this property is null, which causes the grid to use the value of the binding property to sort the column.

sortOrder

sortOrder: SortOrder

Gets or sets the sort order of the column.

The default value for this property is null, which causes the column to be sorted in the order defined by the grid's SortOrder property.

To override the default sort order, set this property to one of the options of SortOrder

visible

visible: boolean

Gets or sets a value that indicates whether the column or row is visible.

The default value for this property is true.

visibleIndex

visibleIndex: number

Gets the index of the column or row in the parent collection ignoring invisible elements (isVisible).

width

width: any | 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 minWidth property to prevent the column from getting too narrow.

You can use the renderWidth property to retrieve the actual width of the column, taking into account visibility, star sizing, min/max limits, and default width settings.

The default value for this property is null, which causes the grid to use the default column width defined by the grid's FlexGrid.columns collection.

wjProperty

wjProperty: string

Gets or sets a name of a property that this component is assigned to. Default value is 'columns'.

wordWrap

wordWrap: 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.

Methods

created

  • created(): void

  • If you create a custom component inherited from a Wijmo component, you can override this method and perform necessary initializations that you usually do in a class constructor. This method is called in the last line of a Wijmo component constructor and allows you to not declare your custom component's constructor at all, thus preventing you from a necessity to maintain constructor parameters and keep them in synch with Wijmo component's constructor parameters.

    Returns void

getAlignment

  • getAlignment(row?: Row): string

  • Gets the actual alignment if items in the column or row.

    Returns the value of the align property if it is not null, or selects the alignment based on the column's dataType.

    Parameters

    • Optional row: Row

      Row that contains the cell being checked.

    Returns string

    A string representing the cell alignment.

getIsRequired

  • getIsRequired(row?: Row): boolean

  • Gets a value that determines whether values in the column/row are required.

    Returns the value of the isRequired property if it is not null, or determines the required status based on the column's dataType.

    By default, string columns are not required unless they have an associated dataMap or mask; all other data types are required.

    Parameters

    • Optional row: Row

      Row that contains the cell being checked.

    Returns boolean

    True if the value is required, false otherwise.

onGridChanged

onPropertyChanged

  • onPropertyChanged(): void

Events

gridChanged

gridChanged: Event<RowCol<any>, EventArgs>

Occurs when the value of the grid property changes.