Element: <oj-data-grid>

Oracle® JavaScript Extension Toolkit (JET)
8.0.0
F18189-01

Signature:

class ojDataGrid<K, D>

QuickNav

Slots

Attributes


Context Objects

Events

Methods

Type Definitions

JET Custom Elements

JET components are implemented as custom HTML elements. In addition to the component attributes documented in this page, JET components also support standard HTML global attributes like id and aria-label.

The JET data binding syntax can be used to define both component and global attributes through the use of dynamically evaluated expressions. All attributes (component and global) support attribute-level binding by prefixing the attribute name with ":" (e.g. :id="[...]"). When using attribute-level binding, all expression values are treated as strings. Additionally, component attributes support property-level binding by using the attribute name directly with no ":" prefix. When using property-level binding, the expressions should evaluate to the types documented by the corresponding attributes. Property-level binding is strongly recommended over attribute-level binding for component attributes.

A detailed description of working with custom HTML elements can be found in: JET Custom Element Usage.



Version:
  • 8.0.0
Since:
  • 0.6.0
Module:
  • ojdatagrid

Module usage

See JET Module Loading for an overview of module usage within JET.

Typescript Import Format
//To typecheck the element APIs, import as below.
import {ojDataGrid} from "ojs/ojdatagrid";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojdatagrid";
Generic Parameters
ParameterDescription
KType of key of the dataprovider
DType of data from the dataprovider

JET In Typescript

A detailed description of working with JET elements and classes in your typescript project can be found at: JET Typescript Usage.


JET DataGrid

Description:

A JET DataGrid is a themable, 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 DataGridDataSource. There are several types of DataGridDataSource that are provided out of the box:

  • oj.ArrayDataGridDataSource - Use this when the underlying data is a static array. The ArrayDataGridDataSource supports both single array (in which case each item in the array represents a row of data in the DataGrid) and two dimensional array (in which case each item in the array represents a cell in the DataGrid). See the documentation for oj.ArrayDataGridDataSource for more details on the available options.
  • oj.CollectionDataGridDataSource - Use this when oj.Collection is the model for the underlying data. Note that the DataGrid will automatically react to model event from the underlying oj.Collection. See the documentation for oj.CollectionDataGridDataSource for more details on the available options.
  • oj.CubeDataGridDataSource - Use this when aggregating data with oj.Cube. See the documentation for oj.CubeDataGridDataSource for more details on the available options.
  • oj.PagingDataGridDataSource - Use this when the DataGrid is driven by an associating ojPagingControl. See the documentation for oj.PagingDataGridDataSource for more details on the available options.
  • oj.FlattenedTreeDataGridDataSource - Use this when hierarchical data is displayed in the DataGrid. The FlattenedDataGridDataSource takes an oj.TreeDataSource and adapts that to the DataGridDataSource. The ojRowExpander works with the FlattenedTreeDataGridDataSource to enable expanding/collapsing of rows.

Developers can also create their own DataSource by extending the oj.DataGridDataSource class. See the cookbook for an example of a custom DataGridDataSource.

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 level 0 of the active index of the header in the arrow direction if it exists.
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 + X Marks the current row to move if dnd is enabled and the datasource supports move operation.
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.
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 level 0 of the active index in the column header if it exists.
Ctrl + DownArrow If in the column header, move focus to level 0 of the active index in the column end header if it exists.
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 in the row end header, move focus to level 0 of the active index in the row header if it exists.
Ctrl + RightArrow If in the row header, move focus to level 0 of the active index in the row end header if it exists.
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.

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

If a FlattenedTreeDataGridDataSource is used, the following additional contextual information are available:

Key Description
depth The depth of the row. The depth of root row is 0.
index The index of the row relative to its parent. The index of the first child is 0.
state The state of the row. Possible values are 'expanded', 'collapsed', 'leaf'.
parentKey The key of the parent row. For root row the parent key is null.

Note that a custom DataGridDataSource can return additional header and cell context information. Consult the documentation of the DataGridDataSource API for details.

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

Styling

The following CSS classes can be applied by the page author as needed.

Class Description
oj-[size]-justify-content-[flexjustify] Use this class on cells' and headers' className property to align your content horizontally. By default the alignment is flex-end on cells and varies on headers, see other possibilities in the Flex Layout justify section for size and flexjustify options.
oj-[size]-align-items-[flexalign] Use this class on cells' and headers' className property to align your content vertically. By default the alignment is center on cells and headers, see other possibilities in the Flex Layout align section for size and flexalign options.
oj-helper-justify-content-[direction] Direction can be left or right. Use this class on cells' and headers' className align your content horizontally to the left or right. See the Helpers section for details. This handles the always one direction case that flexjustify does not.
oj-datagrid-cell-no-padding Used to style a datagrid cell so that it has no padding.
oj-datagrid-cell-padding Used to style a datagrid cell so that it has the default padding.
oj-datagrid-depth-[1-7] 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.

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
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 oj-datagrid-cut
Paste oj-datagrid-paste
Toggle Non-Contiguous Selection on Touch Device oj-datagrid-discontiguousSelection

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.

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.

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.

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

(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.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 :(oj.DataGridDataSource|oj.DataProvider|null) data :(oj.DataProvider.<K, D>|null)

The data source for the DataGrid must be an extension of oj.DataGridDataSource or oj.DataProvider. 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. If using a DataProvider with scrollPolicy scroll, the oj.DataProvider must support fetchByOffset capability as randomAccess.

Type details
Setter Type(oj.DataProvider.<K, D>|null)
Getter Typeoj.DataProvider.<K, 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

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

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

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

(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

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

(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} | 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.
  • 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.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} | 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 the following property:
    • insert: HTMLElement | string - A string or a DOM element of the content inside the column header.
  • 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

Enable or disable sorting on the field bounded by this header. The data source associated with the DataGrid must have the sort function defined and the capability supported. 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 source
"disable" disable sorting on column headers
"enable" enable sorting on column headers
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

(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

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

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

(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} | 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.
  • 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.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} | 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 the following property:
    • insert: HTMLElement | string - A string or a DOM element of the content inside the row header.
  • 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

Enable or disable sorting on the field bounded by this header. The data source associated with the DataGrid must have the sort function defined and the capability supported. 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 source
"disable" disable sorting on row headers
"enable" enable sorting on row headers
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

(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

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

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 data grid 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
x number <optional>
 the horizontal position in pixel
y number <optional>
 the vertical position in pixel
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.
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.
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.
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.
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

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

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleLevelContext

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.

Since:
  • 1.1.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 row is expanded.

See the translations attribute for usage examples.

Since:
  • 1.1.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-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-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.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-disable-non-contiguous :string

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

See the translations attribute for usage examples.

Since:
  • 1.1.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-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-resize :string

Provides properties to customize the context menu resize label.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.labelResize

translations.label-resize-dialog-cancel :string

Provides properties to customize the resize dialog cancel button.

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.

Since:
  • 1.2.0
Names
Item Name
Property translations.labelResizeDialogSubmit

translations.label-resize-height :string

Provides properties to customize the context menu resize height label.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.labelResizeHeight

translations.label-resize-width :string

Provides properties to customize the context menu resize width label.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.labelResizeWidth

translations.label-sort-col :string

Provides properties to customize the context menu sort column label.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.labelSortCol

translations.label-sort-col-asc :string

Provides properties to customize the context menu sort column ascending label.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.labelSortColAsc

translations.label-sort-col-dsc :string

Provides properties to customize the context menu sort column descending label.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.labelSortColDsc

translations.label-sort-row :string

Provides properties to customize the context menu sort row label.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.labelSortRow

translations.label-sort-row-asc :string

Provides properties to customize the context menu sort row ascending label.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.labelSortRowAsc

translations.label-sort-row-dsc :string

Provides properties to customize the context menu sort row descending label.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.labelSortRowDsc

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

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
component function a reference to the DataGrid widgetConstructor
cell Object the container data object for the header
data Object the data object for the header
datasource Object a reference to the data source object
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
row number the zero based absolute row index
column number the zero based absolute column index
keys Object the object that contains both the row key and column key which identifies the cell
Properties
Name Type Description
row number | string the row key
column number | string the column key
extents Object the object that contains both the row extent and column extent of the cell
Properties
Name Type Description
row number the row extent
column number the column extent
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
cellContext oj.ojDataGrid.CellContext.<K, D> the cellContext of the cell that editing is going to be performed on
cancelEdit boolean true if the edit should be negated based on actions (i.e. escape key)

ojResize

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
header string | number the key of the header which was resized
oldDimensions Object the oldDimensions
Properties
Name Type Description
width number the old pixel size (ex: '75px' would be 75)
height number the old pixel size (ex: '75px' would be 75)
newDimensions Object the newDimensions
Properties
Name Type Description
width number the new pixel size (ex: '75px' would be 75)
height number the new 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
header any the key of the header which was sorted on
direction 'ascending' | 'descending' the direction of the sort ascending/descending

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
componentElement Element a reference to the DataGrid root Element
parentElement Element empty rendered cell element
cell D the container data object for the header
data D the data object for the header
datasource oj.DataProvider.<K, D> | null a reference to the data source object
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
row number the zero based absolute row index
column number the zero based absolute column index
keys Object the object that contains both the row key and column key which identifies the cell
Properties
Name Type Description
row K the row key
column K the column key
extents Object the object that contains both the row extent and column extent of the cell
Properties
Name Type Description
row number the row extent
column number the column extent
indexFromParent number <nullable>
 if flattened tree data provider, the offset from the parent key
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
isLeaf boolean <nullable>
 if flattened tree data provider, true if it is a leaf node
mode "edit" | "navigation" the mode the cell is rendered in

CurrentCell<K>

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

HeaderContext<K,D>

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

LabelContext<K,D>

context object used by header label callbacks.
Properties:
Name Type Description
componentElement Element a reference to the DataGrid root Element
parentElement Element empty rendered label element
datasource oj.DataProvider.<K, D> | null a reference to the data source object
axis "column" | "columnEnd" | "row" | "rowEnd" the axis of the label
key K the key of the label
level number the level of the label

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