Element: <oj-data-grid>

Oracle® JavaScript Extension Toolkit (JET)
17.0.0
F92240-01

Since:
  • 0.6.0
Module:
  • ojdatagrid

QuickNav

Slots

Attributes


Context Objects

Events

Methods

Type Definitions

Other Topics


JET DataGrid

Description:

A JET DataGrid is a themeable, WAI-ARIA compliant element that displays data in a cell oriented grid. Data inside the DataGrid can be associated with row and column headers. Page authors can customize the content rendered inside cells and headers.

<oj-data-grid
  id="datagrid"
  style="width:250px;height:250px"
  aria-label="My Data Grid"
  data='{{dataSource}}'>
</oj-data-grid>

Data

The JET DataGrid gets its data from a DataGridProvider. There is a DataProvider based out of the box DataGridProvider implementation RowDataGridProvider starting in JET 13.1.0. It is important to understand the limitations detailed there to understand if you should write your own. Developers can also create their own DataGridProvider by implementing the DataGridProvider interface. See the cookbook for an example of a custom DataGridProvider.

Touch End User Information

Target Gesture Action
Cell Tap Focus on the cell. If selectionMode for cells is enabled, selects the cell as well. If multiple selection is enabled the selection handles will appear. Tapping a different cell will deselect the previous selection.
Press & Hold Display context menu
Row Tap If selectionMode for rows is enabled, selects the row as well. If multiple selection is enabled the selection handles will appear. Tapping a different row will deselect the previous selection.
Drag If the row that is dragged contains the active cell and dnd reorder row is enabled the row will be moved within the DataGrid.
Press & Hold Display context menu
Header Tap If Multiple Selection is enabled or in row selectionMode, the row or column will be selected. Selection handles will appear for multiple selection. Otherwise, header cell will be focused.
Press & Hold Display context menu
Header Gridline Drag Resizes the header if resizable enabled along the axis.
Corner Tap Tapping on the corner will perform a select all operation on the datagrid if multiple selection is enabled.

Keyboard End User Information

Target Key Action
Cell Tab The first Tab into the DataGrid moves focus to the first cell of the first row. The second Tab moves focus to the next focusable element outside of the DataGrid.
Shift + Tab The first Shift + Tab into the DataGrid moves focus to the first cell of the first row. The second Shift + Tab moves focus to the previous focusable element outside of the DataGrid.
LeftArrow Moves focus to the cell of the previous column within the current row. There is no wrapping at the beginning or end of the columns. If a row header is present, then the row header next to the first column of the current row will gain focus.
RightArrow Moves focus to the cell of the next column within the current row. There is no wrapping at the beginning or end of the columns.
UpArrow Moves focus to the cell of the previous row within the current column. There is no wrapping at the beginning or end of the rows. If a column header is present, then the column header above the first row of the current column will gain focus.
DownArrow Moves focus to the cell of the next row within the current column. There is no wrapping at the beginning or end of the rows.
Home Moves focus to the first (available) cell of the current row.
End Moves focus to the last (available) cell of the current row.
PageUp Moves focus to the first (available) cell in the current column.
PageDown Moves focus to the last (available) cell in the current column.
Ctrl + Space Selects all the cells of the current column. This is only available if multiple cell selection mode is enabled.
Shift + Space Selects all the cells of the current row. This is only available if multiple cell selection mode is enabled.
Shift + Arrow Extends the current selection.
Ctrl + Arrow Move focus to the start or end cell in a contiguous data range in the direction of the arrow, i.e. if there is an empty cell, focus moves to the cell adjacent to empty cell. An empty cell is defined as a cell with no children or text content inside the cell.
If the end of the rendered data range is reached, that will be where the focus moves to, new data will be fetched, and another keyboard gesture will be required to keep searching
Ctrl + Home Move focus to the first (available) cell of grid
Ctrl + End Move focus to the last (available) cell of grid
Shift + F8 Freezes the current selection, therefore allowing user to move focus to another location to add or remove additional cells to the current selection. To deselect begin the discontiguous selection within an existing selection. This is used to accomplish non-contiguous selection. Use the Esc key or press Shift+F8 again to exit this mode.
Shift + F10 Brings up the context menu.
Ctrl + C It triggers ojCopyRequest with the selected range of cells. Only a single range may be copied.
Ctrl + X Marks the current row to move if dnd is enabled and the datasource supports move operation. If datasource is datagridProvider, It triggers ojCutRequest with the selected range of cells. Only a single range may be cut.
Ctrl + V Move the row that is marked to directly under the current row. If the row with the focused cell is the last row, then it will be move to the row above the current row. If datasource is datagridProvider, it triggers ojPasteRequest with the selected range of cells. Investigate the source selection/action to determine how to handle the paste operation.
Ctrl + A If multiple selection is enabled, performs a select all on the datagrid.
Ctrl + Alt + 5 Read the context and content of the current cell to the screen reader.
F2 Makes the content of the cell actionable, such as a link.
Enter Makes the content of the cell actionable and acts on the content, such as going to a link.
Alt + Enter Makes the content of the cell actionable, such as a link.
Esc If the cell is actionable it exits actionable mode.
Column Header Cell LeftArrow Moves focus to the previous column header. There is no wrapping at the beginning or end of the column headers.
RightArrow Moves focus to the next column header. There is no wrapping at the beginning or end of the column headers.
DownArrow Moves focus to the cell of the first row directly below the column header. If using nested headers will move focus up a level.
UpArrow If using nested headers will move focus down a level.
Ctrl + UpArrow If in the column end header, move focus to upside in a contiguous data range including the level 0 of the active index in the column header if it exists.
If there is an empty cell in between, focus moves to the cell adjacent to empty cell. An empty cell is defined as a cell with no children or text content inside the cell.
If the end of the rendered data range is reached, that will be where the focus moves to, new data will be fetched, and another keyboard gesture will be required to keep searching
Ctrl + LeftArrow On an expanded parent column header, collapses the header.
Ctrl + RightArrow On a collapsed parent column header, expands the header.
Ctrl + DownArrow If in the column header, move focus to down side in a contiguous data range including level 0 of the active index in the column end header if it exists.
If there is an empty cell in between, focus moves to the cell adjacent to empty cell. An empty cell is defined as a cell with no children or text content inside the cell.
If the end of the rendered data range is reached, that will be where the focus moves to, new data will be fetched, and another keyboard gesture will be required to keep searching
Ctrl + Alt + R Triggers ojFilterRequest event if the column is filterable.
Enter Toggle the sort order of the column if the column is sortable.
Shift + F10 Brings up the context menu.
Space If multiple selection is enabled and not in selectionMode row, the column(s) underneath the header will be selected.
Shift + Right Arrow If multiple selection is enabled and not in selectionMode row, the column selection will extend to the right by the number of columns covered by the header to the right of the current selection frontier header.
Shift + Left Arrow If multiple selection is enabled and not in selectionMode row, the column selection will extend to the right left the number of columns covered by the header to the left of the current selection frontier header.
Shift + Up Arrow If multiple selection is enabled and not in selectionMode row and the current selection frontier header has a parent nested header, the column selection will extend to cover the columns beneath the parent header.
Extending the selection with arrow keys will use the parent level. If the parent header is directly above the anchor header, the anchor will shift to the parent header and future selections will be based on the parent header.
If we are already at the highest level, nothing will happen.
Shift + Down Arrow If multiple selection is enabled and not in selectionMode row and the current selection frontier header has a child nested header, the column selection will extend to cover the columns beneath the child header.
Extending the selection with arrow keys will use the child level. If the child header is directly below the anchor header, the anchor will shift to the child header and future selections will be based on the child header.
If we are already at the lowest level, it will simply move into the databody and select the first cell underneath the header.
Row Header Cell UpArrow Moves focus to the previous row header. There is no wrapping at the beginning or end of the row headers.
DownArrow Moves focus to the next row header. There is no wrapping at the beginning or end of the row headers.
RightArrow Moves focus to the cell of the first column directly next to the row header. If using nested headers will move focus up a level.
LeftArrow Moves focus to the cell of the first column directly next to the row header in RTL direction. If using nested headers will move focus down a level.
Ctrl + LeftArrow If inside header and hierarchical header will expand, if expanded or not hierarchical,
move focus to left side in a contiguous data range (including the row header).
if there is an empty cell in between, focus moves to the cell adjacent to empty cell. An empty cell is defined as a cell with no children or text content inside the cell.
If the end of the rendered data range is reached, that will be where the focus moves to, new data will be fetched, and another keyboard gesture will be required to keep searching
Ctrl + RightArrow If inside header and hierarchical header will expand, if expanded or not hierarchical,
move focus to right side in a contiguous data range (including the row End header).
if there is an empty cell in between, focus moves to the cell adjacent to empty cell. An empty cell is defined as a cell with no children or text content inside the cell.
If the end of the rendered data range is reached, that will be where the focus moves to, new data will be fetched, and another keyboard gesture will be required to keep searching
Enter Toggle the sort order of the row if the row is sortable.
Shift + F10 Brings up the context menu.
Space If multiple selection is enabled, the row(s) underneath the header will be selected.
Shift + Up Arrow If multiple selection is enabled, the row selection will extend up by the number of rows covered by the header above the current selection frontier header.
Shift + Down Arrow If multiple selection is enabled, the row selection will extend down by the number of rows covered by the header below the current selection frontier header.
Shift + Left Arrow If multiple selection is enabled and the current selection frontier header has a parent nested header, the row selection will extend to cover the rows beneath the parent header.
Extending the selection with arrow keys will use the parent level. If the parent header is directly above the anchor header, the anchor will shift to the parent header and future selections will be based on the parent header.
If we are already at the highest level, nothing will happen.
Shift + Right Arrow If multiple selection is enabled and the current selection frontier header has a child nested header, the row selection will extend to cover the rows beneath the child header.
Extending the selection with arrow keys will use the child level. If the child header is directly below the anchor header, the anchor will shift to the child header and future selections will be based on the child header.
If we are already at the lowest level, it will simply move into the databody and select the first cell underneath the header.

Accessibility

Since role="application" is used in the DataGrid, application should always apply an aria-label to the DataGrid element so that it can distinguish from other elements with application role.

Nesting collection components such as ListView, Table, TreeView, and DataGrid inside of DataGrid is not supported.

Custom Colors

Using colors, including background and text colors, is not accessible if it is the only way information is conveyed. Low vision users may not be able to see the different colors, and in high contrast mode the colors are removed. The Redwood approved way to show status is to use badge.

Header Context And Cell Context

For all header and cell attributes, developers can specify a function as the return value. The function takes a single argument, which is an object that contains contextual information about the particular header or cell. This gives developers the flexibility to return different value depending on the context.

For header attributes, the context parameter contains the following keys:

Key Description
axis The axis of the header. Possible values are 'row', 'column', 'rowEnd', and 'columnEnd'.
componentElement A reference to the DataGrid element.
datasource A reference to the data source object.
index The index of the header, where 0 is the index of the first header.
key The key of the header.
data The data object for the header.
parentElement The header cell element. The renderer can use this to directly append content to the header cell element.
level The level of the header. The outermost header is level zero.
depth The the number of levels the header spans.
extent The number of indexes the header spans.

For cell attributes, the context parameter contains the following keys:

Key Description
componentElement A reference to the DataGrid element.
datasource A reference to the data source object.
indexes The object that contains both the zero based row index and column index in which the cell is bound to.
keys The object that contains both the row key and column key which identifies the cell.
cell An object containing attribute data which should be used to reference the data in the cell.
data The plain data for the cell.
parentElement The data cell element. The renderer can use this to directly append content to the data cell element.
extents The object that contains both the row extent and column extent of the cell.

Note that a custom DataGridProvider can return additional header and cell context information in the metadata property.

Selection

The DataGrid supports both cell based and row based selection mode, which developers can specify using the selectionMode attribute. For each mode developers can also specify whether single or multiple cells/rows can be selected.

Developers can specify or retrieve selection from the DataGrid using the selection attribute. A selection in DataGrid consists of an array of ranges. Each range contains the following keys: startIndex, endIndex, startKey, endKey. Each of the keys contains value for 'row' and 'column'. If endIndex and endKey are not specified, -1, or null, that means the range is unbounded, i.e. the cells of the entire row/column are selected.

Geometry Management

If the DataGrid is not styled with a fixed size, then it will responds to a change to the size of its container. Note that unlike Table the content of the cell does not affect the height of the row. The height of the rows must be pre-determined and specified by the developer or a default size will be used.

The DataGrid does not support % width and height values in the header style or style class.

Reading direction

The order of the column headers will be rendered in reverse order in RTL reading direction. The location of the row header will also be different between RTL and LTR direction. It is up to the developers to ensure that the content of the header and data cell are rendered correctly according to the reading direction.

As with any JET element, in the unusual case that the directionality (LTR or RTL) changes post-init, the DataGrid must be refresh()ed.

Templating Alignment

The DataGrid cells are horizontal flex boxes. To change the alignment use the classes documented in the flex layout section of the cookbook along with header and cell className attributes.

Performance

Data Set Size

As a rule of thumb, it's recommended that applications limit the amount of data to display. Displaying large number of items in DataGrid makes it hard for users to find what they are looking for, but affects the scrolling performance as well. If displaying large number of items is necessary, consider use a paging control with DataGrid to limit the number of items to display at a time. Also consider setting scrollPolicy to 'scroll' to enable virtual scrolling to reduce the number of elements in the DOM at any given time .

Cell Content

DataGrid allows developers to specify arbitrary content inside its cells. In order to minimize any negative effect on performance, you should avoid putting large numbers of heavy-weight content inside a cell because as you add more complexity to the structure, the effect will be multiplied because there can be many items in the DataGrid.

Templating

When deciding to use a template or renderer, consider the conditionality of the template. Having templates with several if blocks can significantly hinder performance. If you have this case either specify a function for the template to remove conditions from the template itself or use the renderer attribute.

Context Menu

The DataGrid has a default context menu for accessibly performing operations such as header resize and sort. When defining a context menu, DataGrid allows the app to use the built-in behavior for operations such as header resize and sort by specifying menu list items as follows.

  • <li data-oj-command="oj-datagrid-['commandname']" />

Note that if no <a> element is specified inside of a list item with a command, the translated text from the default menu will be supplied in an anchor tag.

The supported commands:

Default Function data-oj-command value
Resize menu (contains width and height resize) oj-datagrid-resize
Sort Row menu (contains ascending and descending sort) oj-datagrid-sortRow
Sort Column menu (contains ascending and descending sort) oj-datagrid-sortCol
Resize Width oj-datagrid-resizeWidth
Resize Height oj-datagrid-resizeHeight
Resize Fit To Content oj-datagrid-resizeFitToContent
Sort Row Ascending oj-datagrid-sortRowAsc
Sort Row Descending oj-datagrid-sortRowDsc
Sort Column Ascending oj-datagrid-sortColAsc
Sort Column Descending oj-datagrid-sortColDsc
Cut (for reordering) oj-datagrid-cut
Paste (for reordering) oj-datagrid-paste
CutCells (for data transferring) oj-datagrid-cutCells
CopyCells (for data transferring) oj-datagrid-copyCells
PasteCells (for data transferring) oj-datagrid-pasteCells
Fill oj-datagrid-fillCells
Select Multiple Cells on Touch Device oj-datagrid-discontiguousSelection
Freeze Columns oj-datagrid-freezeCol
Freeze Rows oj-datagrid-freezeRow
Unfreeze Columns oj-datagrid-unfreezeColumn
Unfreeze Rows oj-datagrid-unfreezeRow
Hide Columns oj-datagrid-hideCol
Unhide Columns oj-datagrid-unhideCol
Hide Rows oj-datagrid-hideRow
Unhide Rows oj-datagrid-unhideRow


Usage

Signature:

interface DataGridElement<K, D>

Generic Parameters
ParameterDescription
KType of key of the dataprovider
DType of data from the dataprovider
Typescript Import Format
//To typecheck the element APIs, import as below.
import { DataGridElement } from "ojs/ojdatagrid";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojdatagrid";

For additional information visit:

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.


Styling Classes

Category: depth

Used to style the default header widths and heights. By default the datagrid supports up to depth 7.
If you have headers width depth greater than 7 specify the defaults using the class name description or use apply custom style rules to the headers.

Class template:

.oj-datagrid-depth-[1-7]

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [1-7]

Value (required) Name Description
1 1 Datagrid Depth level 1
2 2 Datagrid Depth level 2
3 3 Datagrid Depth level 3
4 4 Datagrid Depth level 4
5 5 Datagrid Depth level 5
6 6 Datagrid Depth level 6
7 7 Datagrid Depth level 7

Category: padding

Used to style a datagrid cell so that it has no padding or default padding.

Classes:

.oj-datagrid-cell-no-padding
.oj-datagrid-cell-padding

CSS Variables

See JET CSS Variables for additional details.
Name Type Description
--oj-data-grid-column-width <length> Data grid column width

Slots

JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.

cellTemplate

Note: Inline Template Slots are only available when using a DataGridProvider.

The cellTemplate slot is used to specify the template for the content of the cell.

When the template is executed for each item, it will have access to the binding context containing the following properties:

  • $current - an object that contains information for the current item. (See oj.ojDataGrid.CellTemplateContext
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
datasource DataGridProvider.<D> A reference to the grid data provider object.
item GridBodyItem.<D> True if the current item is a leaf node.
mode string The mode of the row containing the cell. It can be "edit" or "navigation".

columnEndHeaderLabelTemplate

Note: Inline Template Slots are only available when using a DataGridProvider.

The columnEndHeaderLabelTemplate slot is used to specify the template for the content of the column end header label.

When the template is executed for each item, it will have access to the binding context containing the following properties:

  • $current - an object that contains information for the current item. (See oj.ojDataGrid.LabelTemplateContext or the table below for a list of properties available on $current)
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
datasource DataGridProvider.<D> A reference to the grid data provider object.
item GridItem.<D> True if the current item is a leaf node.

columnEndHeaderTemplate

Note: Inline Template Slots are only available when using a DataGridProvider.

The columnEndHeaderTemplate slot is used to specify the template for the content of the column end header.

When the template is executed for each item, it will have access to the binding context containing the following properties:

  • $current - an object that contains information for the current item. (See oj.ojDataGrid.HeaderTemplateContext
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
datasource DataGridProvider.<D> A reference to the grid data provider object.
item GridHeaderItem.<D> True if the current item is a leaf node.

columnHeaderContentTemplate

Note: Inline Template Slots are only available when using a DataGridProvider.

The columnHeaderContentTemplate slot is used to specify the template for the content of the column header. If both columnHeaderTemplate and columnHeaderContentTemplate are specified then columnHeaderTemplate takes precedence.

When the template is executed for each item, it will have access to the binding context containing the following properties:

  • $current - an object that contains information for the current item. (See oj.ojDataGrid.HeaderTemplateContext
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
datasource DataGridProvider.<D> A reference to the grid data provider object.
item GridHeaderItem.<D> True if the current item is a leaf node.

columnHeaderLabelContentTemplate

Note: Inline Template Slots are only available when using a DataGridProvider.

The columnHeaderLabelContentTemplate slot is used to specify the template for the content of the column header label. If both columnHeaderLabelTemplate and columnHeaderLabelContentTemplate are specified then columnHeaderLabelTemplate takes precedence.

When the template is executed for each item, it will have access to the binding context containing the following properties:

  • $current - an object that contains information for the current item. (See oj.ojDataGrid.LabelTemplateContext or the table below for a list of properties available on $current)
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
datasource DataGridProvider.<D> A reference to the grid data provider object.
item GridItem.<D> True if the current item is a leaf node.

columnHeaderLabelTemplate

Note: Inline Template Slots are only available when using a DataGridProvider.

The columnHeaderLabelTemplate slot is used to specify the template for the content of the column header label.

When the template is executed for each item, it will have access to the binding context containing the following properties:

  • $current - an object that contains information for the current item. (See oj.ojDataGrid.LabelTemplateContext or the table below for a list of properties available on $current)
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
datasource DataGridProvider.<D> A reference to the grid data provider object.
item GridItem.<D> True if the current item is a leaf node.

columnHeaderTemplate

Note: Inline Template Slots are only available when using a DataGridProvider.

The columnHeaderTemplate slot is used to specify the template for the content of the column header. If both columnHeaderTemplate and columnHeaderContentTemplate are specified then columnHeaderTemplate takes precedence.

When the template is executed for each item, it will have access to the binding context containing the following properties:

  • $current - an object that contains information for the current item. (See oj.ojDataGrid.HeaderTemplateContext
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
datasource DataGridProvider.<D> A reference to the grid data provider object.
item GridHeaderItem.<D> True if the current item is a leaf node.

contextMenu

The contextMenu slot is set on the oj-menu within this element. This is used to designate the JET Menu that this component should launch as a context menu on right-click, Shift-F10, Press & Hold, or component-specific gesture. If specified, the browser's native context menu will be replaced by the JET Menu specified in this slot.

The application can register a listener for the Menu's ojBeforeOpen event. The listener can cancel the launch via event.preventDefault(), or it can customize the menu contents by editing the menu DOM directly, and then calling refresh() on the Menu.

To help determine whether it's appropriate to cancel the launch or customize the menu, the ojBeforeOpen listener can use component API's to determine which table cell, chart item, etc., is the target of the context menu. See the JSDoc of the individual components for details.

Keep in mind that any such logic must work whether the context menu was launched via right-click, Shift-F10, Press & Hold, or component-specific touch gesture.

rowEndHeaderLabelTemplate

Note: Inline Template Slots are only available when using a DataGridProvider.

The rowEndHeaderLabelTemplate slot is used to specify the template for the content of the row end header label.

When the template is executed for each item, it will have access to the binding context containing the following properties:

  • $current - an object that contains information for the current item. (See oj.ojDataGrid.LabelTemplateContext or the table below for a list of properties available on $current)
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
datasource DataGridProvider.<D> A reference to the grid data provider object.
item GridItem.<D> True if the current item is a leaf node.

rowEndHeaderTemplate

Note: Inline Template Slots are only available when using a DataGridProvider.

The rowEndHeaderTemplate slot is used to specify the template for the content of the row end header.

When the template is executed for each item, it will have access to the binding context containing the following properties:

  • $current - an object that contains information for the current item. (See oj.ojDataGrid.HeaderTemplateContext
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
datasource DataGridProvider.<D> A reference to the grid data provider object.
item GridHeaderItem.<D> True if the current item is a leaf node.

rowHeaderContentTemplate

Note: Inline Template Slots are only available when using a DataGridProvider.

The rowHeaderContentTemplate slot is used to specify the template for the content of the row header. If both rowHeaderTemplate and rowHeaderContentTemplate are specified then rowHeaderTemplate takes precedence.

When the template is executed for each item, it will have access to the binding context containing the following properties:

  • $current - an object that contains information for the current item. (See oj.ojDataGrid.HeaderTemplateContext
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
datasource DataGridProvider.<D> A reference to the grid data provider object.
item GridHeaderItem.<D> True if the current item is a leaf node.

rowHeaderLabelContentTemplate

Note: Inline Template Slots are only available when using a DataGridProvider.

The rowHeaderLabelContentTemplate slot is used to specify the template for the content of the row header label. If both rowHeaderLabelTemplate and rowHeaderLabelContentTemplate are specified then rowHeaderLabelTemplate takes precedence.

When the template is executed for each item, it will have access to the binding context containing the following properties:

  • $current - an object that contains information for the current item. (See oj.ojDataGrid.LabelTemplateContext or the table below for a list of properties available on $current)
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
datasource DataGridProvider.<D> A reference to the grid data provider object.
item GridItem.<D> True if the current item is a leaf node.

rowHeaderLabelTemplate

Note: Inline Template Slots are only available when using a DataGridProvider.

The rowHeaderLabelTemplate slot is used to specify the template for the content of the row header label.

When the template is executed for each item, it will have access to the binding context containing the following properties:

  • $current - an object that contains information for the current item. (See oj.ojDataGrid.LabelTemplateContext
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
datasource DataGridProvider.<D> A reference to the grid data provider object.
item GridItem.<D> True if the current item is a leaf node.

rowHeaderTemplate

Note: Inline Template Slots are only available when using a DataGridProvider.

The rowHeaderTemplate slot is used to specify the template for the content of the row header. If both rowHeaderTemplate and rowHeaderContentTemplate are specified then rowHeaderTemplate takes precedence.

When the template is executed for each item, it will have access to the binding context containing the following properties:

  • $current - an object that contains information for the current item. (See oj.ojDataGrid.HeaderTemplateContext
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
datasource DataGridProvider.<D> A reference to the grid data provider object.
item GridHeaderItem.<D> True if the current item is a leaf node.

Attributes

banding-interval :Object

Row banding and column banding intervals within the DataGrid body.

Names
Item Name
Property bandingInterval
Property change event bandingIntervalChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-banding-interval-changed

banding-interval.column :number

Column banding intervals within the DataGrid body.

Default Value:
  • 0
Names
Item Name
Property bandingInterval.column

banding-interval.row :number

Row banding intervals within the DataGrid body.

Default Value:
  • 0
Names
Item Name
Property bandingInterval.row

cell :Object

The cell attribute contains a subset of attributes for databody cells.
Names
Item Name
Property cell
Property change event cellChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-cell-changed

cell.alignment :Object

The cell alignment attribute contains a subset of attributes for cell content alignment.
Names
Item Name
Property cell.alignment

(nullable) cell.alignment.horizontal :((context: ojDataGrid.CellContext<K,D>) => ojDataGrid.HorizontalAlignment) | oj.ojDataGrid.HorizontalAlignment

Specifies horizontal alignment of databody cells. If a string is specified the alignment will be added to all databody cells. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a alignment.
Default Value:
  • 'auto'
Names
Item Name
Property cell.alignment.horizontal

(nullable) cell.alignment.vertical :((context: ojDataGrid.HeaderContext<K,D>) => ojDataGrid.VerticalAlignment) | oj.ojDataGrid.VerticalAlignment

Specifies vertical alignment of databody cells. If a string is specified the alignment will be added to all databody cells. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a alignment.
Default Value:
  • 'auto'
Names
Item Name
Property cell.alignment.vertical

(nullable) cell.class-name :((context: ojDataGrid.CellContext<K,D>) => string | void | null) | string | null

The CSS style class to apply to data body in the DataGrid. If a string is specified the class will be added to all data body cells. If a function is specified it takes a single parameter, cellContext and must return a string to be set as a className.

Default Value:
  • null
Names
Item Name
Property cell.className

(nullable) cell.editable :((context: ojDataGrid.CellContext<K,D>) => string | void | null) | string

Specifies if a cell is editable in the DataGrid. If a string is specified the ability will be added to all data body cells. If a function is specified it takes a single parameter, cellContext and must return a string to set editability. This should be used to make editable cells read only. Use it with edit-mode, see edit-mode

Supported Values:
Value Description
disable disable editability on a cell (making it read-only)
enable enable editability on a cell
Default Value:
  • 'enable'
Names
Item Name
Property cell.editable

(nullable) cell.renderer :((context: ojDataGrid.CellContext<K,D>) => {insert: HTMLElement | string} | void | null) | null

The renderer function that renders the content of the data body. See cellContext for information on the object passed into the cell renderer function. The function should return one of the following:

  • An Object with the following property:
    • insert: HTMLElement | string - A string or a DOM element of the content inside the data body.
  • undefined: If the developer chooses to append to the data body element directly, the function should return undefined.
If no renderer is specified, the DataGrid will treat the cell data as a string.
Default Value:
  • null
Names
Item Name
Property cell.renderer

(nullable) cell.style :((context: ojDataGrid.CellContext<K,D>) => string | void | null) | string | null

The inline style to apply to directly to cells in the data body. If a string is specified the class will be added to all data body cells. If a function is specified it takes a single parameter, cellContext and must return a string.

Default Value:
  • null
Names
Item Name
Property cell.style

current-cell :(oj.ojDataGrid.CurrentCell.<K>|null)

The cell that currently have keyboard focus. Note that if the current cell is set to an item that is currently not available (not fetched in high-water mark scrolling case or inside a collapsed parent node) or invalid, then the value is not applied.

If the currentCell is a databody cell the object will contain the following information: {type: 'cell', indexes: {row: rowIndexValue, column: columnIndexValue}, keys: {row: rowKeyValue, column: columnKeyValue}}

If the currentCell is a header cell the object will contain the following information: {type: 'header', axis:axisValue, index: indexValue, key: keyValue, level: levelValue}

If the currentCell is a label cell the object will contain the following information: {type: 'label', axis:axisValue, level: levelValue}

If the currentCell is a label cell the object will contain the following information: {type: 'label', axis:axisValue, level: levelValue}

If setting the property to a databody cell, either indexes or keys must be specified, if both are specified indexes will be used as a hint. If setting the property to a header cell, axis and either "index and level" or "key" must be specified, if both are specified "index and level" will be used as a hint. If level is not specified it will default to 0.

Default Value:
  • null
Supports writeback:
  • true
Names
Item Name
Property currentCell
Property change event currentCellChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-current-cell-changed

data :(DataGridProvider.<D>|null) data :(DataGridProvider.<D>|null)

The data source for the DataGrid must be an extension of DataGridProvider. Usage of DataGridDataSource and DataProvider are deprecated starting 11.0.0 See the data section in the introduction for data sources provided out of the box. If the data attribute is not specified, an empty DataGrid is displayed.

Type details
Setter Type(DataGridProvider.<D>|null)
Getter TypeDataGridProvider.<D>
Default Value:
  • null
Names
Item Name
Property data
Property change event dataChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-data-changed

data-transfer-options :Object

Enables or disables data transfer features on the datagrid.

Names
Item Name
Property dataTransferOptions
Property change event dataTransferOptionsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-data-transfer-options-changed

data-transfer-options.copy :"disable"|"enable"

Enables or disables copy option on the datagrid. Cut/Copy relies on selection, so it is supported in all selection modes.

Supported Values:
Value Description
disable the default DataGrid option which is disabled.
enable allows to copy selected range of cells.
Default Value:
  • 'disable'
Names
Item Name
Property dataTransferOptions.copy

data-transfer-options.cut :"disable"|"enable"

Enables or disables cut option on the datagrid. Cut/Copy relies on selection, so it is supported in all selection modes.

Supported Values:
Value Description
disable the default DataGrid option which is disabled.
enable allows to cut selected range of cells.
Default Value:
  • 'disable'
Names
Item Name
Property dataTransferOptions.cut

data-transfer-options.fill :"disable"|"enable"

Enables or disables flood fill option on the datagrid. Floodfill relies on multiple cell selection, so is only supported in the multiple cell selection mode. Floodfill is NOT supported on selected rows or selected columns.

The Floodfill action must be a vertical OR horizontal gesture. Floodfilling in a diagonal direction is NOT supported.

Supported Values:
Value Description
disable the default DataGrid option which is disabled.
enable allows for selecting a range of cells and flood filling another selected range.
Default Value:
  • 'disable'
Names
Item Name
Property dataTransferOptions.fill

data-transfer-options.header-label-cut :"disable"|"enable"

Enables or disables cut label option on the datagrid. Cut/Copy relies on selection, so it is supported in all selection modes.

Supported Values:
Value Description
disable the default DataGrid option which is disabled.
enable allows to cut label.
Default Value:
  • 'disable'
Names
Item Name
Property dataTransferOptions.headerLabelCut

data-transfer-options.paste :"disable"|"enable"

Enables or disables paste option on the datagrid. Paste relies on selection, so it is supported in all selection modes.

Supported Values:
Value Description
disable the default DataGrid option which is disabled.
enable allows to paste selected range of cells.
Default Value:
  • 'disable'
Names
Item Name
Property dataTransferOptions.paste

dnd :Object

Enables or disables drag and drop features on the datagrid.

Names
Item Name
Property dnd
Property change event dndChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-dnd-changed

(nullable) dnd.drag :Object

An object that describes drag functionality.

See the dnd attribute for usage examples.

Default Value:
  • null
Names
Item Name
Property dnd.drag

(nullable) dnd.drag.column-end-labels :Object

If this object is specified, the datagrid will initiate pivot operation when the user drags on column end labels.

See the dnd attribute for usage examples.

Properties:
Name Type Argument Description
dataTypes string | Array.<string> <optional>
 The MIME types to use for the dragged data in the dataTransfer object. This can be a string if there is only one type, or an array of strings if multiple types are needed.

For example, if selected columns of employee data are being dragged, dataTypes could be "application/ojdatagridlabels+json". Drop targets can examine the data types and decide whether to accept the data. A text input may only accept "text" data type, while a chart for displaying employee data may be configured to accept the "application/ojdatagridcolumns+json" type.

For each type in the array, dataTransfer.setData will be called with the specified type and the JSON version of the selected columns data as the value. The selected columns data is an array of objects, with each object representing one selected column.

For drag over header, the grid will find the corresponding axis header label and match the dropType.

This property is required unless the application calls setData itself in a dragStart callback function.
drag function(DragEvent):void <optional>
 A callback function that receives the "drag" event as its argument.

function(event)

Parameters:

event: The DOM event object
dragEnd function(DragEvent):void <optional>
 A callback function that receives the "dragend" event as its argument.

function(event)

Parameters:

event: The DOM event object
dragStart function(DragEvent, ojDataGrid.DragHeaderLabelContext):void <optional>
 A callback function that receives the "dragstart" event and context information as its arguments.

function(event, context)

Parameters:

event: The DOM event object

context: oj.ojDataGrid.DragHeaderLabelContext object.
This function can set its own data and drag image as needed. If dataTypes is specified, event.dataTransfer is already populated with the default data when this function is invoked. If dataTypes is not specified, this function must call event.dataTransfer.setData to set the data or else the drag operation will be cancelled. In either case, the drag image is set to an image of the selected columns visible on the datagrid.
Names
Item Name
Property dnd.drag.columnEndLabels

(nullable) dnd.drag.column-labels :Object

If this object is specified, the datagrid will initiate pivot operation when the user drags a column label.

See the dnd attribute for usage examples.

Properties:
Name Type Argument Description
dataTypes string | Array.<string> <optional>
 The MIME types to use for the dragged data in the dataTransfer object. This can be a string if there is only one type, or an array of strings if multiple types are needed.

For example, if selected columns of employee data are being dragged, dataTypes could be "application/ojdatagridcolumnlabels+json". Drop targets can examine the data types and decide whether to accept the data. A text input may only accept "text" data type, while a chart for displaying employee data may be configured to accept the "application/ojdatagridcolumns+json" type.

For each type in the array, dataTransfer.setData will be called with the specified type and the JSON version of the selected columns data as the value. The selected columns data is an array of objects, with each object representing one selected column.

For drag over header, the grid will find the corresponding axis header label and match the dropType. This property is required unless the application calls setData itself in a dragStart callback function.
drag function(DragEvent):void <optional>
 A callback function that receives the "drag" event as its argument.

function(event)

Parameters:

event: The DOM event object
dragEnd function(DragEvent):void <optional>
 A callback function that receives the "dragend" event as its argument.

function(event)

Parameters:

event: The DOM event object
dragStart function(DragEvent, ojDataGrid.DragHeaderLabelContext):void <optional>
 A callback function that receives the "dragstart" event and context information as its arguments.

function(event, context)

Parameters:

event: The DOM event object

context: oj.ojDataGrid.DragHeaderLabelContext object.
This function can set its own data and drag image as needed. If dataTypes is specified, event.dataTransfer is already populated with the default data when this function is invoked. If dataTypes is not specified, this function must call event.dataTransfer.setData to set the data or else the drag operation will be cancelled. In either case, the drag image is set to an image of the selected columns visible on the datagrid.
Names
Item Name
Property dnd.drag.columnLabels

(nullable) dnd.drag.columns :Object

If this object is specified, the datagrid will initiate drag operation when the user drags on selected columns.

See the dnd attribute for usage examples.

Properties:
Name Type Argument Description
dataTypes string | Array.<string> <optional>
 The MIME types to use for the dragged data in the dataTransfer object. This can be a string if there is only one type, or an array of strings if multiple types are needed.

For example, if selected columns of employee data are being dragged, dataTypes could be "application/ojdatagridcolumns+json". Drop targets can examine the data types and decide whether to accept the data. A text input may only accept "text" data type, while a chart for displaying employee data may be configured to accept the "application/ojdatagridcolumns+json" type.

For each type in the array, dataTransfer.setData will be called with the specified type and the JSON version of the selected columns data as the value. The selected columns data is an array of objects, with each object representing one selected column.

For drag over databody,if the types assigned for row and column are the same, then the grid will always assume it is a row drag/drop.

This property is required unless the application calls setData itself in a dragStart callback function.
drag function(DragEvent):void <optional>
 A callback function that receives the "drag" event as its argument.

function(event)

Parameters:

event: The DOM event object
dragEnd function(DragEvent):void <optional>
 A callback function that receives the "dragend" event as its argument.

function(event)

Parameters:

event: The DOM event object
dragStart function(DragEvent, ojDataGrid.DragHeaderContext):void <optional>
 A callback function that receives the "dragstart" event and context information as its arguments.

function(event, context)

Parameters:

event: The DOM event object

context: oj.ojDataGrid.DragHeaderContext object.
This function can set its own data and drag image as needed. If dataTypes is specified, event.dataTransfer is already populated with the default data when this function is invoked. If dataTypes is not specified, this function must call event.dataTransfer.setData to set the data or else the drag operation will be cancelled. In either case, the drag image is set to an image of the selected columns visible on the datagrid.
Names
Item Name
Property dnd.drag.columns

(nullable) dnd.drag.row-end-labels :Object

If this object is specified, the datagrid will initiate pivot operation when the user drags on rowEndLabels.

See the dnd attribute for usage examples.

Properties:
Name Type Argument Description
dataTypes string | Array.<string> <optional>
 The MIME types to use for the dragged data in the dataTransfer object. This can be a string if there is only one type, or an array of strings if multiple types are needed.

For example, if selected rows of employee data are being dragged, dataTypes could be "application/ojdatagridlabels+json". Drop targets can examine the data types and decide whether to accept the data. A text input may only accept "text" data type, while a chart for displaying employee data may be configured to accept the "application/ojdatagridrows+json" type.

For each type in the array, dataTransfer.setData will be called with the specified type and the JSON version of the selected rows data as the value. The selected rows data is an array of objects, with each object representing one selected row.

For drag over header, the grid will find the corresponding axis header label and match the dropType.

This property is required unless the application calls setData itself in a dragStart callback function.
drag function(DragEvent):void <optional>
 A callback function that receives the "drag" event as its argument.

function(event)

Parameters:

event: The DOM event object
dragEnd function(DragEvent):void <optional>
 A callback function that receives the "dragend" event as its argument.

function(event)

Parameters:

event: The DOM event object
dragStart function(DragEvent, ojDataGrid.DragHeaderLabelContext):void <optional>
 A callback function that receives the "dragstart" event and context information as its arguments.

function(event, context)

Parameters:

event: The DOM event object

context: oj.ojDataGrid.DragHeaderLabelContext object.
This function can set its own data and drag image as needed. If dataTypes is specified, event.dataTransfer is already populated with the default data when this function is invoked. If dataTypes is not specified, this function must call event.dataTransfer.setData to set the data or else the drag operation will be cancelled. In either case, the drag image is set to an image of the selected rows visible on the datagrid.
Names
Item Name
Property dnd.drag.rowEndLabels

(nullable) dnd.drag.row-labels :Object

If this object is specified, the datagrid will initiate pivot operation when the user drags on rowLabels.

See the dnd attribute for usage examples.

Properties:
Name Type Argument Description
dataTypes string | Array.<string> <optional>
 The MIME types to use for the dragged data in the dataTransfer object. This can be a string if there is only one type, or an array of strings if multiple types are needed.

For example, if selected rows of employee data are being dragged, dataTypes could be "application/ojdatagridrowlabels+json". Drop targets can examine the data types and decide whether to accept the data. A text input may only accept "text" data type, while a chart for displaying employee data may be configured to accept the "application/ojdatagridrows+json" type.

For each type in the array, dataTransfer.setData will be called with the specified type and the JSON version of the selected rows data as the value. The selected rows data is an array of objects, with each object representing one selected row.

For drag over header, the grid will find the corresponding axis header label and match the dropType.

This property is required unless the application calls setData itself in a dragStart callback function.
drag function(DragEvent):void <optional>
 A callback function that receives the "drag" event as its argument.

function(event)

Parameters:

event: The DOM event object
dragEnd function(DragEvent):void <optional>
 A callback function that receives the "dragend" event as its argument.

function(event)

Parameters:

event: The DOM event object
dragStart function(DragEvent, ojDataGrid.DragHeaderLabelContext):void <optional>
 A callback function that receives the "dragstart" event and context information as its arguments.

function(event, context)

Parameters:

event: The DOM event object

context: oj.ojDataGrid.DragHeaderLabelContext object.
This function can set its own data and drag image as needed. If dataTypes is specified, event.dataTransfer is already populated with the default data when this function is invoked. If dataTypes is not specified, this function must call event.dataTransfer.setData to set the data or else the drag operation will be cancelled. In either case, the drag image is set to an image of the selected rows visible on the datagrid.
Names
Item Name
Property dnd.drag.rowLabels

(nullable) dnd.drag.rows :Object

If this object is specified, the datagrid will initiate drag operation when the user drags on selected rows.

See the dnd attribute for usage examples.

Properties:
Name Type Argument Description
dataTypes string | Array.<string> <optional>
 The MIME types to use for the dragged data in the dataTransfer object. This can be a string if there is only one type, or an array of strings if multiple types are needed.

For example, if selected rows of employee data are being dragged, dataTypes could be "application/ojdatagridrows+json". Drop targets can examine the data types and decide whether to accept the data. A text input may only accept "text" data type, while a chart for displaying employee data may be configured to accept the "application/ojdatagridrows+json" type.

For each type in the array, dataTransfer.setData will be called with the specified type and the JSON version of the selected rows data as the value. The selected rows data is an array of objects, with each object representing one selected row.

For drag over databody,if the types assigned for row and column are the same, then the grid will always assume it is a row drag/drop.

This property is required unless the application calls setData itself in a dragStart callback function.
drag function(DragEvent):void <optional>
 A callback function that receives the "drag" event as its argument.

function(event)

Parameters:

event: The DOM event object
dragEnd function(DragEvent):void <optional>
 A callback function that receives the "dragend" event as its argument.

function(event)

Parameters:

event: The DOM event object
dragStart function(DragEvent, ojDataGrid.DragHeaderContext):void <optional>
 A callback function that receives the "dragstart" event and context information as its arguments.

function(event, context)

Parameters:

event: The DOM event object

context: oj.ojDataGrid.DragHeaderContext object.
This function can set its own data and drag image as needed. If dataTypes is specified, event.dataTransfer is already populated with the default data when this function is invoked. If dataTypes is not specified, this function must call event.dataTransfer.setData to set the data or else the drag operation will be cancelled. In either case, the drag image is set to an image of the selected rows visible on the datagrid.
Names
Item Name
Property dnd.drag.rows

(nullable) dnd.drop :Object

An object that describes drop functionality.

See the dnd attribute for usage examples.

Default Value:
  • null
Names
Item Name
Property dnd.drop

(nullable) dnd.drop.column-end-labels :Object

An object that specifies callback functions to handle dropping column end labels

For all callback functions, the following arguments will be passed:

event: The DOM event object

context: Context object with the following properties:
  • level: The level of the column endHeader label being dropped on
  • axis: columnEnd
  • position: 'before|after'

See the dnd attribute for usage examples.

Properties:
Name Type Argument Description
dataTypes string | Array.<string> A data type or an array of data types this element can accept.

This property is required unless dragEnter, dragOver, and drop callback functions are specified to handle the corresponding events.
dragEnter function(DragEvent, ojDataGrid.DropHeaderLabelContext):void <optional>
 A callback function that receives the "dragenter" event and context information as its arguments.

function(event, context)

This function should call event.preventDefault() to indicate the dragged data can be accepted. Calling event.preventDefault() is required by HTML5 Drag and Drop to indicate acceptance of data.

If dataTypes is specified, it will be matched against the drag data types to determine if the data is acceptable. If there is a match, JET will call event.preventDefault() to indicate that the data can be accepted.
dragLeave function(DragEvent, ojDataGrid.DropHeaderLabelContext):void <optional>
 A callback function that receives the "dragleave" event and context information as its arguments.

function(event, context)
dragOver function(DragEvent, ojDataGrid.DropHeaderLabelContext):void <optional>
 A callback function that receives the "dragover" event and context information as its arguments.

function(event, context)

Similar to dragEnter, this function should call event.preventDefault() to indicate the dragged data can be accepted. If dataTypes is specified, it will be matched against the drag data types to determine if the data is acceptable.
drop function(DragEvent, ojDataGrid.DropHeaderLabelContext):void A required callback function that receives the "drop" event and context information as its arguments.

function(event, context)

This function should call event.preventDefault() to indicate the dragged data is accepted.
Names
Item Name
Property dnd.drop.columnEndLabels

(nullable) dnd.drop.column-labels :Object

An object that specifies callback functions to handle dropping column labels

For all callback functions, the following arguments will be passed:

event: The DOM event object

context: Context object with the following properties:
  • level: The level of the column label being dropped on
  • axis: column
  • position: 'before|after'

See the dnd attribute for usage examples.

Properties:
Name Type Argument Description
dataTypes string | Array.<string> A data type or an array of data types this element can accept.

This property is required unless dragEnter, dragOver, and drop callback functions are specified to handle the corresponding events.
dragEnter function(DragEvent, ojDataGrid.DropHeaderLabelContext):void <optional>
 A callback function that receives the "dragenter" event and context information as its arguments.

function(event, context)

This function should call event.preventDefault() to indicate the dragged data can be accepted. Calling event.preventDefault() is required by HTML5 Drag and Drop to indicate acceptance of data.

If dataTypes is specified, it will be matched against the drag data types to determine if the data is acceptable. If there is a match, JET will call event.preventDefault() to indicate that the data can be accepted.
dragLeave function(DragEvent, ojDataGrid.DropHeaderLabelContext):void <optional>
 A callback function that receives the "dragleave" event and context information as its arguments.

function(event, context)
dragOver function(DragEvent, ojDataGrid.DropHeaderLabelContext):void <optional>
 A callback function that receives the "dragover" event and context information as its arguments.

function(event, context)

Similar to dragEnter, this function should call event.preventDefault() to indicate the dragged data can be accepted. If dataTypes is specified, it will be matched against the drag data types to determine if the data is acceptable.
drop function(DragEvent, ojDataGrid.DropHeaderLabelContext):void A required callback function that receives the "drop" event and context information as its arguments.

function(event, context)

This function should call event.preventDefault() to indicate the dragged data is accepted.
Names
Item Name
Property dnd.drop.columnLabels

(nullable) dnd.drop.columns :Object

An object that specifies callback functions to handle dropping columns

For all callback functions, the following arguments will be passed:

event: The DOM event object

context: Context object with the following properties:
  • columnIndex: The index of the column being dropped on

See the dnd attribute for usage examples.

Properties:
Name Type Argument Description
dataTypes string | Array.<string> A data type or an array of data types this element can accept.

This property is required unless dragEnter, dragOver, and drop callback functions are specified to handle the corresponding events.
dragEnter function(DragEvent, ojDataGrid.DropHeaderContext):void <optional>
 A callback function that receives the "dragenter" event and context information as its arguments.

function(event, context)

This function should call event.preventDefault() to indicate the dragged data can be accepted. Calling event.preventDefault() is required by HTML5 Drag and Drop to indicate acceptance of data.

If dataTypes is specified, it will be matched against the drag data types to determine if the data is acceptable. If there is a match, JET will call event.preventDefault() to indicate that the data can be accepted.
dragLeave function(DragEvent, ojDataGrid.DropHeaderContext):void <optional>
 A callback function that receives the "dragleave" event and context information as its arguments.

function(event, context)
dragOver function(DragEvent, ojDataGrid.DropHeaderContext):void <optional>
 A callback function that receives the "dragover" event and context information as its arguments.

function(event, context)

Similar to dragEnter, this function should call event.preventDefault() to indicate the dragged data can be accepted. If dataTypes is specified, it will be matched against the drag data types to determine if the data is acceptable.
drop function(DragEvent, ojDataGrid.DropHeaderContext):void A required callback function that receives the "drop" event and context information as its arguments.

function(event, context)

This function should call event.preventDefault() to indicate the dragged data is accepted.
Names
Item Name
Property dnd.drop.columns

(nullable) dnd.drop.row-end-labels :Object

An object that specifies callback functions to handle dropping row labels

For all callback functions, the following arguments will be passed:

event: The DOM event object

context: Context object with the following properties:
  • level: The level of the row end label being dropped on
  • axis: rowEnd
  • position: 'before|after'

See the dnd attribute for usage examples.

Properties:
Name Type Argument Description
dataTypes string | Array.<string> A data type or an array of data types this element can accept.

This property is required unless dragEnter, dragOver, and drop callback functions are specified to handle the corresponding events.
dragEnter function(DragEvent, ojDataGrid.DropHeaderLabelContext):void <optional>
 A callback function that receives the "dragenter" event and context information as its arguments.

function(event, context)

This function should call event.preventDefault() to indicate the dragged data can be accepted. Calling event.preventDefault() is required by HTML5 Drag and Drop to indicate acceptance of data.

If dataTypes is specified, it will be matched against the drag data types to determine if the data is acceptable. If there is a match, JET will call event.preventDefault() to indicate that the data can be accepted.
dragLeave function(DragEvent, ojDataGrid.DropHeaderLabelContext):void <optional>
 A callback function that receives the "dragleave" event and context information as its arguments.

function(event, context)
dragOver function(DragEvent, ojDataGrid.DropHeaderLabelContext):void <optional>
 A callback function that receives the "dragover" event and context information as its arguments.

function(event, context)

Similar to dragEnter, this function should call event.preventDefault() to indicate the dragged data can be accepted. If dataTypes is specified, it will be matched against the drag data types to determine if the data is acceptable.
drop function(DragEvent, ojDataGrid.DropHeaderLabelContext):void A required callback function that receives the "drop" event and context information as its arguments.

function(event, context)

This function should call event.preventDefault() to indicate the dragged data is accepted.
Names
Item Name
Property dnd.drop.rowEndLabels

(nullable) dnd.drop.row-labels :Object

An object that specifies callback functions to handle dropping row labels

For all callback functions, the following arguments will be passed:

event: The DOM event object

context: Context object with the following properties:
  • level: The level of the row label being dropped on
  • axis: row
  • position: 'before|after'

See the dnd attribute for usage examples.

Properties:
Name Type Argument Description
dataTypes string | Array.<string> A data type or an array of data types this element can accept.

This property is required unless dragEnter, dragOver, and drop callback functions are specified to handle the corresponding events.
dragEnter function(DragEvent, ojDataGrid.DropHeaderLabelContext):void <optional>
 A callback function that receives the "dragenter" event and context information as its arguments.

function(event, context)

This function should call event.preventDefault() to indicate the dragged data can be accepted. Calling event.preventDefault() is required by HTML5 Drag and Drop to indicate acceptance of data.

If dataTypes is specified, it will be matched against the drag data types to determine if the data is acceptable. If there is a match, JET will call event.preventDefault() to indicate that the data can be accepted.
dragLeave function(DragEvent, ojDataGrid.DropHeaderLabelContext):void <optional>
 A callback function that receives the "dragleave" event and context information as its arguments.

function(event, context)
dragOver function(DragEvent, ojDataGrid.DropHeaderLabelContext):void <optional>
 A callback function that receives the "dragover" event and context information as its arguments.

function(event, context)

Similar to dragEnter, this function should call event.preventDefault() to indicate the dragged data can be accepted. If dataTypes is specified, it will be matched against the drag data types to determine if the data is acceptable.
drop function(DragEvent, ojDataGrid.DropHeaderLabelContext):void A required callback function that receives the "drop" event and context information as its arguments.

function(event, context)

This function should call event.preventDefault() to indicate the dragged data is accepted.
Names
Item Name
Property dnd.drop.rowLabels

(nullable) dnd.drop.rows :Object

An object that specifies callback functions to handle dropping rows

For all callback functions, the following arguments will be passed:

event: The DOM event object

context: Context object with the following properties:
  • rowIndex: The index of the row being dropped on

See the dnd attribute for usage examples.

Properties:
Name Type Argument Description
dataTypes string | Array.<string> A data type or an array of data types this element can accept.

This property is required unless dragEnter, dragOver, and drop callback functions are specified to handle the corresponding events.
dragEnter function(DragEvent, ojDataGrid.DropHeaderContext):void <optional>
 A callback function that receives the "dragenter" event and context information as its arguments.

function(event, context)

This function should call event.preventDefault() to indicate the dragged data can be accepted. Calling event.preventDefault() is required by HTML5 Drag and Drop to indicate acceptance of data.

If dataTypes is specified, it will be matched against the drag data types to determine if the data is acceptable. If there is a match, JET will call event.preventDefault() to indicate that the data can be accepted.
dragLeave function(DragEvent, ojDataGrid.DropHeaderContext):void <optional>
 A callback function that receives the "dragleave" event and context information as its arguments.

function(event, context)
dragOver function(DragEvent, ojDataGrid.DropHeaderContext):void <optional>
 A callback function that receives the "dragover" event and context information as its arguments.

function(event, context)

Similar to dragEnter, this function should call event.preventDefault() to indicate the dragged data can be accepted. If dataTypes is specified, it will be matched against the drag data types to determine if the data is acceptable.
drop function(DragEvent, ojDataGrid.DropHeaderContext):void A required callback function that receives the "drop" event and context information as its arguments.

function(event, context)

This function should call event.preventDefault() to indicate the dragged data is accepted.
Names
Item Name
Property dnd.drop.rows

dnd.reorder :Object

Enables or disables reordering the rows within the same DataGrid using drag and drop.

Names
Item Name
Property dnd.reorder

dnd.reorder.row :"enable"|"disable"

Enables or disables reordering the rows within the same DataGrid using drag and drop. There must be move capability support on the data source to enable this feature.

Supported Values:
Value Description
disable disable row reordering
enable enable row reordering
Default Value:
  • "disable"
Names
Item Name
Property dnd.reorder.row

edit-mode :"none"|"cellNavigation"|"cellEdit"

Determine if the DataGrid is read-only or editable.

Use none if the DataGrid is strictly read-only.

The DataGrid editMode is designed to support fast editing and requires that the input controls render fast and near synchronously to be stamped inside an editable cell. The DataGrid supports overwrite behavior for all of JET's input components. Custom components that render synchronously or components that only render asynchronously due to Promises that resolve immediately will also be stampable. The modules for the stamped component loaded/required when the DataGrid is loaded/required. Components that must go back to a server to render are not supported.

Use cellNavigation to allow editable cells, but the DataGrid is currently read-only and a single tab stop on the page. Pressing F2 or double click while in this mode will switch the DataGrid to cellEdit mode.

Use cellEdit to allow editable cells, and tab navigates to the next cell behavior. Pressing ESC while in this mode will switch the DataGrid to cellNavigation mode.

Supported Values:
Value Description
cellEdit the DataGrid cells are individually tabbable and editable
cellNavigation the DataGrid is a single tab stop and editable at the cell level, but currently read-only
none the DataGrid is read-only
Default Value:
  • 'none'
Supports writeback:
  • true
Names
Item Name
Property editMode
Property change event editModeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-edit-mode-changed

frozen-column-count :number

Default Freeze count on datagrid columns. Gettable & settable property for freeze column, supports writeback. The number of columns frozen in the DataGrid. This property is currently only supported when scroll-policy="loadMoreOnScroll". To enable end user frozen column modification see the header.column.freezable property. When the user modifies the frozen region this value will be updated.

Default Value:
  • 0
Supports writeback:
  • true
Names
Item Name
Property frozenColumnCount
Property change event frozenColumnCountChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-frozen-column-count-changed

frozen-row-count :number

Default Freeze count on datagrid rows. Gettable & settable property for freeze row, supports writeback. The number of rows frozen in the DataGrid. This property is currently only supported when scroll-policy="loadMoreOnScroll". To enable end user frozen row modification see the header.row.freezable property. When the user modifies the frozen region this value will be updated.

Default Value:
  • 0
Supports writeback:
  • true
Names
Item Name
Property frozenRowCount
Property change event frozenRowCountChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-frozen-row-count-changed

gridlines :Object

Display or hide the horizontal or vertical gridlines in the data body. Gridlines are visible by default and must be set to 'hidden' in order to be hidden.

Names
Item Name
Property gridlines
Property change event gridlinesChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-gridlines-changed

gridlines.horizontal :"visible"|"hidden"

Display or hide the horizontal gridlines in the data body. Gridlines are visible by default and must be set to 'hidden' in order to be hidden.

Supported Values:
Value Description
hidden hide horizontal gridlines
visible show horizontal gridlines
Default Value:
  • "visible"
Names
Item Name
Property gridlines.horizontal

gridlines.vertical :"visible"|"hidden"

Display or hide the vertical gridlines in the data body. Gridlines are visible by default and must be set to 'hidden' in order to be hidden.

Supported Values:
Value Description
hidden hide vertical gridlines
visible show vertical gridlines
Default Value:
  • "visible"
Names
Item Name
Property gridlines.vertical
The header attribute contains a subset of attributes for row and column headers.
Names
Item Name
Property header
Property change event headerChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-header-changed

header.column :Object

The header column attribute contains a subset of attributes for column headers.
Names
Item Name
Property header.column

header.column.alignment :Object

The header column alignment attribute contains a subset of attributes for column header alignment.
Names
Item Name
Property header.column.alignment

(nullable) header.column.alignment.horizontal :((context: ojDataGrid.HeaderContext<K,D>) => ojDataGrid.HorizontalAlignment) | oj.ojDataGrid.HorizontalAlignment

Specifies horizontal alignment of column header. If a string is specified the alignment will be added to all column header cells. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a alignment.
Default Value:
  • 'auto'
Names
Item Name
Property header.column.alignment.horizontal

(nullable) header.column.alignment.vertical :((context: ojDataGrid.HeaderContext<K,D>) => ojDataGrid.VerticalAlignment) | oj.ojDataGrid.VerticalAlignment

Specifies vertical alignment of column header. If a string is specified the alignment will be added to all column header cells. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a alignment.
Default Value:
  • 'auto'
Names
Item Name
Property header.column.alignment.vertical

(nullable) header.column.class-name :((context: ojDataGrid.HeaderContext<K,D>) => string | void | null) | string | null

The CSS style class to apply to column headers in the DataGrid. If a string is specified the class will be added to all column header cells. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a className.

Default Value:
  • null
Names
Item Name
Property header.column.className

(nullable) header.column.filterable :((context: ojDataGrid.HeaderContext<K,D>) => 'auto' | 'disable' ) | 'auto' | 'disable'

Control the column filter support of the DataGrid. If set the DataGrid will render the filter icon in headers and provide UX gestures to trigger the ojFilterRequest event, including the context menu item. The data grid provider associated with the DataGrid must have the filter property set to 'filterable'/'filtered' in the header item metadata in order for the filter icon to be rendered when set to auto. If a function is specified it takes a single parameter, headerContext and must return a string of auto or disable

.
Supported Values:
Value Description
auto get the filterable property from the data grid provider header item metadata
disable disable filtering on column headers
Default Value:
  • 'disable'
Names
Item Name
Property header.column.filterable

header.column.freezable :"enable"|"disable"

Enables or disables freeze and unfreeze option on the datagrid columns.

Supported Values:
Value Description
disable disable freeze and unfreeze on columns
enable enable freeze and unfreeze on columns
Default Value:
  • 'disable'
Names
Item Name
Property header.column.freezable

(nullable) header.column.hidable :string

Enables or disables hide and show end user functionality on the datagrid columns using enable or disable. See hidden-columns for tracking the current hidden state. Note: It's not recommended to hide all columns via any interactions.

Default Value:
  • 'disable'
Names
Item Name
Property header.column.hidable

header.column.label :Object

The header column label attribute contains a subset of attributes for column header labels. In order for labels to be rendered they must be provided by the datasource header set. In addition the grid structure must be such that allots space for the appropriate label.
Names
Item Name
Property header.column.label

header.column.label.alignment :Object

The column header label alignment attributes.
Names
Item Name
Property header.column.label.alignment

(nullable) header.column.label.alignment.horizontal :((context: ojDataGrid.HeaderContext<K,D>) => ojDataGrid.HorizontalAlignment) | oj.ojDataGrid.HorizontalAlignment

Specifies horizontal alignment of column header label content. If a string is specified the alignment will be added to all column header labels. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a alignment.
Default Value:
  • 'auto'
Names
Item Name
Property header.column.label.alignment.horizontal

(nullable) header.column.label.alignment.vertical :((context: ojDataGrid.HeaderContext<K,D>) => ojDataGrid.VerticalAlignment) | oj.ojDataGrid.VerticalAlignment

Specifies vertical alignment of column header label. If a string is specified the alignment will be added to all column header labels. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a alignment.
Default Value:
  • 'auto'
Names
Item Name
Property header.column.label.alignment.vertical

(nullable) header.column.label.class-name :((context: ojDataGrid.LabelContext<K,D>) => string | void | null) | string | null

The CSS style class to apply to column header labels in the DataGrid. If a string is specified the class will be added to all column labels. If a function is specified it takes a single parameter, labelContext and must return a string to be set as a className.

Default Value:
  • null
Names
Item Name
Property header.column.label.className

(nullable) header.column.label.renderer :((context: ojDataGrid.LabelContext<K,D>) => {insert: HTMLElement | string , insertContent?: never} | {insert?: never, insertContent: HTMLElement | string} | void | null) | null

The renderer function that renders the content of the column header label. See labelContext for information on the object passed into the column header renderer function. The function should return one of the following:

  • An Object with the following property:
    • insert: HTMLElement | string - A string or a DOM element of the content inside the column header label.
    • insertContent: HTMLElement | string - A string or a DOM element of the content inside the column header label which will be wrapped with extra wrapper div to provide the best results on resizing.
    Either insert or insertContent should be specified. If both are specified then insert takes the presedence.
  • undefined: If the developer chooses to append to the column header label element directly, the function should return undefined.
If no renderer is specified, the DataGrid will treat the label data as a string.
Default Value:
  • null
Names
Item Name
Property header.column.label.renderer

(nullable) header.column.label.sortable :((context: ojDataGrid.LabelContext<K,D>) => string ) | string | null

Disable sorting on the field bounded by this header label. The data grid provider associated with the DataGrid must have the sortable property set to true in the header item metadata. If a function is specified it takes a single parameter, headerLabelContext and must return a string of auto, enable, or disable.

Supported Values:
Value Description
auto get the sortable property from the data grid provider header item metadata
disable disable sorting on column header labels.
Default Value:
  • 'disable'
Names
Item Name
Property header.column.label.sortable

(nullable) header.column.label.style :((context: ojDataGrid.LabelContext<K,D>) => string | void | null) | string | null

The inline style to apply to column header labels in the DataGrid. If a string is specified the style will be added to all column labels. If a function is specified it takes a single parameter, labelContext and must return a string to be set as an inline style.

Default Value:
  • null
Names
Item Name
Property header.column.label.style

(nullable) header.column.renderer :((context: ojDataGrid.HeaderContext<K,D>) => {insert: HTMLElement | string, insertContent?: never} | {insert?: never, insertContent: HTMLElement | string} | void | null) | null

The renderer function that renders the content of the column header. See headerContext for information on the object passed into the column header renderer function. The function should return one of the following:

  • An Object with one of the following property:
    • insert: HTMLElement | string - A string or a DOM element of the content inside the column header.
    • insertContent: HTMLElement | string - A string or a DOM element of the content inside the column header which will be wrapped with extra wrapper div to provide the best results on resizing.
    Either insert or insertContent should be specified. If both are specified then insert takes the precedence.
  • undefined: If the developer chooses to append to the column header element directly, the function should return undefined.
If no renderer is specified, the DataGrid will treat the header data as a string.
Default Value:
  • null
Names
Item Name
Property header.column.renderer

header.column.resizable :Object

Enable or disable width or height resizing along the column headers. Note that for column header, a function cannot be used with the height subproperty. If a function is specified it takes a single parameter, headerContext and must return a string of enable or disable.

Names
Item Name
Property header.column.resizable

header.column.resizable.height :"enable"|"disable"

Enable or disable height resizing along the column headers.

Supported Values:
Value Description
disable disable height resizing on column headers
enable enable height resizing on column headers
Default Value:
  • "disable"
Names
Item Name
Property header.column.resizable.height

(nullable) header.column.resizable.width :((context: ojDataGrid.HeaderContext<K,D>) => string ) | string | null

Enable or disable width resizing along the column headers. If a function is specified it takes a single parameter, headerContext and must return a string of enable or disable.

Supported Values:
Value Description
disable disable width resizing on column headers
enable enable width resizing on column headers
Default Value:
  • "disable"
Names
Item Name
Property header.column.resizable.width

(nullable) header.column.sortable :((context: ojDataGrid.HeaderContext<K,D>) => string ) | string | null

Disable sorting on the field bounded by this header. The data grid provider associated with the DataGrid must have the sortable property set to true in the header item metadata. If a function is specified it takes a single parameter, headerContext and must return a string of auto, enable, or disable.

Supported Values:
Value Description
auto get the sortable property from the data grid provider header item metadata
disable disable sorting on column headers
enable enable sorting on column headers
Deprecated:
Since Description
12.0.0 This value will be removed in the future. Use auto and ensure DataGridProvider support for sort.
Default Value:
  • 'auto'
Names
Item Name
Property header.column.sortable

(nullable) header.column.style :((context: ojDataGrid.HeaderContext<K,D>) => string | void | null) | string | null

The inline style to apply to column headers in the DataGrid. If a string is specified the class will be added to all column header cells. Note that percentage (%) width and height values are not supported. If a function is specified it takes a single parameter, headerContext and must return a string.

Default Value:
  • null
Names
Item Name
Property header.column.style

header.column-end :Object

The header columnEnd attribute contains a subset of attributes for column end headers.
Names
Item Name
Property header.columnEnd

header.column-end.alignment :Object

The columnEnd header alignment attributes.
Names
Item Name
Property header.columnEnd.alignment

(nullable) header.column-end.alignment.horizontal :((context: ojDataGrid.HeaderContext<K,D>) => ojDataGrid.HorizontalAlignment) | oj.ojDataGrid.HorizontalAlignment

Specifies horizontal alignment of columnEnd header content. If a string is specified the alignment will be added to all column end header cells. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a alignment.
Default Value:
  • 'auto'
Names
Item Name
Property header.columnEnd.alignment.horizontal

(nullable) header.column-end.alignment.vertical :((context: ojDataGrid.HeaderContext<K,D>) => ojDataGrid.VerticalAlignment) | oj.ojDataGrid.VerticalAlignment

Specifies vertical alignment of columnEnd header. If a string is specified the alignment will be added to all column end header cells. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a alignment.
Default Value:
  • 'auto'
Names
Item Name
Property header.columnEnd.alignment.vertical

(nullable) header.column-end.class-name :((context: ojDataGrid.HeaderContext<K,D>) => string | void | null) | string | null

The CSS style class to apply to columnEnd headers in the DataGrid. If a string is specified the class will be added to all columnEnd header cells. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a className.

Default Value:
  • null
Names
Item Name
Property header.columnEnd.className

header.column-end.label :Object

The header columnEnd label attribute contains a subset of attributes for column end header labels. In order for labels to be rendered they must be provided by the datasource header set. In addition the grid structure must be such that allots space for the appropriate label.
Names
Item Name
Property header.columnEnd.label

header.column-end.label.alignment :Object

The columnEnd header label alignment attributes.
Names
Item Name
Property header.columnEnd.label.alignment

(nullable) header.column-end.label.alignment.horizontal :((context: ojDataGrid.HeaderContext<K,D>) => ojDataGrid.HorizontalAlignment) | oj.ojDataGrid.HorizontalAlignment

Specifies horizontal alignment of columnEnd header label content. If a string is specified the alignment will be added to all column end header labels. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a alignment.
Default Value:
  • 'auto'
Names
Item Name
Property header.columnEnd.label.alignment.horizontal

(nullable) header.column-end.label.alignment.vertical :((context: ojDataGrid.HeaderContext<K,D>) => ojDataGrid.VerticalAlignment) | oj.ojDataGrid.VerticalAlignment

Specifies vertical alignment of columnEnd header label. If a string is specified the alignment will be added to all column end header labels. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a alignment.
Default Value:
  • 'auto'
Names
Item Name
Property header.columnEnd.label.alignment.vertical

(nullable) header.column-end.label.class-name :((context: ojDataGrid.LabelContext<K,D>) => string | void | null) | string | null

The CSS style class to apply to columnEnd header labels in the DataGrid. If a string is specified the class will be added to all columnEnd labels. If a function is specified it takes a single parameter, labelContext and must return a string to be set as a className.

Default Value:
  • null
Names
Item Name
Property header.columnEnd.label.className

(nullable) header.column-end.label.renderer :((context: ojDataGrid.LabelContext<K,D>) => {insert: HTMLElement | string} | void | null) | null

The renderer function that renders the content of the columnEnd header label. See labelContext for information on the object passed into the columnEnd header renderer function. The function should return one of the following:

  • An Object with the following property:
    • insert: HTMLElement | string - A string or a DOM element of the content inside the columnEnd header label.
  • undefined: If the developer chooses to append to the columnEnd header label element directly, the function should return undefined.
If no renderer is specified, the DataGrid will treat the label data as a string.
Default Value:
  • null
Names
Item Name
Property header.columnEnd.label.renderer

(nullable) header.column-end.label.sortable :((context: ojDataGrid.LabelContext<K,D>) => string ) | string | null

Disable sorting on the field bounded by this header label. The data grid provider associated with the DataGrid must have the sortable property set to true in the header label item metadata. If a function is specified it takes a single parameter, headerLabelContext and must return a string of auto, enable, or disable.

Supported Values:
Value Description
auto get the sortable property from the data grid provider header item metadata
disable disable sorting on columnEnd header labels.
Default Value:
  • 'disable'
Names
Item Name
Property header.columnEnd.label.sortable

(nullable) header.column-end.label.style :((context: ojDataGrid.HeaderContext<K,D>) => string | void | null) | string | null

The inline style to apply to columnEnd header labels in the DataGrid. If a string is specified the style will be added to all columnEnd labels. If a function is specified it takes a single parameter, labelContext and must return a string to be set as an inline style.

Default Value:
  • null
Names
Item Name
Property header.columnEnd.label.style

(nullable) header.column-end.renderer :((context: ojDataGrid.HeaderContext<K,D>) => {insert: HTMLElement | string} | void | null) | null

The renderer function that renders the content of the columnEnd header. See headerContext for information on the object passed into the columnEnd header renderer function. The function should return one of the following:

  • An Object with the following property:
    • insert: HTMLElement | string - A string or a DOM element of the content inside the columnEnd header.
  • undefined: If the developer chooses to append to the columnEnd header element directly, the function should return undefined.
If no renderer is specified, the DataGrid will treat the header data as a string.
Default Value:
  • null
Names
Item Name
Property header.columnEnd.renderer

header.column-end.resizable :Object

Enable or disable width or height resizing along the columnEnd headers. Note that for columnEnd header, a function cannot be used with the height subproperty. If a function is specified it takes a single parameter, headerContext and must return a string of enable or disable.

Names
Item Name
Property header.columnEnd.resizable

header.column-end.resizable.height :"enable"|"disable"

Enable or disable height resizing along the columnEnd headers.

Supported Values:
Value Description
disable disable height resizing on columnEnd headers
enable enable height resizing on columnEnd headers
Default Value:
  • "disable"
Names
Item Name
Property header.columnEnd.resizable.height

(nullable) header.column-end.resizable.width :((context: ojDataGrid.HeaderContext<K,D>) => string ) | string | null

Enable or disable width resizing along the columnEnd headers. If a function is specified it takes a single parameter, headerContext and must return a string of enable or disable.

Supported Values:
Value Description
disable disable width resizing on columnEnd headers
enable enable width resizing on columnEnd headers
Default Value:
  • "disable"
Names
Item Name
Property header.columnEnd.resizable.width

(nullable) header.column-end.style :((context: ojDataGrid.HeaderContext<K,D>) => string | void | null) | string | null

The inline style to apply to columnEnd headers in the DataGrid. If a string is specified the class will be added to all columnEnd header cells. Note that percentage (%) width and height values are not supported. If a function is specified it takes a single parameter, headerContext and must return a string.

Default Value:
  • null
Names
Item Name
Property header.columnEnd.style

header.row :Object

The header row attribute contains a subset of attributes for row headers.
Names
Item Name
Property header.row

header.row.alignment :Object

The row header alignment attributes.
Names
Item Name
Property header.row.alignment

(nullable) header.row.alignment.horizontal :((context: ojDataGrid.HeaderContext<K,D>) => ojDataGrid.HorizontalAlignment) | oj.ojDataGrid.HorizontalAlignment

Specifies horizontal alignment of row header content. If a string is specified the alignment will be added to all row header cells. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a alignment.
Default Value:
  • 'auto'
Names
Item Name
Property header.row.alignment.horizontal

(nullable) header.row.alignment.vertical :((context: ojDataGrid.HeaderContext<K,D>) => ojDataGrid.VerticalAlignment) | oj.ojDataGrid.VerticalAlignment

Specifies vertical alignment of row header. If a string is specified the alignment will be added to all row header cells. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a alignment.
Default Value:
  • 'auto'
Names
Item Name
Property header.row.alignment.vertical

(nullable) header.row.class-name :((context: ojDataGrid.HeaderContext<K,D>) => string | void | null) | string | null

The CSS style class to apply to row headers in the DataGrid. If a string is specified the class will be added to all row header cells. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a className.

Default Value:
  • null
Names
Item Name
Property header.row.className

header.row.freezable :"enable"|"disable"

Enables or disables freeze and unfreeze option on the datagrid rows.

Supported Values:
Value Description
disable disable freeze and unfreeze on rows
enable enable freeze and unfreeze on rows
Default Value:
  • 'disable'
Names
Item Name
Property header.row.freezable

(nullable) header.row.hidable :string

Enables or disables hide and show end user functionality on the datagrid rows using enable or disable. See hidden-rows for tracking the current hidden state. Note: It's not recommended to hide all rows via any interactions.

Default Value:
  • 'disable'
Names
Item Name
Property header.row.hidable

header.row.label :Object

The header row label attribute contains a subset of attributes for row header labels. In order for labels to be rendered they must be provided by the datasource header set. In addition the grid structure must be such that allots space for the appropriate label.
Names
Item Name
Property header.row.label

header.row.label.alignment :Object

The row header label alignment attributes.
Names
Item Name
Property header.row.label.alignment

(nullable) header.row.label.alignment.horizontal :((context: ojDataGrid.HeaderContext<K,D>) => ojDataGrid.HorizontalAlignment) | oj.ojDataGrid.HorizontalAlignment

Specifies horizontal alignment of row header label content. If a string is specified the alignment will be added to all row header labels. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a alignment.
Default Value:
  • 'auto'
Names
Item Name
Property header.row.label.alignment.horizontal

(nullable) header.row.label.alignment.vertical :((context: ojDataGrid.HeaderContext<K,D>) => ojDataGrid.VerticalAlignment) | oj.ojDataGrid.VerticalAlignment

Specifies vertical alignment of row header label. If a string is specified the alignment will be added to all row header labels. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a alignment.
Default Value:
  • 'auto'
Names
Item Name
Property header.row.label.alignment.vertical

(nullable) header.row.label.class-name :((context: ojDataGrid.LabelContext<K,D>) => string | void | null) | string | null

The CSS style class to apply to row header labels in the DataGrid. If a string is specified the class will be added to all row labels. If a function is specified it takes a single parameter, labelContext and must return a string to be set as a className.

Default Value:
  • null
Names
Item Name
Property header.row.label.className

(nullable) header.row.label.renderer :((context: ojDataGrid.LabelContext<K,D>) => {insert: HTMLElement | string , insertContent?: never} | {insert?: never, insertContent: HTMLElement | string} | void | null) | null

The renderer function that renders the content of the row header label. See labelContext for information on the object passed into the row header renderer function. The function should return one of the following:

  • An Object with the following property:
    • insert: HTMLElement | string - A string or a DOM element of the content inside the row header label.
    • insertContent: HTMLElement | string - A string or a DOM element of the content inside the row header label which will be wrapped with extra wrapper div to provide the best results on resizing.
    Either insert or insertContent should be specified. If both are specified then insert takes the presedence.
  • undefined: If the developer chooses to append to the row header label element directly, the function should return undefined.
If no renderer is specified, the DataGrid will treat the label data as a string.
Default Value:
  • null
Names
Item Name
Property header.row.label.renderer

(nullable) header.row.label.sortable :((context: ojDataGrid.LabelContext<K,D>) => string ) | string | null

Disable sorting on the field bounded by this header label. The data grid provider associated with the DataGrid must have the sortable property set to true in the header item metadata. If a function is specified it takes a single parameter, headerLabelContext and must return a string of auto, enable, or disable.

Supported Values:
Value Description
auto get the sortable property from the data grid provider header item metadata
disable disable sorting on row header labels.
Default Value:
  • 'disable'
Names
Item Name
Property header.row.label.sortable

(nullable) header.row.label.style :((context: ojDataGrid.LabelContext<K,D>) => string | void | null) | string | null

The inline style to apply to row header labels in the DataGrid. If a string is specified the style will be added to all row labels. If a function is specified it takes a single parameter, labelContext and must return a string to be set as an inline style.

Default Value:
  • null
Names
Item Name
Property header.row.label.style

(nullable) header.row.renderer :((context: ojDataGrid.HeaderContext<K,D>) => {insert: HTMLElement | string, insertContent?: never} | {insert?: never, insertContent: HTMLElement | string} | void | null) | null

The renderer function that renders the content of the row header. See headerContext for information on the object passed into the row header renderer function. The function should return one of the following:

  • An Object with one of the following property:
    • insert: HTMLElement | string - A string or a DOM element of the content inside the row header.
    • insertContent: HTMLElement | string - A string or a DOM element of the content inside the row header which will be wrapped with extra wrapper div to provide the best results on resizing.
    Either insert or insertContent should be specified. If both are specified then insert takes the precedence.
  • undefined: If the developer chooses to append to the row header element directly, the function should return undefined.
If no renderer is specified, the DataGrid will treat the header data as a string.
Default Value:
  • null
Names
Item Name
Property header.row.renderer

header.row.resizable :Object

Enable or disable width or height resizing along the row headers. Note that for row header, a function cannot be used with the width subproperty. If a function is specified it takes a single parameter, headerContext and must return a string of enable or disable.

Names
Item Name
Property header.row.resizable

(nullable) header.row.resizable.height :((context: ojDataGrid.HeaderContext<K,D>) => string ) | string | null

Enable or disable height resizing along the row headers. If a function is specified it takes a single parameter, headerContext and must return a string of enable or disable.

Supported Values:
Value Description
disable disable height resizing on row headers
enable enable height resizing on row headers
Default Value:
  • "disable"
Names
Item Name
Property header.row.resizable.height

header.row.resizable.width :"enable"|"disable"

Enable or disable width resizing along the row headers.

Supported Values:
Value Description
disable disable width resizing on row headers
enable enable width resizing on row headers
Default Value:
  • "disable"
Names
Item Name
Property header.row.resizable.width

(nullable) header.row.sortable :((context: ojDataGrid.HeaderContext<K,D>) => string ) | string | null

Disable sorting on the field bounded by this header. The data grid provider associated with the DataGrid must have the sortable property set to true in the header item metadata. If a function is specified it takes a single parameter, headerContext and must return a string of auto, enable, or disable.

Supported Values:
Value Description
auto get the sortable property from the data grid provider header item metadata
disable disable sorting on row headers
enable enable sorting on row header
Deprecated:
Since Description
12.0.0 This value will be removed in the future. Use auto and ensure DataGridProvider support for sort.
Default Value:
  • 'auto'
Names
Item Name
Property header.row.sortable

(nullable) header.row.style :((context: ojDataGrid.HeaderContext<K,D>) => string | void | null) | string | null

The inline style to apply to row headers in the DataGrid. If a string is specified the class will be added to all row header cells. Note that percentage (%) width and height values are not supported. If a function is specified it takes a single parameter, headerContext and must return a string.

Default Value:
  • null
Names
Item Name
Property header.row.style

header.row-end :Object

The header rowEnd attribute contains a subset of attributes for row end headers.
Names
Item Name
Property header.rowEnd

header.row-end.alignment :Object

The rowEnd header alignment attributes.
Names
Item Name
Property header.rowEnd.alignment

(nullable) header.row-end.alignment.horizontal :((context: ojDataGrid.HeaderContext<K,D>) => ojDataGrid.HorizontalAlignment) | oj.ojDataGrid.HorizontalAlignment

Specifies horizontal alignment of rowEnd header content. If a string is specified the alignment will be added to all row end header cells. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a alignment.
Default Value:
  • 'auto'
Names
Item Name
Property header.rowEnd.alignment.horizontal

(nullable) header.row-end.alignment.vertical :((context: ojDataGrid.HeaderContext<K,D>) => ojDataGrid.VerticalAlignment) | oj.ojDataGrid.VerticalAlignment

Specifies vertical alignment of rowEnd header. If a string is specified the alignment will be added to all row end header cells. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a alignment.
Default Value:
  • 'auto'
Names
Item Name
Property header.rowEnd.alignment.vertical

(nullable) header.row-end.class-name :((context: ojDataGrid.HeaderContext<K,D>) => string | void | null) | string | null

The CSS style class to apply to rowEnd headers in the DataGrid. If a string is specified the class will be added to all rowEnd header cells. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a className.

Default Value:
  • null
Names
Item Name
Property header.rowEnd.className

header.row-end.label :Object

The header rowEnd label attribute contains a subset of attributes for rowEnd header labels. In order for labels to be rendered they must be provided by the datasource header set. In addition the grid structure must be such that allots space for the appropriate label.
Names
Item Name
Property header.rowEnd.label

header.row-end.label.alignment :Object

The rowEnd header label alignment attributes.
Names
Item Name
Property header.rowEnd.label.alignment

(nullable) header.row-end.label.alignment.horizontal :((context: ojDataGrid.HeaderContext<K,D>) => ojDataGrid.HorizontalAlignment) | oj.ojDataGrid.HorizontalAlignment

Specifies horizontal alignment of rowEnd header label content. If a string is specified the alignment will be added to all row end header labels. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a alignment.
Default Value:
  • 'auto'
Names
Item Name
Property header.rowEnd.label.alignment.horizontal

(nullable) header.row-end.label.alignment.vertical :((context: ojDataGrid.HeaderContext<K,D>) => ojDataGrid.VerticalAlignment) | oj.ojDataGrid.VerticalAlignment

Specifies vertical alignment of rowEnd header label. If a string is specified the alignment will be added to all row end header labels. If a function is specified it takes a single parameter, headerContext and must return a string to be set as a alignment.
Default Value:
  • 'auto'
Names
Item Name
Property header.rowEnd.label.alignment.vertical

(nullable) header.row-end.label.class-name :((context: ojDataGrid.LabelContext<K,D>) => string | void | null) | string | null

The CSS style class to apply to rowEnd header labels in the DataGrid. If a string is specified the class will be added to all rowEnd labels. If a function is specified it takes a single parameter, labelContext and must return a string to be set as a className.

Default Value:
  • null
Names
Item Name
Property header.rowEnd.label.className

(nullable) header.row-end.label.renderer :((context: ojDataGrid.LabelContext<K,D>) => {insert: HTMLElement | string} | void | null) | null

The renderer function that renders the content of the rowEnd header label. See labelContext for information on the object passed into the rowEnd header renderer function. The function should return one of the following:

  • An Object with the following property:
    • insert: HTMLElement | string - A string or a DOM element of the content inside the rowEnd header label.
  • undefined: If the developer chooses to append to the rowEnd header label element directly, the function should return undefined.
If no renderer is specified, the DataGrid will treat the label data as a string.
Default Value:
  • null
Names
Item Name
Property header.rowEnd.label.renderer

(nullable) header.row-end.label.sortable :((context: ojDataGrid.LabelContext<K,D>) => string ) | string | null

Disable sorting on the field bounded by this header label. The data grid provider associated with the DataGrid must have the sortable property set to true in the header label item metadata. If a function is specified it takes a single parameter, headerLabelContext and must return a string of auto, enable, or disable.

Supported Values:
Value Description
auto get the sortable property from the data grid provider header item metadata
disable disable sorting on rowEnd header labels.
Default Value:
  • 'disable'
Names
Item Name
Property header.rowEnd.label.sortable

(nullable) header.row-end.label.style :((context: ojDataGrid.LabelContext<K,D>) => string | void | null) | string | null

The inline style to apply to rowEnd header labels in the DataGrid. If a string is specified the style will be added to all rowEnd labels. If a function is specified it takes a single parameter, labelContext and must return a string to be set as an inline style.

Default Value:
  • null
Names
Item Name
Property header.rowEnd.label.style

(nullable) header.row-end.renderer :((context: ojDataGrid.HeaderContext<K,D>) => {insert: HTMLElement | string} | void | null) | null

The renderer function that renders the content of the rowEnd header. See headerContext for information on the object passed into the rowEnd header renderer function. The function should return one of the following:

  • An Object with the following property:
    • insert: HTMLElement | string - A string or a DOM element of the content inside the rowEnd header.
  • undefined: If the developer chooses to append to the rowEnd header element directly, the function should return undefined.
If no renderer is specified, the DataGrid will treat the header data as a string.
Default Value:
  • null
Names
Item Name
Property header.rowEnd.renderer

header.row-end.resizable :Object

Enable or disable width or height resizing along the rowEnd headers. Note that for rowEnd header, a function cannot be used with the width subproperty. If a function is specified it takes a single parameter, headerContext and must return a string of enable or disable.

Names
Item Name
Property header.rowEnd.resizable

(nullable) header.row-end.resizable.height :((context: ojDataGrid.HeaderContext<K,D>) => string ) | string | null

Enable or disable height resizing along the rowEnd headers. If a function is specified it takes a single parameter, headerContext and must return a string of enable or disable.

Supported Values:
Value Description
disable disable height resizing on rowEnd headers
enable enable height resizing on rowEnd headers
Default Value:
  • "disable"
Names
Item Name
Property header.rowEnd.resizable.height

header.row-end.resizable.width :"enable"|"disable"

Enable or disable width resizing along the rowEnd headers.

Supported Values:
Value Description
disable disable width resizing on rowEnd headers
enable enable width resizing on rowEnd headers
Default Value:
  • "disable"
Names
Item Name
Property header.rowEnd.resizable.width

(nullable) header.row-end.style :((context: ojDataGrid.HeaderContext<K,D>) => string | void | null) | string | null

The inline style to apply to rowEnd headers in the DataGrid. If a string is specified the class will be added to all rowEnd header cells. Note that percentage (%) width and height values are not supported. If a function is specified it takes a single parameter, headerContext and must return a string.

Default Value:
  • null
Names
Item Name
Property header.rowEnd.style

hidden-columns :ImmutableKeySet.ImmutableSet<number>

An immutable Set of zero based indexes used to define columns as hidden by default. This property will be updated when the end user shows/hides columns via the context menu. Enable end user show/hide via the header.column.hidable property. Note: When initializing hiddenColumns set, it is not recommended to hide all columns.

Supports writeback:
  • true
Names
Item Name
Property hiddenColumns
Property change event hiddenColumnsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-hidden-columns-changed

hidden-rows :ImmutableKeySet.ImmutableSet<number>

An immutable Set of zero based indexes used to define rows as hidden by default. This property will be updated when the end user shows/hides rows via the context menu. Enable end user show/hide via the header.row.hidable property. Note: When initializing hiddenRows set, it is not recommended to hide all rows.

Supports writeback:
  • true
Names
Item Name
Property hiddenRows
Property change event hiddenRowsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-hidden-rows-changed

scroll-policy :"auto"|"loadMoreOnScroll"|"scroll"

Specifies the mechanism used to scroll the data inside the DataGrid.

Supported Values:
Value Description
auto the DataGrid will decide the scroll policy
loadMoreOnScroll additional data are fetched when the user scrolls to the bottom of the DataGrid and all previous data are kept in the DOM.
If you are using Paging Control with the DataGrid, please note that "loadMoreOnScroll" scroll-policy is not compatible with Paging Control "loadMore" mode.
scroll virtual scrolling is used meaning only rows/columns visible in the viewport are fetched and kept in the DOM
Default Value:
  • 'auto'
Names
Item Name
Property scrollPolicy
Property change event scrollPolicyChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-scroll-policy-changed

scroll-policy-options :Object|null

The following options are supported:

  • maxRowCount: Maximum rows which will be displayed before fetching more will be stopped. Only applies when scrollPolicy is 'loadMoreOnScroll'.
  • maxColumnCount: Maximum columns which will be displayed before fetching more will be stopped. Only applies when scrollPolicy is 'loadMoreOnScroll'.
Names
Item Name
Property scrollPolicyOptions
Property change event scrollPolicyOptionsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-scroll-policy-options-changed

scroll-policy-options.max-column-count :number

The maximum number of columns which will be displayed before fetching more rows will be stopped.

See the scroll-policy-options attribute for usage examples.

Default Value:
  • 500
Names
Item Name
Property scrollPolicyOptions.maxColumnCount

scroll-policy-options.max-row-count :number

The maximum number of rows which will be displayed before fetching more rows will be stopped.

See the scroll-policy-options attribute for usage examples.

Default Value:
  • 500
Names
Item Name
Property scrollPolicyOptions.maxRowCount

scroll-position :Object

The information about the DataGrid scroll position. Contains the x,y pixel coordinates, as well as the index and key information of the cell closest to the origin of the grid data body.

The default value contains just the x,y pixel values specified. Once data is fetched the index and key sub-properties will be added. If there is no data the index and key sub-properties will not be available.

When setting the scrollPosition property applications can change any combination of the sub-properties. If multiple sub-properties are set at once they will be used in key, index, pixel order where the latter can serve as hints. If upon scrolling to the key the pixel position is within the cell the adjustment will be made to scroll to that pixel location. If a sparse object is set the other sub-properties will be populated and updated once the grid has scrolled to that position.

If the scrollPolicy is 'loadMoreOnScroll' and the scrollPosition is set to something outside of the currently rendered region, the grid will attempt to fetch until the specified scroll position is satisfied. If scrollPosition pixels are set out of the maximum visible bounds once all cells have been rendered or the indexes are set out of the data source bounds once all data has been fetched, the scroll position will be set at its maximum value along that axis.

If only setting scrollPosition using the keys sub-property to something outside of the currently rendered region, the grid will only scroll to that position if the keys are present in the data source.

Note that a scrollPosition set on the grid may be changed if the set value cannot be displayed the origin of the grid. For example if you scroll to the last row index, it will likely be updated to an index before that which corresponds to the row index at the origin, rather than the last row index which is at the bottom of the visible region.

Lastly, when a re-rendered is triggered by a datasource refresh event, or if the value for data attribute has changed, then the scrollPosition will be adjusted such that the selection anchor (typically the last item selected by the user) prior to refresh will appear at the origin of the viewport after refresh. If selection is disabled or if there is no selected cells, then the scrollPosition will go to the origin.

Properties:
Name Type Argument Description
columnIndex number <optional>
 The zero-based column index of the cell at the origin of the grid. If scrollPolicy is set to 'loadMoreOnScroll' and the index is greater than maxCount set in scrollPolicyOptions, then it will scroll and fetch until the end of the list is reached and there's no more items to fetch.
columnKey K <optional>
 The column key of the cell at the origin of the grid. If DataGridDataSource is used for data and the key does not exist in the DataGridDataSource, then the value is ignored. If it is unknown in the data source then the grid will fetch and scroll until the item is found or the end of the axis is reached and there's no more items to fetch.
offsetX number <optional>
 The horizontal offset in pixel relative to the cell identified by key/index.
offsetY number <optional>
 The vertical offset in pixel relative to the cell identified by key/index.
rowIndex number <optional>
 The zero-based row index of the cell at the origin of the grid. If scrollPolicy is set to 'loadMoreOnScroll' and the index is greater than maxCount set in scrollPolicyOptions, then it will scroll and fetch until the end of the list is reached and there's no more items to fetch.
rowKey K <optional>
 The row key of the cell at the origin of the grid. If DataGridDataSource is used for data and the key does not exist in the DataGridDataSource, then the value is ignored. If it is unknown in the data source then the grid will fetch and scroll until the item is found or the end of the axis is reached and there's no more items to fetch.
x number <optional>
 The horizontal position in pixels.
y number <optional>
 The vertical position in pixels.
Default Value:
  • {"x": 0, "y": 0}
Supports writeback:
  • true
Names
Item Name
Property scrollPosition
Property change event scrollPositionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-scroll-position-changed

scroll-to-key :"auto"|"capability"|"always"|"never"

Specifies the behavior when DataGrid needs to scroll to a position based on a row/column key.
Supported Values:
Value Description
always DataGrid will scroll to a position based on row/column key as long as the row/column keys are valid.
auto The behavior is determined by the component. By default the behavior is the same as "capability" except when the deprecated DataGridDataSource is used, in which case the behavior is the same as "always".
capability DataGrid will only scroll to a position based on row/column key if either the cell has already been fetched or if the associated DataProvider supports 'immediate' for 'iterationSpeed' capability.
never DataGrid will not change the scroll position if the request is based on a row/column key.
Default Value:
  • "auto"
Names
Item Name
Property scrollToKey
Property change event scrollToKeyChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-scroll-to-key-changed

selection :Array.<oj.ojDataGrid.Selection.<K>>

Specifies the current selections in the DataGrid. Returns an array of range objects, or an empty array if there's no selection.

Cell Selection Range Objects: The cell selection range object contains subproperties: startIndex and startKey referring to the cell in the selection closest to the origin of the grid. endIndex and endKey referring to the cell in the selection furthest from the origin of the grid. All four subproperties will be objects with row and column subproperties themselves. Single cell selection would always have the same startIndex/endIndex and startKey/endKey. Example: cell selection for cell (1,2) to cell (3,4) [{startIndex: {row: 1, column: 2}, endIndex: {row: 3, column: 4}, startKey: {row: "r1", column: "c2"}, endKey: {row: "r3", column: "c4"}}]

Row Selection Range Objects: The row selection range object contains subproperty objects: startIndex and startKey referring to the row in the selection closest to the origin of the grid. endIndex and endKey referring to the row in the selection furthest from the origin of the grid. All four subproperties will be objects with only row as a subproperty themselves. Single row selection would always have the same startIndex/endIndex and startKey/endKey. Example: row selection for selecting row 1 to row 2 [{startIndex: {row: 1}, endIndex: {row: 2}, startKey: {row: "r1"}, endKey: {row: "r2"}}]

Entire Row/Column Selection in Cell Selection Mode: In the case of an entire row or column selection: The startIndex subproperty along that axis will be set to 0. The endIndex subproperty along that axis will be set to -1, regardless of if the endIndex is known. The endKey subproperty along that axis will be set to null, regardless of if the endKey is known. Example: Cell selection spanning column 1 to column 2 [{startIndex: {row: 0, column: 1}, endIndex: {row: -1, column: 2}, startKey: {row: "r0", column: "c1"}, endKey: {row: null, column: "c2"}}]

Select All: The startIndex subproperty values will be set to 0. The endIndex subproperty values will be set to -1, regardless of if the endIndex is known. Keys are set to null to remain consistent with row and column selections and to prevent misinterpretation of the selection range. Select All will cover all the data in the data source including that which is not displayed in the viewport. A select all type selection will now allow for deselections. Any range ending in -1 is unbounded. Example: [{startIndex: {row: 0, column: 0}, endIndex: {row: -1, column: -1}, startKey: {row: "r0", column: "c0"}, endKey: {row: null, column: null}]

Discontiguous Selection Ranges: In the case of multiple discontiguous selections, each individual selection will be one entry in the selection range array. Selection ranges may overlap with each other. Example: (1,2) to (3,4), and (5,6) to (7,8) would look like [{startIndex: {row: 1, column: 2}, endIndex: {row: 3, column: 4}, startKey: {row: "r1", column: "c2"}, endKey: {row: "r3", column: "c4"}}, {startIndex: {row: 5, column: 6}, endIndex: {row: 7, column: 8}, startKey: {row: "r5", column: "c6"}, endKey: {row: "r7", column: "c8"}}]

Setting the selection: The selection can be set using any combination of startIndex/startKey and endIndex/endKey. If a sparse object is set the DataGrid will fill in the unspecifed portions of the object, if the cells are in the viewport. If they are not the DataGrid will attempt to ask the data source for the missing index or key. In the case of datasource unable to provide a key or index, the key or index will be marked with undefined values. If Datagrid lacks the appropriate data to create the selection, it will not create a selection and remove the invalid selection object. If the selection is set out of the scope of the currently displayed data the DataGrid will not change the selection object. As items within the selected range are scrolled into view they will be displayed as selected.

Default Value:
  • []
Supports writeback:
  • true
Names
Item Name
Property selection
Property change event selectionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-changed

selection-mode :Object

Specifies whether row or cell selections can be made, and the cardinality of each (single/multiple/none) selection in the DataGrid.

Only one of the attributes, row or cell, should not be none at a time. If both are not none then an error will be thrown.

Names
Item Name
Property selectionMode
Property change event selectionModeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-mode-changed

selection-mode.cell :"none"|"single"|"multiple"

The type of cell selection behavior that is enabled on the DataGrid. This attribute controls the number of selections that can be made via selection gestures at any given time.

If single or multiple is specified, selection gestures will be enabled, and the DataGrid's selection styling will be applied to all cells specified by the selection attribute. If none is specified, selection gestures will be disabled, and the DataGrid's selection styling will not be applied to any cells specified by the selection attribute.

Changing the value of this attribute will not affect the value of the selection attribute.

Only one of the selectionMode attributes, row or cell, should not be none at a time. If both are not none then an error will be thrown.

Supported Values:
Value Description
multiple Multiple cells can be selected at the same time.
none Selection is disabled.
single Only a single cell can be selected at a time.
Default Value:
  • 'none'
Names
Item Name
Property selectionMode.cell

selection-mode.row :"none"|"single"|"multiple"

The type of row selection behavior that is enabled on the DataGrid. This attribute controls the number of selections that can be made via selection gestures at any given time.

If single or multiple is specified, selection gestures will be enabled, and the DataGrid's selection styling will be applied to all rows specified by the selection attribute. If none is specified, selection gestures will be disabled, and the DataGrid's selection styling will not be applied to any rows specified by the selection attribute.

Changing the value of this attribute will not affect the value of the selection attribute.

Only one of the selectionMode attributes, row or cell, should not be none at a time. If both are not none then an error will be thrown.

Supported Values:
Value Description
multiple Multiple rows can be selected at the same time.
none Selection is disabled.
single Only a single row can be selected at a time.
Default Value:
  • 'none'
Names
Item Name
Property selectionMode.row

translations :object|null

A collection of translated resources from the translation bundle, or null if this component has no resources. Resources may be accessed and overridden individually or collectively, as seen in the examples.

If the component does not contain any translatable resource, the default value of this attribute will be null. If not, an object containing all resources relevant to the component.

If this component has translations, their documentation immediately follows this doc entry.

Names
Item Name
Property translations
Property change event translationsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-translations-changed

translations.accessible-actionable-mode :string

Provides properties to customize the accessible context to enter actionable mode.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleActionableMode

translations.accessible-collapsed :string

Provides properties to customize the accessible context when a header is collapsible.

See the translations attribute for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.accessibleCollapsed

translations.accessible-column-context :string

Provides properties to customize the accessible context for the column index.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleColumnContext

translations.accessible-column-end-header-context :string

Provides properties to customize the accessible context for the column end header index.

See the translations attribute for usage examples.

Since:
  • 2.1.0
Names
Item Name
Property translations.accessibleColumnEndHeaderContext

translations.accessible-column-end-header-label-context :string

Provides properties to customize the accessible context for the column end header label.

See the translations attribute for usage examples.

Since:
  • 7.0.0
Names
Item Name
Property translations.accessibleColumnEndHeaderLabelContext

translations.accessible-column-header-context :string

Provides properties to customize the accessible context for the column header index.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleColumnHeaderContext

translations.accessible-column-header-label-context :string

Provides properties to customize the accessible context for the column header label.

See the translations attribute for usage examples.

Since:
  • 7.0.0
Names
Item Name
Property translations.accessibleColumnHeaderLabelContext

translations.accessible-column-hierarchical-full :string

Hierarchical information for screen readers on the column's position in it's set and it's set size when available.

See the translations attribute for usage examples.

Default Value:
  • "Column {posInSet} of {setSize} columns"
Since:
  • 14.0.0
Names
Item Name
Property translations.accessibleColumnHierarchicalFull

translations.accessible-column-hierarchical-partial :string

Hierarchical information for screen readers when the column's set size is not available.

See the translations attribute for usage examples.

Default Value:
  • "Column {posInSet} of at least {setSize} columns"
Since:
  • 14.0.0
Names
Item Name
Property translations.accessibleColumnHierarchicalPartial

translations.accessible-column-hierarchical-unknown :string

Hierarchical information for screen readers when the column's position in the set and the set size is not available.

See the translations attribute for usage examples.

Default Value:
  • "At least column {posInSet} of at least {setSize} columns"
Since:
  • 14.0.0
Names
Item Name
Property translations.accessibleColumnHierarchicalUnknown

translations.accessible-column-selected :string

Provides properties to customize the accessible context when a column is selected.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleColumnSelected

translations.accessible-column-span-context :string

Provides properties to customize the accessible context for the cell column extent/span.

See the translations option for usage examples.

Since:
  • 4.0.0
Names
Item Name
Property translations.accessibleColumnSpanContext

translations.accessible-contains-controls :string

Provides properties to customize the accessible text when a cell contains controls.

See the translations attribute for usage examples.

Since:
  • 10.0.0
Names
Item Name
Property translations.accessibleContainsControls

translations.accessible-expanded :string

Provides properties to customize the accessible context when a row is expanded.

See the translations attribute for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.accessibleExpanded

translations.accessible-first-column :string

Provides properties to customize the accessible context when the first column is reached.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleFirstColumn

translations.accessible-first-row :string

Provides properties to customize the accessible context when the first row is reached.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleFirstRow

translations.accessible-last-column :string

Provides properties to customize the accessible context when the last column is reached.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleLastColumn

translations.accessible-last-row :string

Provides properties to customize the accessible context when the last row is reached.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleLastRow

translations.accessible-level-context :string

Provides properties to customize the accessible context for the header level when grouped.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleLevelContext

translations.accessible-level-hierarchical-context :string

Provides properties to customize the accessible context for the header level when hierarchical.

See the translations attribute for usage examples.

Default Value:
  • "Level {level}"
Since:
  • 14.0.0
Names
Item Name
Property translations.accessibleLevelHierarchicalContext

translations.accessible-multi-cell-selected :string

Provides properties to customize the accessible context when multiple cells are selected.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleMultiCellSelected

translations.accessible-navigation-mode :string

Provides properties to customize the accessible context to enter navigation mode.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleNavigationMode

translations.accessible-range-select-mode-off :string

Provides properties to customize the accessible context for discontinuous selection off.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleRangeSelectModeOff

translations.accessible-range-select-mode-on :string

Provides properties to customize the accessible context for discontinuous selection on.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleRangeSelectModeOn

translations.accessible-row-collapsed :string

Provides properties to customize the accessible context when a row is collapsed.

See the translations attribute for usage examples.

Deprecated:
Since Description
16.0.0 This option has been deprecated. Use accessibleCollapsed.
Since:
  • 16.0.0
Names
Item Name
Property translations.accessibleRowCollapsed

translations.accessible-row-context :string

Provides properties to customize the accessible context for the row index.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleRowContext

translations.accessible-row-end-header-context :string

Provides properties to customize the accessible context for the row end header index.

See the translations attribute for usage examples.

Since:
  • 2.1.0
Names
Item Name
Property translations.accessibleRowEndHeaderContext

translations.accessible-row-end-header-label-context :string

Provides properties to customize the accessible context for the row end header label.

See the translations attribute for usage examples.

Since:
  • 7.0.0
Names
Item Name
Property translations.accessibleRowEndHeaderLabelContext

translations.accessible-row-expanded :string

Provides properties to customize the accessible context when a header is expandable.

See the translations attribute for usage examples.

Deprecated:
Since Description
16.0.0 This option has been deprecated. Use accessibleExpanded.
Since:
  • 16.0.0
Names
Item Name
Property translations.accessibleRowExpanded

translations.accessible-row-header-context :string

Provides properties to customize the accessible context for the row header index.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleRowHeaderContext

translations.accessible-row-header-label-context :string

Provides properties to customize the accessible context for the row header label.

See the translations attribute for usage examples.

Since:
  • 7.0.0
Names
Item Name
Property translations.accessibleRowHeaderLabelContext

translations.accessible-row-hierarchical-full :string

Hierarchical information for screen readers on the row's position in it's set and it's set size when available.

See the translations attribute for usage examples.

Default Value:
  • "Row {posInSet} of {setSize} rows"
Since:
  • 14.0.0
Names
Item Name
Property translations.accessibleRowHierarchicalFull

translations.accessible-row-hierarchical-partial :string

Hierarchical information for screen readers when the rows's set size is not available..

See the translations attribute for usage examples.

Default Value:
  • "Row {posInSet} of at least {setSize} rows"
Since:
  • 14.0.0
Names
Item Name
Property translations.accessibleRowHierarchicalPartial

translations.accessible-row-hierarchical-unknown :string

Hierarchical information for screen readers when the row's position in the set and the set size is not available.

See the translations attribute for usage examples.

Default Value:
  • "At least row {posInSet} of at least {setSize} rows"
Since:
  • 14.0.0
Names
Item Name
Property translations.accessibleRowHierarchicalUnknown

translations.accessible-row-selected :string

Provides properties to customize the accessible context when a row is selected.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleRowSelected

translations.accessible-row-span-context :string

Provides properties to customize the accessible context for the cell extent/span.

See the translations option for usage examples.

Since:
  • 4.0.0
Names
Item Name
Property translations.accessibleRowSpanContext

translations.accessible-selection-affordance-bottom :string

Provides properties to customize the accessible context for the bottom selection affordance on touch device.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleSelectionAffordanceBottom

translations.accessible-selection-affordance-top :string

Provides properties to customize the accessible context for the top selection affordance on touch devices.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleSelectionAffordanceTop

translations.accessible-sort-ascending :string

Provides properties to customize the accessible text when a header is sorted ascending.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleSortAscending

translations.accessible-sort-descending :string

Provides properties to customize the accessible text when a header is sorted descending.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleSortDescending

translations.accessible-sortable :string

Provides properties to customize the accesible text when a header is able to be sorted.

See the translations attribute for usage examples.

Since:
  • 13.0.0
Names
Item Name
Property translations.accessibleSortable

translations.accessible-state-selected :string

Provides properties to customize the accessible context when an item has been selected.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleStateSelected

translations.accessible-summary-estimate :string

Provides properties to customize the accessible context read when the exact row and column count are unknown.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleSummaryEstimate

translations.accessible-summary-exact :string

Provides properties to customize the accessible context read when the exact row and column count are known.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleSummaryExact

translations.accessible-summary-expanded :string

Provides properties to customize the accessible context reading out the total number of rows expanded inside the data grid.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleSummaryExpanded

translations.collapsed-text :string

Title of the tooltip when header has the ability to be collapsed

See the translations option for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.collapsedText

translations.column-width :string

Field in dialog to enter the desired column width for the selected column or columns.

See the translations attribute for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.columnWidth

translations.expanded-text :string

Title of the tooltip when header has the ability to be expanded.

See the translations option for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.expandedText

translations.label-copy-cells :string

Provides properties to customize the context menu copy label for data transfer action.

See the translations attribute for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.labelCopyCells

translations.label-cut :string

Provides properties to customize the context menu cut label for row reordering.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.labelCut

translations.label-cut-cells :string

Provides properties to customize the context menu cut for data transfer action.

See the translations attribute for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.labelCutCells

translations.label-disable-non-contiguous :string

Provides properties to customize the context menu label for exiting non-contiguous selection.

See the translations attribute for usage examples.

Deprecated:
Since Description
16.0.0 This option has been deprecated. Use labelSelectMultiple.
Since:
  • 16.0.0
Names
Item Name
Property translations.labelDisableNonContiguous

translations.label-enable-non-contiguous :string

Provides properties to customize the context menu label for entering non-contiguous selection.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.labelEnableNonContiguous

translations.label-fill-cells :string

Provides properties to customize the context menu fill label for data transfer action.

See the translations attribute for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.labelFillCells

translations.label-filter :string

Filter icon tooltip.

See the translations attribute for usage examples.

Since:
  • 16.0.0
Names
Item Name
Property translations.labelFilter

translations.label-filter-col :string

Action menu item in the column context menu to filter column.

See the translations attribute for usage examples.

Since:
  • 16.0.0
Names
Item Name
Property translations.labelFilterCol

translations.label-freeze-col :string

Action menu item in the context menu to freeze column.

See the translations option for usage examples.

Since:
  • 15.0.0
Names
Item Name
Property translations.labelFreezeCol

translations.label-freeze-row :string

Action menu item in the context menu to freeze row.

See the translations option for usage examples.

Since:
  • 15.0.0
Names
Item Name
Property translations.labelFreezeRow

translations.label-hide-column :string

Provides properties to customize the context menu hide column label.

See the translations attribute for usage examples.

Since:
  • 15.1.0
Names
Item Name
Property translations.labelHideColumn

translations.label-hide-row :string

Provides properties to customize the context menu hide row label.

See the translations attribute for usage examples.

Since:
  • 16.0.0
Names
Item Name
Property translations.labelHideRow

translations.label-paste :string

Provides properties to customize the context menu paste label for row reordering.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.labelPaste

translations.label-paste-cells :string

Provides properties to customize the context menu paste label for data transfer action.

See the translations attribute for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.labelPasteCells

translations.label-resize :string

Provides properties to customize the context menu resize label.

See the translations attribute for usage examples.

Deprecated:
Since Description
16.0.0 This option has been deprecated. Use labelResizeWidth/labelResizeHeight.
Since:
  • 16.0.0
Names
Item Name
Property translations.labelResize

translations.label-resize-column :string

Action menu item in the context menu to open the dialog to change the column width of the selection.

See the translations attribute for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.labelResizeColumn

translations.label-resize-dialog-apply :string

Button to apply the resize values.

See the translations attribute for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.labelResizeDialogApply

translations.label-resize-dialog-cancel :string

Button to cancel the resize action and close the resize dialog.

See the translations attribute for usage examples.

Since:
  • 8.0.0
Names
Item Name
Property translations.labelResizeDialogCancel

translations.label-resize-dialog-submit :string

Provides properties to customize the resize dialog submit button.

See the translations attribute for usage examples.

Deprecated:
Since Description
16.0.0 This option has been deprecated. Use labelResizeDialogApply.
Since:
  • 16.0.0
Names
Item Name
Property translations.labelResizeDialogSubmit

translations.label-resize-fit-to-content :string

Action menu item in the context menu to resize the selection to fit.

See the translations attribute for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.labelResizeFitToContent

translations.label-resize-height :string

Action menu item in the context menu to open the dialog to change the row height of the selection.

See the translations attribute for usage examples.

Deprecated:
Since Description
16.0.0 This option has been deprecated. Use labelResizeRow.
Since:
  • 16.0.0
Names
Item Name
Property translations.labelResizeHeight

translations.label-resize-row :string

Action menu item in the context menu to open the dialog to change the row height of the selection.

See the translations attribute for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.labelResizeRow

translations.label-resize-width :string

Action menu item in the context menu to open the dialog to change the column width of the selection.

See the translations attribute for usage examples.

Deprecated:
Since Description
16.0.0 This option has been deprecated. Use labelResizeColumn.
Since:
  • 16.0.0
Names
Item Name
Property translations.labelResizeWidth

translations.label-select-multiple :string

Action menu item in the row and column context menus to change state to select multiple cells.

See the translations attribute for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.labelSelectMultiple

translations.label-sort-asc :string

Context menu label and sort icon tooltip for sort ascending.

See the translations attribute for usage examples.

Since:
  • 13.0.0
Names
Item Name
Property translations.labelSortAsc

translations.label-sort-col :string

Provides properties to customize the context menu sort column label.

See the translations attribute for usage examples.

Deprecated:
Since Description
16.0.0 This option has been deprecated. Use labelSortColAsc/labelSortColDsc.
Since:
  • 16.0.0
Names
Item Name
Property translations.labelSortCol

translations.label-sort-col-asc :string

Action menu item in the row context menu to sort column in ascending order.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.labelSortColAsc

translations.label-sort-col-dsc :string

Action menu item in the row context menu to sort column in descending order.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.labelSortColDsc

translations.label-sort-dsc :string

Context menu label and sort icon tooltip for sort descending.

See the translations attribute for usage examples.

Since:
  • 13.0.0
Names
Item Name
Property translations.labelSortDsc

translations.label-sort-row :string

Provides properties to customize the context menu sort row label.

See the translations attribute for usage examples.

Deprecated:
Since Description
16.0.0 This option has been deprecated. Use labelSortRowAsc/labelSortRowDsc.
Since:
  • 16.0.0
Names
Item Name
Property translations.labelSortRow

translations.label-sort-row-asc :string

Action menu item in the row context menu to sort row in ascending order.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.labelSortRowAsc

translations.label-sort-row-dsc :string

Action menu item in the row context menu to sort row in descending order.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.labelSortRowDsc

translations.label-unfreeze-col :string

Action menu item in the context menu to unfreeze column.

See the translations option for usage examples.

Since:
  • 15.0.0
Names
Item Name
Property translations.labelUnfreezeCol

translations.label-unfreeze-row :string

Action menu item in the context menu to unfreeze row.

See the translations option for usage examples.

Since:
  • 15.0.0
Names
Item Name
Property translations.labelUnfreezeRow

translations.label-unhide-column :string

Provides properties to customize the context menu unhide column label.

See the translations attribute for usage examples.

Since:
  • 15.1.0
Names
Item Name
Property translations.labelUnhideColumn

translations.label-unhide-row :string

Provides properties to customize the context menu unhide column label.

See the translations attribute for usage examples.

Since:
  • 16.0.0
Names
Item Name
Property translations.labelUnhideRow

translations.msg-fetching-data :string

Provides properties to customize the text when fetching data.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.msgFetchingData

translations.msg-no-data :string

Provides properties to customize the empty data grid text.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.msgNoData

translations.msg-read-only :string

Provides properties to customize the read-only data grid cell popup text.

See the translations attribute for usage examples.

Since:
  • 16.1.0
Names
Item Name
Property translations.msgReadOnly

translations.resize-column-dialog :string

Title of the dialog to set and apply column width.

See the translations option for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.resizeColumnDialog

translations.resize-row-dialog :string

Title of the dialog to set and apply row height.

See the translations option for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.resizeRowDialog

translations.row-height :string

Field in dialog to enter the desired row height for the selected row or rows.

See the translations attribute for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.rowHeight

translations.tooltip-required :string

Used for the default required icon tooltip.

Since:
  • 13.0.0
Names
Item Name
Property translations.tooltipRequired

Context Objects

Each context object contains, at minimum, a subId property, whose value is a string that identifies a particular DOM node in this element. It can have additional properties to further specify the desired node. See getContextByNode for more details.

Properties:
Name Type Description
subId string Sub-id string to identify a particular dom node.

Following are the valid subIds:

oj-datagrid-cell

Context for the ojDataGrid element's cells.

Properties:
Name Type Description
cell Object the container data object for the header
component function a reference to the DataGrid widgetConstructor
data Object the data object for the header
datasource Object a reference to the data source object
extents Object the object that contains both the row extent and column extent of the cell
Properties
Name Type Description
column number the column extent
row number the row extent
indexes Object the object that contains both the zero based row index and column index in which the cell is bound to
Properties
Name Type Description
column number the zero based absolute column index
row number the zero based absolute row index
keys Object the object that contains both the row key and column key which identifies the cell
Properties
Name Type Description
column number | string the column key
row number | string the row key
mode string the mode the cell is rendered in
subId string the subId of the cell

oj-datagrid-header

Context for the ojDataGrid element's headers.

Properties:
Name Type Description
axis number the axis of the header, possible values are 'row'/'column'/'columnEnd'/'rowEnd'
component function a reference to the DataGrid widgetConstructor
data Object the data object for the header
datasource Object a reference to the data source object
depth number the the number of levels the header spans
extent number the number of indexes the header spans
index number the index of the header, where 0 is the index of the first header
key number | string the key of the header
level number the level of the header. The outermost header is level zero
subId string the subId of the header

oj-datagrid-header-label

Context for the ojDataGrid element's header labels.

Properties:
Name Type Description
axis number the axis of the header label, possible values are 'row'/'column'/'columnEnd'/'rowEnd'
component function a reference to the DataGrid widgetConstructor
data Object the data object for the header label
datasource Object a reference to the data source object
level number the level of the header label. The outermost header label is level zero
subId string the subId of the header label

Events

ojBeforeCurrentCell

Triggered before the current cell is changed via the currentCell attribute or via the UI.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
currentCell oj.ojDataGrid.CurrentCell.<K> the new current cell, see currentCell for the object information
previousCurrentCell oj.ojDataGrid.CurrentCell.<K> the previous current cell, see currentCell for the object information

ojBeforeEdit

Triggered before the DataGrid is going to enter edit mode. To prevent editing the cell prevent default on the event.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
cellContext oj.ojDataGrid.CellContext.<K, D> the cellContext of the cell that editing is going to be performed on

ojBeforeEditEnd

Triggered before the DataGrid is going to exit edit mode. To prevent exit editing the prevent default on the event. There is a provided beforeEditEnd function, oj.DataCollectionEditUtils.basicHandleEditEnd, which can be specified. This function will handle canceling edits as well as invoking validation on input elements.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
cancelEdit boolean true if the edit should be negated based on actions (i.e. escape key)
cellContext oj.ojDataGrid.CellContext.<K, D> the cellContext of the cell that editing is going to be performed on

ojCellResize

Triggered when a portion of the DataGrid is resized.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
dimension 'columnHeaderHeight' | 'columnEndHeaderHeight' | 'rowHeaderWidth' | 'rowEndHeaderWidth' | 'columnWidth' | 'rowHeight' the dimension for which resize is occurring
indices Array.<number> | undefined array of indexes for which resize is occurring (only set if dimension = 'columnWidth' | 'rowHeight')
levels Array.<number> | undefined array of levels of the header / header label for which resize is occurring (only set if dimension = 'columnHeaderHeight' | 'columnEndHeaderHeight' | 'rowHeaderWidth' | 'rowEndHeaderWidth')
size number the new size of the cell with direction implied for which resize is occurring

ojCollapseRequest

Triggered when a collapse gesture is performed on the DataGrid with DataGridProvider. Use this event to communicate a collapse to the DataGridProvider. The DataGridProvider must then fire a refresh event to trigger the collapse fetches from the grid.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
axis 'row' | 'column' the axis for which collapse is occurring
item GridHeaderItem.<D> the item information of the header which was collapsed on
Since:
  • 12.0.0

ojCopyRequest

Triggered when a user tries to copy a selection via the UI. If the application supports paste to an external location, the application should listen to this event and track the selected cells that have been copied from the DataGrid to paste elsewhere. Listening for this event is not required if only internal copy/paste is performed, see ojPaste.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
sourceRange oj.ojDataGrid.Range The range of cells being copy, only a single range may be copied.

ojCutRequest

Triggered when a user tries to cut a selection via the UI. Only supported in multiple or single cell selection for a single range of cells. If the application supports paste to an external location, the application should listen to this event and track the selected cells that have been cut from the DataGrid to paste elsewhere. Once the paste has been performed the application should fire a DataGridProviderUpdateEvent to clear out the selection as is common for cut. Listening for this event is not required if only internal cut/paste is performed, see ojPaste.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
sourceRange oj.ojDataGrid.Range The range of cells being cut, only a single range may be cut.

ojExpandRequest

Triggered when a expand gesture is performed on the DataGrid with DataGridProvider. Use this event to communicate a expand to the DataGridProvider. The DataGridProvider must then fire a refresh/mutation event to trigger the expand fetches from the grid.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
axis 'row' | 'column' the axis for which expand is occurring
item GridHeaderItem.<D> the item information of the header which was expanded on
Since:
  • 12.0.0

ojFillRequest

Triggered when a user tries to fill a selection via the UI. Investigate the source selection/action to determine how to handle the fill operation. Applications should respond to the fill operation by firing appropriate DataGridProviderUpdateEvent mutations for the pasted region as well as the potentially cut region.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
action 'flood' | 'down' | 'end' The direction of the fill. Flood is the traditional spreadsheet fill. Down and End refer to specific keyboard and touch fill gestures, where the fill operates from the first cells in a row or column to the rest of the selection.
sourceRange oj.ojDataGrid.Range The range of cells being filled from.
targetRange oj.ojDataGrid.Range The range of cells being filled to.

ojFilterRequest

Triggered when a filter gesture is performed on the DataGrid with DataGridProvider. Use this event to communicate a filter request to the DataGridProvider. The DataGridProvider must then fire a refresh/mutation event to trigger the filtered fetches from the grid.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
anchor Element the header which was filtered on
axis 'column' the axis for which filter is occurring
item GridHeaderItem.<D> the item information of the header which was filtered on
launcher Element the filter icon
Since:
  • 16.0.0

ojHeaderLabelCutRequest

Triggered when a user tries to cut a header label via the UI. If the application supports insert onto the header labels (for pivoting), the application should listen to this event and track the header label that has been cut from the DataGrid to insert elsewhere.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
axis 'row' | 'column' | 'rowEnd' | 'columnEnd' Axis of the header label that is being cut.
level number The header label level that is cut.

ojPasteRequest

Triggered when a user tries to paste to a selection via the UI. Investigate the source selection/action to determine how to handle the paste operation. Applications should respond to the paste operation by firing appropriate DataGridProviderUpdateEvent mutations for the pasted region as well as the potentially cut region.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
action 'cut' | 'copy' | 'unknown' The action in the grid that paste is fired for. Cut or copy would be fired if there is an active cut or copy on the grid. Unknown means a paste gesture was fired but there is no active cut or copy. Applications can inspect the clipboard in this case.
sourceRange oj.ojDataGrid.Range The range of cells being pasted from. Can be null if action is unknown.
targetRange oj.ojDataGrid.Range The range of cells being pasted to.

ojResize

Triggered when a portion of the DataGrid is resized.
Deprecated:
Since Description
16.0.0 Use the event:cellResize event instead.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
header string | number the key of the header which was resized
newDimensions Object the newDimensions
Properties
Name Type Description
height number the new pixel size (ex: '75px' would be 75)
width number the new pixel size (ex: '75px' would be 75)
oldDimensions Object the oldDimensions
Properties
Name Type Description
height number the old pixel size (ex: '75px' would be 75)
width number the old pixel size (ex: '75px' would be 75)

ojScroll

Triggered after the DataGrid has been scrolled via the UI or the scrollTo method.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
scrollX number the x position in pixels of the scrollable region calculated from the origin of the DataGrid. In RTL this would be the right of the grid.
scrollY number the y position in pixels of the scrollable region

ojSort

Triggered when a sort is performed on the DataGrid.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
direction 'ascending' | 'descending' the direction of the sort ascending/descending
header any the key of the header which was sorted on

ojSortLabelRequest

Triggered when a sort gesture is performed on the DataGrid with DataGridProvider. Use this event to communicate a sort to the DataGridProvider. The DataGridProvider must then fire a refresh event to trigger the sort fetches from the grid.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
axis 'row' | 'column' | 'rowEnd' | 'columnEnd' the axis for which sort is occuring
direction 'ascending' | 'descending' the direction of the sort ascending/descending
item GridItem.<D> the item information of the headerlabel which was sorted on
level number the level of the header label on which sort was performed.
Since:
  • 16.1.0

ojSortRequest

Triggered when a sort gesture is performed on the DataGrid with DataGridProvider. Use this event to communicate a sort to the DataGridProvider. The DataGridProvider must then fire a refresh event to trigger the sort fetches from the grid.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
axis 'row' | 'column' the axis for which sort is occurring
direction 'ascending' | 'descending' the direction of the sort ascending/descending
item GridHeaderItem.<D> the item information of the header which was sorted on
Since:
  • 12.0.0

Methods

getContextByNode(node) : {ojDataGrid.CellContext<K,D> & {subId: 'oj-datagrid-cell'} | ojDataGrid.HeaderContext<K,D> & {subId: 'oj-datagrid-header'} | ojDataGrid.LabelContext<K,D> & {subId: 'oj-datagrid-header-label'}}

Returns an object with context for the given child DOM node.

This will always contain the subid for the node, defined as the 'subId' property on the context object. Additional element specific information may also be included.

For more details on returned objects, see context objects.

Parameters:
Name Type Argument Description
node Element <not nullable>
 the child DOM node
Returns:

the context for the DOM node, or null when none is found.

Type
ojDataGrid.CellContext<K,D> & {subId: 'oj-datagrid-cell'} | ojDataGrid.HeaderContext<K,D> & {subId: 'oj-datagrid-header'} | ojDataGrid.LabelContext<K,D> & {subId: 'oj-datagrid-header-label'}

getProperty(property) : {any}

Retrieves the value of a property or a subproperty. The return type will be the same as the type of the property as specified in this API document. If the method is invoked with an incorrect property/subproperty name, it returns undefined.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Since:
  • 4.0.0
Returns:
Type
any
Example

Get a single subproperty of a complex property:

let subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');

refresh : {void}

Redraw the entire data grid after having made some external modifications.
Returns:
Type
void

setProperties(properties) : {void}

Performs a batch set of properties. The type of value for each property being set must match the type of the property as specified in this API document.
Parameters:
Name Type Description
properties Object An object containing the property and value pairs to set.
Since:
  • 4.0.0
Returns:
Type
void
Example

Set a batch of properties:

myComponent.setProperties({"prop1": "value1", "prop2.subprop": "value2", "prop3": "value3"});

setProperty(property, value) : {void}

Sets a property or a subproperty (of a complex property) and notifies the component of the change, triggering a [property]Changed event. The value should be of the same type as the type of the attribute mentioned in this API document.
Parameters:
Name Type Description
property string The property name to set. Supports dot notation for subproperty access.
value any The new value to set the property to.
Since:
  • 4.0.0
Returns:
Type
void
Example

Set a single subproperty of a complex property:

myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");

Type Definitions

CellContext<K,D>

context object used by cell callbacks.
Properties:
Name Type Argument Description
cell D the container data object for the cell
componentElement Element a reference to the DataGrid root Element
data D the data object for the cell
datasource DataProvider.<K, D> | null a reference to the data source object
extents Object the object that contains both the row extent and column extent of the cell
Properties
Name Type Description
column number the column extent
row number the row extent
indexFromParent number <nullable>
 if flattened tree data provider, the offset from the parent key
indexes Object the object that contains both the zero based row index and column index in which the cell is bound to
Properties
Name Type Description
column number the zero based absolute column index
row number the zero based absolute row index
isLeaf boolean <nullable>
 if flattened tree data provider, true if it is a leaf node
keys Object the object that contains both the row key and column key which identifies the cell
Properties
Name Type Description
column K the column key
row K the row key
metadata any <nullable>
 the top level item metadata object if using a DataGridProvider
mode "edit" | "navigation" the mode the cell is rendered in
parentElement Element empty rendered cell element
parentKey K <nullable>
 if flattened tree data provider, the parent row key
treeDepth number <nullable>
 if flattened tree data provider, the depth of the node

CellTemplateContext<D>

Properties:
Name Type Description
datasource DataGridProvider.<D> A reference to the grid data provider object.
item GridBodyItem.<D> True if the current item is a leaf node.
mode string The mode of the row containing the cell. It can be "edit" or "navigation".

CurrentCell<K>

current cell description.
Properties:
Name Type Argument Description
axis "column" | "columnEnd" | "row" | "rowEnd" <optional>
 header axis, available if type is header or label
index number <optional>
 header index, available if type is header
indexes Object <optional>
 cell indexes, available if type is cell
Properties
Name Type Description
column number cell column index
row number cell row index
key any <optional>
 header key, available if type is header
keys Object <optional>
 cell keys, available if type is cell
Properties
Name Type Description
column K cell column key
row K cell row key
level number <optional>
 header level, available if type is header or label
type "cell" | "header" | "label" designates whether a header or databody cell is the current cell

DragHeaderContext

Context for datagrid DnD on Rows/Columns.
Properties:
Name Type Description
axis string The axis on which drag is performed.
range Array.<oj.ojDataGrid.Range> An array of objects, with each object representing the data of single selection of row/column.

DragHeaderLabelContext

Context for datagrid DnD on Rows/Columns Label.
Properties:
Name Type Description
axis string The axis on which drag is performed.
level number Level of the header label on which drag is performed.

DropHeaderContext

Properties:
Name Type Description
axis string The axis on which drop is performed.
index number The index of the row/column being dropped on before drag was initiated.
position string Drop position relative to index dropped on. Position can take one among the values 'before', 'inside', 'after'.

DropHeaderLabelContext

Properties:
Name Type Description
axis string The axis on which drop is performed.
level number The level of the row/column label being dropped on before drag was initiated.
position string Drop position relative to index dropped on. Position can take one among the values 'before', 'inside', 'after'.

HeaderContext<K,D>

context object used by header callbacks.
Properties:
Name Type Argument Description
axis "column" | "columnEnd" | "row" | "rowEnd" the axis of the header
componentElement Element a reference to the DataGrid root Element
contentElement Element <nullable>
 empty content div element if axis is row or column
data D the data object for the header
datasource DataProvider.<K, D> | null a reference to the data source object
depth number the number of levels the header spans
extent number the number of indexes the header spans
index number the index of the header, where 0 is the index of the first header
indexFromParent number <nullable>
 if flattened tree data provider and row axis, the offset from the parent key
isLeaf boolean <nullable>
 if flattened tree data provider and row axis, true if it is a leaf node
key K the key of the header
level number the level of the header. The outermost header is level zero
metadata any <nullable>
 the top level item metadata object if using a DataGridProvider
parentElement Element empty rendered header element
parentKey K <nullable>
 if flattened tree data provider and row axis, the parent row key
treeDepth number <nullable>
 if flattened tree data provider and row axis, the depth of the node

HeaderTemplateContext<D>

Properties:
Name Type Description
datasource DataGridProvider.<D> A reference to the grid data provider object.
item GridHeaderItem.<D> True if the current item is a leaf node.

HorizontalAlignment

Enum type that defines horizontal alignment.
Signature:

('auto'|'start'|'center'|'end'|'left'|'right')

Supported Values:
Value Description
auto contents are positioned according to redwood design
center contents are positioned at the center of the container
end contents are positioned at the end of the container
left contents are positioned to the left of the container irrespective of 'ltr' or 'rtl' mode.
right contents are positioned to the right of the container irrespective of 'ltr' or 'rtl' mode.
start contents are positioned at the beginning of the container

LabelContext<K,D>

context object used by header label callbacks.
Properties:
Name Type Argument Description
axis "column" | "columnEnd" | "row" | "rowEnd" the axis of the label
componentElement Element a reference to the DataGrid root Element
contentElement Element <nullable>
 empty content div element if axis is row or column
datasource DataProvider.<K, D> | null a reference to the data source object
key K the key of the label
level number the level of the label
metadata any <nullable>
 the top level item metadata object if using a DataGridProvider
parentElement Element empty rendered label element

LabelTemplateContext<D>

Properties:
Name Type Description
datasource DataGridProvider.<D> A reference to the grid data provider object.
item GridItem.<D> True if the current item is a leaf node.

Range

Range description.
Signature:

{startIndex: {row: number, column?: number}, endIndex: {row: number, column?: number}}

Selection<K>

start of one row selection, can be on index or key or both.
Signature:

{startIndex?: {row: number, column?: number}, startKey?:{row: K, column?: K}, endIndex?: {row: number, column?: number}, endKey?:{row: K, column?: K}}

VerticalAlignment

Enum type that defines vertical alignment.
Signature:

('auto'|'top'|'center'|'bottom')

Supported Values:
Value Description
auto contents are positioned according to redwood design
bottom contents are positioned at the bottom of the container
center contents are positioned at the center of the container
top contents are positioned at the top of the container