Class: Grid

componyx .UI.Grid(id, properties) → {Object}

new Grid(id, properties) → {Object}

Grid class.

Parameters:

Name	Type	Description
`id`	String	The id of the component.
`properties`	Object \| HTMLElement	The properties used to initialize the component or the container element.

Properties:

Name	Type	Description
`ajax.load`	componyx.UI.base.AjaxMethod	AJAX method used to load the grid's items.
`ajax.loadItem`	componyx.UI.base.AjaxMethod	AJAX method used to load an item's detail data when a row is expanded.

Mixes In:

componyx.UI.base.methods

Returns:

An instance of the component.

Type: Object

Extends

componyx.UI.base.Component

Classes

Column
ColumnGroup
GridEvents
Item

Members

clearSelectionOnOutsideClick :Boolean

Gets or sets a value indicating whether the selection should be cleared on a click outside the grid.

Type:

Boolean

columnGroups :Array.<componyx.UI.Grid.ColumnGroup>

Gets or sets the column groups.

Type:

Array.<componyx.UI.Grid.ColumnGroup>

columnSorting :componyx.UI.Grid.ColumnSortingOption

Gets or sets the column sorting option.

Type:

componyx.UI.Grid.ColumnSortingOption

columns :Array.<componyx.UI.Grid.Column>

Gets or sets the columns.

Type:

Array.<componyx.UI.Grid.Column>

contentHeight :String

Gets or sets the height of the content container.

Type:

String

contentStyle :String

Gets or sets the style of the content container.

Type:

String

cssClassCheckBox :String

Gets or sets the css class of the check box.

Type:

String

cssClassContent :String

Gets or sets the css class of the content container.

Type:

String

cssClassDataPager :String

Gets or sets the css class of the datapager.

Type:

String

cssClassDragGhost :String

Gets or sets the css class of the drag ghost.

Type:

String

cssClassExpand :String

Gets or sets the css class of the expand cell.

Type:

String

cssClassExpandIcon :String

Gets or sets the css class of the expand icon.

Type:

String

cssClassFilterButton :String

Gets or sets the css class of the filter button.

Type:

String

cssClassFilterFrom :String

Gets or sets the css class of the filter from label.

Type:

String

cssClassFilterMenu :String

Gets or sets the css class of the filter menu.

Type:

String

cssClassFilterTo :String

Gets or sets the css class of the filter to label.

Type:

String

cssClassFixedColumn :String

Gets or sets the css class of a fixed column.

Type:

String

cssClassGroupHead :String

Gets or sets the css class of a group-item head.

Type:

String

cssClassGroupItem :String

Gets or sets the css class of a group-item.

Type:

String

cssClassHeader :String

Gets or sets the css class of the header container.

Type:

String

cssClassHeaderLabel :String

Gets or sets the css class of the header label.

Type:

String

cssClassHiddenColumn :String

Gets or sets the css class of a hidden column.

Type:

String

cssClassItem :String

Gets or sets the css class of the item.

Type:

String

cssClassNoResult :String

Gets or sets the css class of the no result container.

Type:

String

cssClassPreloader :String

Gets or sets the css class of the preloader.

Type:

String

cssClassResizeHandle :String

Gets or sets the css class of the resize handle.

Type:

String

dataPagerId :String|null

Gets or sets the id of the datapager.

Type:

String | null

draggableHeaders :Boolean

Gets or sets a value indicating whether column headers are draggable.

Type:

Boolean

draggableItems :Boolean

Gets or sets a value indicating whether data items are draggable.

Type:

Boolean

enableDataPager :Boolean

Gets or sets a value indicating whether the data pager is enabled.

Type:

Boolean

enableExpandColumn :Boolean

Gets or sets a value indicating whether the expand column is enabled.

Type:

Boolean

enableFilterRow :Boolean

Gets or sets a value indicating whether the filter row is enabled.

Type:

Boolean

enableTooltipManager :Boolean

Gets or sets a value indicating whether the tooltip manager is enabled.

Type:

Boolean

events :componyx.UI.Grid.GridEvents

Grid events

Type:

componyx.UI.Grid.GridEvents

filterBetweenLabels :Array.<String>

Gets or sets the filter from and to labels (0: FROM, 1: TO).

Type:

Array.<String>

filterMenuId :String|null

Gets or sets the id of the filter menu.

Type:

String | null

filterMenuLabels :Object.<String, String>

Gets or sets friendly labels for filter menu options (EQUALTO, NOTEQUALTO, GREATERTHAN, GREATERTHANOREQUALTO, LESSTHAN, LESSTHANOREQUALTO, STARTSWITH, NOTSTARTSWITH, ENDSWITH, NOTENDSWITH, CONTAINS, NOTCONTAINS, BETWEEN, NOTBETWEEN, IN, NOTIN, EMPTY, NOTEMPTY)

Type:

Object.<String, String>

fixedColumnScrollUpdate :Number

Gets or sets the time in milliseconds between a horizontal scrolling action and updating the position of fixed columns accordingly (defaults to 100).

Type:

Number

fixedColumns :Number

Gets or sets the amount of fixed columns at the left side of the grid which remain visible while scrolling horizontally.

Type:

Number

groupExpansion :componyx.UI.Grid.GroupExpansionOption

Gets or sets the item-group expansion option.

Type:

componyx.UI.Grid.GroupExpansionOption

groupIndent :Number

Gets or sets the indent value of an item-group in pixels (defaults to 10).

Type:

Number

headerDragSettings :componyx.library.DraggableSettings

Gets or sets the drag settings for the draggable headers.

Type:

componyx.library.DraggableSettings

headerResizeSettings :componyx.library.ResizableSettings

Gets or sets the resize settings for the resizable headers.

Type:

componyx.library.ResizableSettings

itemDragSettings :componyx.library.DraggableSettings

Gets or sets the drag settings for the draggable items.

Type:

componyx.library.DraggableSettings

itemList :Array.<componyx.UI.Grid.Item>|null

Gets or sets the list of items.

Type:

Array.<componyx.UI.Grid.Item> | null

itemTemplateId :String|null

Gets or sets the default template id of an item.

Type:

String | null

preserveTotalWidth :Boolean

Gets or sets a value indicating if the total width of the grid view is preserved when resizing a column. When enabled, resizing a column header will not change the total width of the grid, instead the change in width will be distributed over all resizable columns.

Type:

Boolean

resizableHeaders :Boolean

Gets or sets a value indicating whether column headers are resizable.

Type:

Boolean

rowExpansion :componyx.UI.Grid.RowExpansionOption

Gets or sets the row expansion option.

Type:

componyx.UI.Grid.RowExpansionOption

rowSelection :componyx.UI.Grid.RowSelectionOption

Gets or sets the row selection option.

Type:

componyx.UI.Grid.RowSelectionOption

selectSettings :componyx.library.SelectableSettings

Gets or sets the select settings for the selectable items.

Type:

componyx.library.SelectableSettings

tooltipManagerId :String|null

Gets or sets the id of the tooltip manager used to display tooltips.

Type:

String | null

useViewportHeight :Boolean

Gets or sets a value indicating whether the viewport height is utilized for the content container. The height calculation respects a possible bottom margin of the grid element.

Type:

Boolean

viewportBottomOffset :Number

Gets or sets the bottom offset in pixels for the viewport height. Only applicable when useViewportHeight is enabled.

Type:

Number

(static, readonly) ColumnSortingOption :number

ColumnSortingOption

Type:

number

Properties:

Name	Type	Description
`NONE`	number
`SINGLE`	number
`MULTI`	number

(static, readonly) FilterInputTypeOption :number

FilterInputTypeOption

Type:

number

Properties:

Name	Type	Description
`TEXTBOX`	number
`NUMERICBOX`	number
`COMBOBOX`	number
`DATEPICKER`	number
`TIMEPICKER`	number
`SLIDER`	number

(static, readonly) FilterMenuOptions :number

FilterMenuOptions

Type:

number

Properties:

Name	Type	Description
`EQUALTO`	number
`NOTEQUALTO`	number
`GREATERTHAN`	number
`GREATERTHANOREQUALTO`	number
`LESSTHAN`	number
`LESSTHANOREQUALTO`	number
`STARTSWITH`	number
`NOTSTARTSWITH`	number
`ENDSWITH`	number
`NOTENDSWITH`	number
`CONTAINS`	number
`NOTCONTAINS`	number
`BETWEEN`	number
`NOTBETWEEN`	number
`IN`	number
`NOTIN`	number
`EMPTY`	number
`NOTEMPTY`	number
`getName`	number

(static, readonly) GroupExpansionOption :number

GroupExpansionOption

Type:

number

Properties:

Name	Type	Description
`NONE`	number
`ICON`	number
`ITEM`	number

(static, readonly) RowExpansionOption :number

RowExpansionOption

Type:

number

Properties:

Name	Type	Description
`NONE`	number
`SINGLE`	number
`MULTI`	number

(static, readonly) RowSelectionOption :number

RowSelectionOption

Type:

number

Properties:

Name	Type	Description
`NONE`	number
`SINGLE`	number
`MULTI`	number

(static, readonly) SortOrderOption :number

SortOrderOption

Type:

number

Properties:

Name	Type	Description
`ASC`	number
`DESC`	number

Methods

cancelSelectClick()

Disables selection on elements for the current click event. Selection is automatically re-enabled when the current event bubbles to the document click.

collapseItem(id)

Collapses the item with the specified id.

Parameters:

Name	Type	Description
`id`	String	Item id

collapseItemGroup(id)

Collapses the item-group with the specified id.

Parameters:

Name	Type	Description
`id`	String	Item id

deselectItem(id)

Deselects the item with the specified id.

Parameters:

Name	Type	Description
`id`	String	Item id

deselectItems(ids)

Deselects the items with the specified id.

Parameters:

Name	Type	Description
`ids`	Array	The list of item ids.

destroy()

Destroys the component.

See:

componyx.UI.base.methods#destroy

disableItem(id)

Disables the item with the specified id.

Parameters:

Name	Type	Description
`id`	String	Item id

enableItem(id)

Enables the item with the specified id.

Parameters:

Name	Type	Description
`id`	String	Item id

expandItem(id)

Expands the item with the specified id.

Parameters:

Name	Type	Description
`id`	String	Item id

expandItemGroup(id)

Expands the item-group with the specified id.

Parameters:

Name	Type	Description
`id`	String	Item id

filter(columns, autoLoadopt, clearopt)

Filters the grid.

Parameters:

Name	Type	Attributes	Description
`columns`	Object		Plain Object with column id as key and a Plain Object as value. The value Object properties: value (String): The filter value. [type] (FilterMenuOptions): One or more of the options. [updateInput] (Boolean): Value indicating if the corresponding filter input value should be updated (default true).
`autoLoad`	Boolean	<optional>	Defines if the grid should reload data.
`clear`	Boolean	<optional>	Defines if the current selection should be cleared.

getColumn(id)

Returns the grid column with the specified id.

Parameters:

Name	Type	Description
`id`	String	The column id.

getColumnGroup(id)

Returns the grid column group with the specified id.

Parameters:

Name	Type	Description
`id`	String	The column id.

getColumnGroupIndex(id)

Returns the grid column group index with the specified id.

Parameters:

Name	Type	Description
`id`	String	The column id.

getColumnIndex(id)

Returns the grid column index with the specified id.

Parameters:

Name	Type	Description
`id`	String	The column id.

getItem(id)

Returns the grid item with the specified id.

Parameters:

Name	Type	Description
`id`	String	The item id.

hideColumn(id)

Hides a column in the grid.

Parameters:

Name	Type	Description
`id`	String	The id of the column.

hideColumnGroup(id)

Hides a columnGroup in the grid.

Parameters:

Name	Type	Description
`id`	String	The id of the columnGroup.

load(clearopt, pageIndexopt)

Triggers a data load.

Parameters:

Name	Type	Attributes	Description
`clear`	Boolean	<optional>	Defines if the current selection should be cleared.
`pageIndex`	Number	<optional>	Defines which page index to load.

postRender()

Handles the post render procedure.

removeColumn(id)

Removes a column from the grid.

Parameters:

Name	Type	Description
`id`	String	The id of the column.

removeColumnGroup(id)

Removes a column group header from the grid.

Parameters:

Name	Type	Description
`id`	String	The id of the column group.

removeItem(id)

Removes the grid item with the specified id.

Parameters:

Name	Type	Description
`id`	String	The item id.

render()

Renders the component.

renderItem(item)

Renders the specified item by creating a new table record or overwriting the existing table record in the grid. The item must exist in the item list and the item's position in the item group will equal the item's position within the item list.

Parameters:

Name	Type	Description
`item`	componyx.UI.Grid.Item	The item to render.

selectItem(id)

Selects the item with the specified id.

Parameters:

Name	Type	Description
`id`	String	Item id

selectItems(ids)

Selects the items with the specified id.

Parameters:

Name	Type	Description
`ids`	Array	The list of item ids.

selectable()

Returns the selectable object which enables grid table elements to be selectable.

setItemPreloaderTemplate(content)

Sets the item preloader template.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The content template. Pass null or empty string to remove the existing template.

setNoResultTemplate(content)

Sets the no result template.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The content template. Pass null or empty string to remove the existing template.

setPreloaderTemplate(content)

Sets the preloader template.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The content template. Pass null or empty string to remove the existing template.

showColumn(id)

Shows a column in the grid.

Parameters:

Name	Type	Description
`id`	String	The id of the column.

showColumnGroup(id)

Shows a columnGroup in the grid.

Parameters:

Name	Type	Description
`id`	String	The id of the columnGroup.

sort(columns, autoLoadopt, clearopt)

Sorts the grid.

Parameters:

Name	Type	Attributes	Description
`columns`	Object		Object with column id as key and one of the options from componyx.UI.Grid.SortOrderOption as value.
`autoLoad`	Boolean	<optional>	Defines if the grid should reload data.
`clear`	Boolean	<optional>	Defines if the current selection should be cleared.

suppressNextChangeEvent(action)

Suppresses any change events fired by the underlying input element during the execution of the provided action. Use this when programmatically setting a component value to prevent the change event from propagating as a user interaction. The suppression is automatically lifted after the action completes, even if it throws.

Parameters:

Name	Type	Description
`action`	function	The action to execute with change events suppressed.

Mixes In:

componyx.UI.base.methods.suppressNextChangeEvent

toggleExpandItem(id)

Expands/collapses the item with the specified id.

Parameters:

Name	Type	Description
`id`	String	Item id

toggleExpandItemGroup(id)

Expands/collapses the item-group with the specified id.

Parameters:

Name	Type	Description
`id`	String	Item id

toggleSelectItem(id)

Selects/deselects the item with the specified id.

Parameters:

Name	Type	Description
`id`	String	Item id

Type Definitions

GridAjaxEventArgs

Type:

Object

Properties:

Name Type Description

Grid

componyx.UI.Grid

The Grid instance.

eventArgs

Object | undefined

The ajax result arguments, undefined when no ajax load method is defined (item-list events only).

Properties

Name	Type	Description
`data`	string \| Object	The response data.

GridColumnOrderEventArgs

Type:

Object

Properties:

Name Type Description

Grid

componyx.UI.Grid

The Grid instance.

eventArgs

Object

The event object containing more detailed information about the event.

Properties

Name	Type	Description
`sourceIndex`	number	The original column index.
`targetIndex`	number	The new column index.

GridColumnResizeEventArgs

Type:

Object

Properties:

Name Type Description

Grid

componyx.UI.Grid

The Grid instance.

eventArgs

Object

The event object containing more detailed information about the event.

Properties

Name	Type	Description
`columnIndex`	number	The column index.
`element`	HTMLElement	The resized header element.

GridColumnSortEventArgs

Type:

Object

Properties:

Name Type Description

Grid

componyx.UI.Grid

The Grid instance.

eventArgs

Object

The event object containing more detailed information about the event.

Properties

Name	Type	Description
`columnId`	string	The column id.
`order`	componyx.UI.Grid.SortOrderOption \| undefined	The new sort order, undefined when sorting was removed.

GridEventArgs

Type:

Object

Properties:

Name	Type	Description
`Grid`	componyx.UI.Grid	The Grid instance.

GridItemEventArgs

Type:

Object

Properties:

Name Type Description

Grid

componyx.UI.Grid

The Grid instance.

eventArgs

Object

The event object containing more detailed information about the event.

Properties

Name	Type	Description
`item`	componyx.UI.Grid.Item	The grid item.
`tr`	HTMLTableRowElement	The table row of the item.
`td`	HTMLTableCellElement \| null	The group-head cell (item-group expand/collapse) or the expand content cell (item expand), otherwise null.
`event`	Event	The original event object.

GridItemOrderEventArgs

Type:

Object

Properties:

Name Type Description

Grid

componyx.UI.Grid

The Grid instance.

eventArgs

Object

The event object containing more detailed information about the event.

Properties

Name	Type	Description
`items`	Array.<componyx.UI.Grid.Item>	The moved items (a group item includes its child items).
`fromIndex`	number	The original item index.
`toIndex`	number	The target item index.
`resultIndex`	number	The resulting index after the move.
`dropZone`	HTMLElement	The drop zone (table row) the items were dropped on.
`nextRow`	HTMLElement \| null	The row before which the items were inserted, null when appended at the end.

GridQueryEventArgs

Type:

Object

Properties:

Name Type Description

Grid

componyx.UI.Grid

The Grid instance.

eventArgs

Object

The load query.

Properties

Name	Type	Description
`sortOrder`	Object.<string, componyx.UI.Grid.SortOrderOption>	The sort order per column id.
`filter`	Object	The active filter.
`pageIndex`	number	The page index (1-based).