Element: <oj-data-grid>

Oracle® JavaScript Extension Toolkit (JET)
4.2.0

E91398-01

QuickNav

Attributes


Context Objects

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

Version:
  • 4.2.0
Since:
  • 0.6

JET Custom Elements

JET components are implemented as custom HTML elements. A detailed description of working with these elements can be found in: JET Custom Element 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 Press & Short Hold Focus on the header.
Press & Hold Display context menu
Column Header Tap Sorts the column if sortable enabled.
Header Gridline Drag Resizes the header if resizable enabled along the axis.

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 additional cells to the current 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 + 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.
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.

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 paramter 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, 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-helper-justify-content-[direction] 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.
oj-helper-align-items-[direction] Use this class on cells' and headers' className prperty to align your content vertically. By default the alignment is center on cells and headers, see other possibilities in the flex layout align section.
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-[number] 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 elements can have up to two types of child content:

  • Any child element with a slot attribute will be moved into that named slot, e.g. <span slot='startIcon'>...</span>. All supported named slots are documented below. Child elements with unsupported named slots will be removed from the DOM.
  • Any child element lacking a slot attribute will be moved to the default slot, also known as a regular child.

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

Example

Initialize the component with a context menu:

<oj-some-element>
    <-- use the contextMenu slot to designate this as the context menu for this component -->
    <oj-menu slot="contextMenu" style="display:none" aria-label="Some element's context menu">
...
    </oj-menu>
</oj-some-element>

Attributes

banding-interval :Object.<string, number>

Row banding and column banding intervals within the DataGrid body.

Properties:
Name Type Description
row number row banding interval
column number column banding interval
Default Value:
  • {"row":0, "column":0}
Names
Item Name
Property bandingInterval
Property change event bandingIntervalChanged
Property change listener attribute (must be of type function) on-banding-interval-changed
Examples

Initialize the DataGrid with the bandingInterval attribute specified:

<!-- Using dot notation -->
<oj-data-grid banding-interval.row='1' banding-interval.column='1'></oj-data-grid>

<!-- Using JSON notation -->
<oj-data-grid banding-interval='{"row": 1, "column": 1}'></oj-data-grid>

Get or set the bandingInterval property after initialization:

// Get one
var bandingIntervalValue = myDataGrid.bandingInterval.row;

// Set one, leaving the others intact
myDataGrid.setProperty('bandingInterval.row', 1);

// Get all
var bandingIntervalValues = myDataGrid.bandingInterval;

// Set all.  Must list every resource key, as those not listed are lost.
myDataGrid.bandingInterval = {
    row: 1,
    column: 1
};

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) on-cell-changed
Examples

Initialize the DataGrid with the cell attribute specified:

<!-- Using dot notation -->
<oj-data-grid cell.some-key='some value'></oj-data-grid>

<!-- Using JSON notation -->
<oj-data-grid cell='{"someKey":"some value", "someOtherKey":"some other value"}'></oj-data-grid>

Get or set the cell property after initialization:

// Get one
var value = myDataGrid.cell.someKey;

// Set one, leaving the others intact
myDataGrid.setProperty('cell.someKey', 'someValue');

// Get all
var values = myDataGrid.cell;

// Set all.  Must list every resource key, as those not listed are lost.
myDataGrid.cell = {
     someKey: 'some value',
     someOtherKey: 'some other value'
};

cell.class-name :function(Object)|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
Examples

Initialize the DataGrid with the className attribute specified:

<oj-data-grid cell.class-name='myClassName'></oj-data-grid>

Get or set the className property after initialization:

// getter
var classNameValue = myDataGrid.cell.className;

// setter
myDataGrid.cell.className = 'myClassName';

cell.renderer :function(Object)|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
Examples

Initialize the DataGrid with the renderer attribute specified:

<oj-data-grid cell.renderer='{{myRendererFunction}}'></oj-data-grid>

Get or set the renderer property after initialization:

// getter
var rendererValue = myDataGrid.cell.renderer;

// setter
myDataGrid.cell.renderer = myRendererFunction;

cell.style :function(Object)|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
Examples

Initialize the DataGrid with the style attribute specified:

<oj-data-grid cell.style='myStyle'></oj-data-grid>

Get or set the style property after initialization:

// getter
var styleValue = myDataGrid.cell.style;

// setter
myDataGrid.cell.style = 'myStyle';

current-cell :Object

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

Properties:
Name Type Description
type string designates whether a header or databody cell is the current cell, valid values are: 'cell', 'header'
axis string header axis, available if type is header, valid values are: 'row', 'column', 'rowEnd', 'columnEnd'
index number header index, available if type is header
level number header level, available if type is header
key number header key, available if type is header
indexes Object cell indexes, available if type is cell
Properties
Name Type Description
row number cell row index
column number cell column index
keys Object cell keys, available if type is cell
Properties
Name Type Description
row string cell row key
column string cell column key
Default Value:
  • null
Supports writeback:
  • true
Names
Item Name
Property currentCell
Property change event currentCellChanged
Property change listener attribute (must be of type function) on-current-cell-changed
Examples

Initialize the DataGrid with the currentCell attribute specified:

<!-- Using dot notation -->
<oj-data-grid current-cell.type='cell' current-cell.indexes.row='1' current-cell.indexes.column='1'></oj-data-grid>

<!-- Using JSON notation -->
<oj-data-grid current-cell='{"type": "cell", "indexes":{"row": 1, "column": 1}}'></oj-data-grid>

Get or set the currentCell property after initialization:

// Get one
var currentCellValue = myDataGrid.currentCell.type;

// Set one, leaving the others intact
myDataGrid.setProperty('currentCell.type', 'cell');

// Get all
var currentCellValues = myDataGrid.currentCell;

// Set all.  Must list every resource key, as those not listed are lost.
myDataGrid.currentCell = {
   type: 'cell',
   indexes:{
       row: 1,
       column: 1
   }
};

data :oj.DataGridDataSource

The data source for the DataGrid must be an extension of oj.DataGridDataSource. 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.

Default Value:
  • null
Names
Item Name
Property data
Property change event dataChanged
Property change listener attribute (must be of type function) on-data-changed
Examples

Initialize the DataGrid with the data attribute specified:

<oj-data-grid data='{{myDataSource}}'></oj-data-grid>

Get or set the data property after initialization:

// getter
var dataValue = myDataGrid.data;

// setter
myDataGrid.data = myDataSource;

dnd :Object

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

Specify an object with a subproperty reorder set to {row:'enable'} to enable reordering. Setting the reorder subproperty to {row:'disable'}, or setting the dnd attribute to null (or omitting it), disables reordering support. There must be move capability support on the data source to enable this feature.

Properties:
Name Type Description
reorder Object an object with property row
Properties
Name Type Description
row string row reordering within the DataGrid, valid values are: 'enable', 'disable'
Default Value:
  • {"reorder": {"row" :"disable"}}
Names
Item Name
Property dnd
Property change event dndChanged
Property change listener attribute (must be of type function) on-dnd-changed
Examples

Initialize the DataGrid with the dnd attribute specified:

<!-- Using dot notation -->
<oj-data-grid dnd.reorder.row='enable'></oj-data-grid>

<!-- Using JSON notation -->
<oj-data-grid dnd='{"reorder": {"row": "enable"}}'></oj-data-grid>

Get or set the dnd property after initialization:

// Get one
var dndValue = myDataGrid.dnd.reorder.row;

// Set one, leaving the others intact
myDataGrid.setProperty('dnd.reorder.row', 'enable');

// Get all
var dndValues = myDataGrid.dnd;

// Set all.  Must list every resource key, as those not listed are lost.
myDataGrid.dnd = {
    reorder: {
         row: 'enable'
    }
};

edit-mode :string

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 synchronusly 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 asynchronusly 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:
Name Type Description
'cellEdit' string the DataGrid cells are indivdually tabbable and editable
'cellNavigation' string the DataGrid is a single tab stop and editable at the cell level, but currently read only
'none' string 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) on-edit-mode-changed
Examples

Initialize the DataGrid with the editMode attribute specified:

<oj-data-grid edit-mode='cellEdit'></oj-data-grid>

Get or set the editMode property after initialization:

// getter
var editModeValue = myDataGrid.editMode;

// setter
myDataGrid.editMode = 'cellEdit';

gridlines :Object.<string, string>

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.

Properties:
Name Type Description
horizontal string horizontal gridlines, valid values are: 'hidden', 'visible'
vertical string vertical gridlines, valid values are: 'hidden', 'visible'
Default Value:
  • {"horizontal": "visible", "vertical": "visible"}
Names
Item Name
Property gridlines
Property change event gridlinesChanged
Property change listener attribute (must be of type function) on-gridlines-changed
Examples

Initialize the DataGrid with the gridlines attribute specified:

<!-- Using dot notation -->
<oj-data-grid gridlines.horizontal='hidden' gridlines.vertical='hidden'></oj-data-grid>

<!-- Using JSON notation -->
<oj-data-grid gridlines='{"horizontal":"hidden", "vertical":"hidden"}'></oj-data-grid>

Get or set the gridlines property after initialization:

// Get one
var gridlinesValue = myDataGrid.gridlines.horizontal;

// Set one, leaving the others intact
myDataGrid.setProperty('gridlines.horizontal', 'hidden');

// Get all
var gridlinesValues = myDataGrid.gridlines;

// Set all.  Must list every resource key, as those not listed are lost.
myDataGrid.gridlines = {
    horizontal: 'hidden',
    vertical: 'hidden'
};
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) on-header-changed
Examples

Initialize the DataGrid with the header attribute specified:

<!-- Using dot notation -->
<oj-data-grid header.some-key='some value'></oj-data-grid>

<!-- Using JSON notation -->
<oj-data-grid header='{"someKey":"some value", "someOtherKey":"some other value"}'></oj-data-grid>

Get or set the header property after initialization:

// Get one
var value = myDataGrid.header.someKey;

// Set one, leaving the others intact
myDataGrid.setProperty('header.someKey', 'someValue');

// Get all
var values = myDataGrid.header;

// Set all.  Must list every resource key, as those not listed are lost.
myDataGrid.header = {
     someKey: 'some value',
     someOtherKey: 'some other value'
};

header.column

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

Initialize the DataGrid with the column attribute specified:

<!-- Using dot notation -->
<oj-data-grid header.column.some-key='some value'></oj-data-grid>

<!-- Using JSON notation -->
<oj-data-grid header.column='{"someKey":"some value", "someOtherKey":"some other value"}'></oj-data-grid>

Get or set the column property after initialization:

// Get one
var value = myDataGrid.header.column.someKey;

// Set one, leaving the others intact
myDataGrid.setProperty('header.column.someKey', 'someValue');

// Get all
var values = myDataGrid.header.column;

// Set all.  Must list every resource key, as those not listed are lost.
myDataGrid.header.column = {
     someKey: 'some value',
     someOtherKey: 'some other value'
};

header.column.class-name :function(Object)|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
Examples

Initialize the DataGrid with the className attribute specified:

<oj-data-grid header.column.class-name='myClassName'></oj-data-grid>

Get or set the className property after initialization:

// getter
var classNameValue = myDataGrid.header.column.className;

// setter
myDataGrid.header.column.className = 'myClassName';

header.column.renderer :function(Object)|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
Examples

Initialize the DataGrid with the renderer attribute specified:

<oj-data-grid header.column.renderer='{{myRendererFunction}}'></oj-data-grid>

Get or set the renderer property after initialization:

// getter
var rendererValue = myDataGrid.header.column.renderer;

// setter
myDataGrid.header.column.renderer = myRendererFunction;

header.column.resizable :Object.<string, string>|Object.<string, function(Object)>|null

Enable or disable width or height resize 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.

Properties:
Name Type Description
width string column width resizable, valid values are: 'enable', 'disable'
height string column header height resizable, valid values are: 'enable', 'disable'
Default Value:
  • {"width": "disable", "height": "disable"}
Names
Item Name
Property header.column.resizable
Examples

Initialize the DataGrid with the resizable attribute specified:

<!-- Using dot notation -->
<oj-data-grid header.column.resizable.width='enable'></oj-data-grid>

<!-- Using JSON notation -->
<oj-data-grid header='{"column":{"resizable": {"width": "enable"}}}'></oj-data-grid>

Get or set the resizable property after initialization:

// Get one
var resizableValue = myDataGrid.header.column.resizable.width;

// Set one, leaving the others intact
myDataGrid.setProperty('header.column.resizable.width', 'enable');

// Get all
var resizableValues = myDataGrid.header.column.resizable;

// Set all.  Must list every resource key, as those not listed are lost.
myDataGrid.header = {
   column: {
       resizable: {
           width: 'enable'
        }
   }
};

header.column.sortable :function(Object)|string

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:
Name Type Description
'auto' string get the sortable property from the data source
'disable' string disable sorting on column headers
'enable' string enable sorting on column headers
Default Value:
  • 'auto'
Names
Item Name
Property header.column.sortable
Examples

Initialize the DataGrid with the sortable attribute specified:

<oj-data-grid header.column.class-name='disable'></oj-data-grid>

Get or set the sortable property after initialization:

// getter
var sortableValue = myDataGrid.header.column.sortable;

// setter
myDataGrid.header.column.sortable = 'disable';

header.column.style :function(Object)|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
Examples

Initialize the DataGrid with the style attribute specified:

<oj-data-grid header.column.style='myStyle'></oj-data-grid>

Get or set the style property after initialization:

// getter
var styleValue = myDataGrid.header.column.style;

// setter
myDataGrid.header.column.style = 'myStyle';

header.column-end

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

Initialize the DataGrid with the columnEnd attribute specified:

<!-- Using dot notation -->
<oj-data-grid header.column-end.some-key='some value'></oj-data-grid>

<!-- Using JSON notation -->
<oj-data-grid header.column-end='{"someKey":"some value", "someOtherKey":"some other value"}'></oj-data-grid>

Get or set the columnEnd property after initialization:

// Get one
var value = myDataGrid.header.columnEnd.someKey;

// Set one, leaving the others intact
myDataGrid.setProperty('header.columnEnd.someKey', 'someValue');

// Get all
var values = myDataGrid.header.columnEnd;

// Set all.  Must list every resource key, as those not listed are lost.
myDataGrid.header.columnEnd = {
     someKey: 'some value',
     someOtherKey: 'some other value'
};

header.column-end.class-name :function(Object)|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
Examples

Initialize the DataGrid with the className attribute specified:

<oj-data-grid header.column-end.class-name='myClassName'></oj-data-grid>

Get or set the className property after initialization:

// getter
var classNameValue = myDataGrid.header.columnEnd.className;

// setter
myDataGrid.header.columnEnd.className = 'myClassName';

header.column-end.renderer :function(Object)|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
Examples

Initialize the DataGrid with the renderer attribute specified:

<oj-data-grid header.column-end.renderer='{{myRendererFunction}}'></oj-data-grid>

Get or set the renderer property after initialization:

// getter
var rendererValue = myDataGrid.header.columnEnd.renderer;

// setter
myDataGrid.header.columnEnd.renderer = myRendererFunction;

header.column-end.resizable :Object.<string, string>|Object.<string, function(Object)>|null

Enable or disable width or height resize 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.

Properties:
Name Type Description
width string columnEnd width resizable, valid values are: 'enable', 'disable'
height string columnEnd header height resizable, valid values are: 'enable', 'disable'
Default Value:
  • {"width": "disable", "height": "disable"}
Names
Item Name
Property header.columnEnd.resizable
Examples

Initialize the DataGrid with the resizable attribute specified:

<!-- Using dot notation -->
<oj-data-grid header.column-end.resizable.width='enable'></oj-data-grid>

<!-- Using JSON notation -->
<oj-data-grid header='{"column-end":{"resizable": {"width": "enable"}}}'></oj-data-grid>

Get or set the resizable property after initialization:

// Get one
var resizableValue = myDataGrid.header.columnEnd.resizable.width;

// Set one, leaving the others intact
myDataGrid.setProperty('header.columnEnd.resizable.width', 'enable');

// Get all
var resizableValues = myDataGrid.header.columnEnd.resizable;

// Set all.  Must list every resource key, as those not listed are lost.
myDataGrid.header = {
   columnEnd: {
       resizable: {
           width: 'enable'
        }
   }
};

header.column-end.style :function(Object)|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
Examples

Initialize the DataGrid with the style attribute specified:

<oj-data-grid header.column-end.style='myStyle'></oj-data-grid>

Get or set the style property after initialization:

// getter
var styleValue = myDataGrid.header.columnEnd.style;

// setter
myDataGrid.header.columnEnd.style = 'myStyle';

header.row

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

Initialize the DataGrid with the row attribute specified:

<!-- Using dot notation -->
<oj-data-grid header.row.some-key='some value'></oj-data-grid>

<!-- Using JSON notation -->
<oj-data-grid header.row='{"someKey":"some value", "someOtherKey":"some other value"}'></oj-data-grid>

Get or set the row property after initialization:

// Get one
var value = myDataGrid.header.row.someKey;

// Set one, leaving the others intact
myDataGrid.setProperty('header.row.someKey', 'someValue');

// Get all
var values = myDataGrid.header.row;

// Set all.  Must list every resource key, as those not listed are lost.
myDataGrid.header.row = {
     someKey: 'some value',
     someOtherKey: 'some other value'
};

header.row.class-name :function(Object)|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
Examples

Initialize the DataGrid with the className attribute specified:

<oj-data-grid header.row.class-name='myClassName'></oj-data-grid>

Get or set the className property after initialization:

// getter
var classNameValue = myDataGrid.header.row.className;

// setter
myDataGrid.header.row.className = 'myClassName';

header.row.renderer :function(Object)|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
Examples

Initialize the DataGrid with the renderer attribute specified:

<oj-data-grid header.row.renderer='{{myRendererFunction}}'></oj-data-grid>

Get or set the renderer property after initialization:

// getter
var rendererValue = myDataGrid.header.row.renderer;

// setter
myDataGrid.header.row.renderer = myRendererFunction;

header.row.resizable :Object.<string, string>|Object.<string, function(Object)>|null

Enable or disable width or height resize 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.

Properties:
Name Type Description
width string row width resizable, valid values are: 'enable', 'disable'
height string row header height resizable, valid values are: 'enable', 'disable'
Default Value:
  • {"width": "disable", "height": "disable"}
Names
Item Name
Property header.row.resizable
Examples

Initialize the DataGrid with the resizable attribute specified:

<!-- Using dot notation -->
<oj-data-grid header.row.resizable.width='enable'></oj-data-grid>

<!-- Using JSON notation -->
<oj-data-grid header='{"row":{"resizable": {"width": "enable"}}}'></oj-data-grid>

Get or set the resizable property after initialization:

// Get one
var resizableValue = myDataGrid.header.row.resizable.width;

// Set one, leaving the others intact
myDataGrid.setProperty('header.row.resizable.width', 'enable');

// Get all
var resizableValues = myDataGrid.header.row.resizable;

// Set all.  Must list every resource key, as those not listed are lost.
myDataGrid.header = {
   row: {
       resizable: {
           width: 'enable'
        }
   }
};

header.row.sortable :function(Object)|string

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:
Name Type Description
'auto' string get the sortable property from the data source
'disable' string disable sorting on row headers
'enable' string enable sorting on row headers
Default Value:
  • 'auto'
Names
Item Name
Property header.row.sortable
Examples

Initialize the DataGrid with the sortable attribute specified:

<oj-data-grid header.row.class-name='disable'></oj-data-grid>

Get or set the sortable property after initialization:

// getter
var sortableValue = myDataGrid.header.row.sortable;

// setter
myDataGrid.header.row.sortable = 'disable';

header.row.style :function(Object)|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
Examples

Initialize the DataGrid with the style attribute specified:

<oj-data-grid header.row.style='myStyle'></oj-data-grid>

Get or set the style property after initialization:

// getter
var styleValue = myDataGrid.header.row.style;

// setter
myDataGrid.header.row.style = 'myStyle';

header.row-end

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

Initialize the DataGrid with the rowEnd attribute specified:

<!-- Using dot notation -->
<oj-data-grid header.row-end.some-key='some value'></oj-data-grid>

<!-- Using JSON notation -->
<oj-data-grid header.row-end='{"someKey":"some value", "someOtherKey":"some other value"}'></oj-data-grid>

Get or set the rowEnd property after initialization:

// Get one
var value = myDataGrid.header.rowEnd.someKey;

// Set one, leaving the others intact
myDataGrid.setProperty('header.rowEnd.someKey', 'someValue');

// Get all
var values = myDataGrid.header.rowEnd;

// Set all.  Must list every resource key, as those not listed are lost.
myDataGrid.header.rowEnd = {
     someKey: 'some value',
     someOtherKey: 'some other value'
};

header.row-end.class-name :function(Object)|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
Examples

Initialize the DataGrid with the className attribute specified:

<oj-data-grid header.row-end.class-name='myClassName'></oj-data-grid>

Get or set the className property after initialization:

// getter
var classNameValue = myDataGrid.header.rowEnd.className;

// setter
myDataGrid.header.rowEnd.className = 'myClassName';

header.row-end.renderer :function(Object)|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
Examples

Initialize the DataGrid with the renderer attribute specified:

<oj-data-grid header.row-end.renderer='{{myRendererFunction}}'></oj-data-grid>

Get or set the renderer property after initialization:

// getter
var rendererValue = myDataGrid.header.rowEnd.renderer;

// setter
myDataGrid.header.rowEnd.renderer = myRendererFunction;

header.row-end.resizable :Object.<string, string>|Object.<string, function(Object)>|null

Enable or disable width or height resize 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.

Properties:
Name Type Description
width string rowEnd width resizable, valid values are: 'enable', 'disable'
height string rowEnd header height resizable, valid values are: 'enable', 'disable'
Default Value:
  • {"width": "disable", "height": "disable"}
Names
Item Name
Property header.rowEnd.resizable
Examples

Initialize the DataGrid with the resizable attribute specified:

<!-- Using dot notation -->
<oj-data-grid header.row-end.resizable.width='enable'></oj-data-grid>

<!-- Using JSON notation -->
<oj-data-grid header='{"row-end":{"resizable": {"width": "enable"}}}'></oj-data-grid>

Get or set the resizable property after initialization:

// Get one
var resizableValue = myDataGrid.header.row-end.resizable.width;

// Set one, leaving the others intact
myDataGrid.setProperty('header.row-end.resizable.width', 'enable');

// Get all
var resizableValues = myDataGrid.header.rowEnd.resizable;

// Set all.  Must list every resource key, as those not listed are lost.
myDataGrid.header = {
   rowEnd: {
       resizable: {
           width: 'enable'
        }
   }
};

header.row-end.style :function(Object)|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
Examples

Initialize the DataGrid with the style attribute specified:

<oj-data-grid header.row-end.style='myStyle'></oj-data-grid>

Get or set the style property after initialization:

// getter
var styleValue = myDataGrid.header.rowEnd.style;

// setter
myDataGrid.header.rowEnd.style = 'myStyle';

scroll-policy :string|null

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

Supported Values:
Name Type Description
'auto' string the DataGrid will decide the scroll policy
'loadMoreOnScroll' string additional data are fetched when the user scrolls to the bottom of the DataGrid and all previous data are kept in the DOM
'scroll' string virtual scrolling is used meaning only rows/columns visibile 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) on-scroll-policy-changed
Examples

Initialize the DataGrid with the scrollPolicy attribute specified:

<oj-data-grid scroll-policy='scroll'></oj-data-grid>

Get or set the scrollPolicy property after initialization:

// getter
var scrollPolicyValue = myDataGrid.scrollPolicy;

// setter
myDataGrid.scrollPolicy = 'scroll';

scroll-position :Object.<string, Object>|null

The index or key of the row and/or column to display initially in the DataGrid. Only key or index should be specified, if they both are the grid will scroll initially to the key values.

Properties:
Name Type Description
index Object scroll to a given row and column index of the DataGrid
Properties
Name Type Description
row number row index to scroll to
column number column index to scroll to
key Object scroll to a given row and column key of the DataGrid
Properties
Name Type Description
row string row key to scroll to
column string column key to scroll to
Default Value:
  • null
Names
Item Name
Property scrollPosition
Property change event scrollPositionChanged
Property change listener attribute (must be of type function) on-scroll-position-changed
Examples

Initialize the DataGrid with the scrollPosition attribute specified:

<!-- Using dot notation -->
<oj-data-grid scroll-position.index.row='1' scroll-position.index.column='1'></oj-data-grid>

<!-- Using JSON notation -->
<oj-data-grid scroll-position='{"index":{"row": "1", "column": "1"}}'></oj-data-grid>

Get or set the scrollPosition property after initialization:

// Get one
var scrollPositionValue = myDataGrid.scrollPosition.index.row;

// Set one, leaving the others intact
myDataGrid.setProperty('scrollPosition.index.row', '1');

// Get all
var scrollPositionValues = myDataGrid.scrollPosition;

// Set all.  Must list every resource key, as those not listed are lost.
myDataGrid.scrollPosition = {
    index: {
         row: '1',
         column: '1'
    }
};

selection :Array.<Object>

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

The range object contains a startIndex, endIndex, startKey, and endKey. If cell selection is enabled each will contain a row and column property. If row selection is enabled each will contain a row property only.

Default Value:
  • []
Supports writeback:
  • true
Names
Item Name
Property selection
Property change event selectionChanged
Property change listener attribute (must be of type function) on-selection-changed
Examples

Initialize the DataGrid with the selection attribute specified:

<!-- Using JSON notation -->
<oj-data-grid selection='[{"startIndex": {"row": 1, "column": 1}, "endIndex": {"row": 2, "column": 2}}]'></oj-data-grid>

Get or set the selection property after initialization:

// Get one
var selectionValue = myDataGrid.selection[0];

// Get all
var selectionValues = myDataGrid.selection;

// Set all
myDataGrid.selection = [{startIndex: {row: 1, column: 1}, endIndex: {row: 2, column: 2}}];

selection-mode :Object.<string, string>|null

Specifies whether row/cell selection can be made and the cardinality of each (single/multiple/none) selection in the DataGrid. Only one of the attributes, row or column, should be set at at time. Selection is initially disabled, but setting the value to null will disable selection.

Properties:
Name Type Description
row string set row selection mode, valid values are: 'single', 'multiple'
cell string set cell selection mode, valid values are: 'single', 'multiple'
Default Value:
  • null
Names
Item Name
Property selectionMode
Property change event selectionModeChanged
Property change listener attribute (must be of type function) on-selection-mode-changed
Examples

Initialize the DataGrid with the selectionMode attribute specified:

<!-- Using dot notation -->
<oj-data-grid selection-mode.cell='multiple'></oj-data-grid>

<!-- Using JSON notation -->
<oj-data-grid selection-mode='{"cell": "multiple"}'></oj-data-grid>

Get or set the selectionMode property after initialization:

// Get one
var selectionModeValue = myDataGrid.selectionMode.cell;

// Set one, leaving the others intact
myDataGrid.setProperty('selectionMode.cell', 'multiple');

// Get all
var selectionModeValues = myDataGrid.selectionMode;

// Set all.  Must list every resource key, as those not listed are lost.
myDataGrid.selectionMode = {
    cell: 'multiple'
};

translations :Object

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 this component has translations, their documentation immediately follows this doc entry.

Default Value:
  • an object containing all resources relevant to the component, or null if none
Names
Item Name
Property translations
Property change event translationsChanged
Property change listener attribute (must be of type function) on-translations-changed
Examples

Initialize the component, overriding some translated resources and leaving the others intact:

<!-- Using dot notation -->
<oj-some-element translations.some-key='some value' translations.some-other-key='some other value'></oj-some-element>

<!-- Using JSON notation -->
<oj-some-element translations='{"someKey":"some value", "someOtherKey":"some other value"}'></oj-some-element>

Get or set the translations property after initialization:

// Get one
var value = myComponent.translations.someKey;

// Set one, leaving the others intact. Always use the setProperty API for 
// subproperties rather than setting a subproperty directly.
myComponent.setProperty('translations.someKey', 'some value');

// Get all
var values = myComponent.translations;

// Set all.  Must list every resource key, as those not listed are lost.
myComponent.translations = {
    someKey: 'some value',
    someOtherKey: 'some other value'
};

translations.accessible-actionable-mode :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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-header-context :Object

Provides properties to customize the accesible 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-selected :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible context when mulitple cells are selected.

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.accessibleMultiCellSelected

translations.accessible-navigation-mode :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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-expanded :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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-selected :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

Provides properties to customize the accesible 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 :Object

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 :Object

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

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.labelDisableNonContiguous

translations.label-enable-non-contiguous :Object

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

See the translations attribute for usage examples.

Since:
  • 1.1.0
Names
Item Name
Property translations.labelEnableNonContiguous

translations.label-paste :Object

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 :Object

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-submit :Object

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 :Object

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 :Object

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 :Object

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 :Object

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 :Object

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 :Object

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 :Object

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 :Object

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 :Object

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 :Object

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 elements'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

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.

Name Type Description
currentCell Object the new current cell, see currentCell for the object information
previousCurrentCell Object the previous current cell, see currentCell for the object information
Examples

Specify an ojBeforeCurrentCell listener via the DOM attribute:

<oj-data-grid on-oj-before-current-cell='[[listener]]'></oj-data-grid>

Specify an ojBeforeCurrentCell listener via the JavaScript property:

myDataGrid.onOjBeforeCurrentCell = listener;

Add an ojBeforeCurrentCell listener via the addEventListener API:

myDataGrid.addEventListener('ojBeforeCurrentCell', listener);

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.

Name Type Description
cellContext Object the cellContext of the cell that editing is going to be performed on
Examples

Specify an ojBeforeEdit listener via the DOM attribute:

<oj-data-grid on-oj-before-edit='[[listener]]'></oj-data-grid>

Specify an ojBeforeEdit listener via the JavaScript property:

myDataGrid.onOjBeforeEdit = listener;

Add an ojBeforeEdit listener via the addEventListener API:

myDataGrid.addEventListener('ojBeforeEdit', listener);

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.

Name Type Description
cellContext Object 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)
Examples

Specify an ojBeforeEditEnd listener via the DOM attribute:

<oj-data-grid on-oj-before-edit-end='[[listener]]'></oj-data-grid>

Specify an ojBeforeEditEnd listener via the JavaScript property:

myDataGrid.onOjBeforeEditEnd = listener;

Add an ojBeforeEditEnd listener via the addEventListener API:

myDataGrid.addEventListener('ojBeforeEditEnd', listener);

ojResize

Triggered when a portion of the DataGrid is resized
Properties:

All of the event payloads listed below can be found under event.detail.

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)
Examples

Specify an ojResize listener via the DOM attribute:

<oj-data-grid on-oj-resize='[[listener]]'></oj-data-grid>

Specify an ojResize listener via the JavaScript property:

myDataGrid.onOjResize = listener;

Add an ojResize listener via the addEventListener API:

myDataGrid.addEventListener('ojResize', listener);

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.

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
Examples

Specify an ojScroll listener via the DOM attribute:

<oj-data-grid on-oj-scroll='[[listener]]'></oj-data-grid>

Specify an ojScroll listener via the JavaScript property:

myDataGrid.onOjScroll = listener;

Add an ojScroll listener via the addEventListener API:

myDataGrid.addEventListener('ojScroll', listener);

ojSort

Triggered when a sort is performed on the DataGrid
Properties:

All of the event payloads listed below can be found under event.detail.

Name Type Description
header string | number the key of the header which was sorted on
direction string the direction of the sort ascending/descending
Examples

Specify an ojSort listener via the DOM attribute:

<oj-data-grid on-oj-sort='[[listener]]'></oj-data-grid>

Specify an ojSort listener via the JavaScript property:

myDataGrid.onOjSort = listener;

Add an ojSort listener via the addEventListener API:

myDataGrid.addEventListener('ojSort', listener);

Methods

getContextByNode(node) → {Object|null}

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 Description
node Element the child DOM node
Returns:
the context for the DOM node, or null when none is found.
Type
Object | null
Example

Invoke the getContextByNode method:

myDataGrid.getContextByNode(nodeInsideElement);

getProperty(property) → {*}

Retrieves a value for a property or a single subproperty for complex properties.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Returns:
Type
*
Example

Get a single subproperty of a complex property:

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

refresh()

Redraw the entire data grid after having made some external modifications.

This method does not accept any arguments.

Example

Invoke the refresh method:

myDataGrid.refresh();

setProperties(properties)

Performs a batch set of properties.
Parameters:
Name Type Description
properties Object An object containing the property and value pairs to set.
Example

Set a batch of properties:

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

setProperty(property, value)

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a [property]Changed event.
Parameters:
Name Type Description
property string The property name to set. Supports dot notation for subproperty access.
value * The new value to set the property to.
Example

Set a single subproperty of a complex property:

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