Element: <oj-data-grid>

Oracle® JavaScript Extension Toolkit (JET)
5.0.0

E90577-01

QuickNav

Attributes


Context Objects

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.


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

Version:
  • 5.0.0
Since:
  • 0.6
Module:
  • ojdatagrid

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 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 + 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-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 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.
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 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:
Name Type Description
"cellEdit" string the DataGrid cells are individually 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 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) 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-policy-options :Object.<number>|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'.

Properties:
Name Type Argument Description
maxRowCount number <optional>
The maximum total number of rows to fetch, -1 is unbounded
maxColumnCount number <optional>
The maximum total number of columns to fetch, -1 is unbounded
Default Value:
  • {'maxRowCount': 500, 'maxColumnCount': 500}
Names
Item Name
Property scrollPolicyOptions
Property change event scrollPolicyOptionsChanged
Property change listener attribute (must be of type function) on-scroll-policy-options-changed
Examples

Initialize the DataGrid with the scroll-policy-options attribute specified:

<!-- Using dot notation -->
<oj-data-grid scroll-policy-options.max-row-count='500'></oj-data-grid>

Get or set the scrollPolicyOptions property after initialization:

// Get one
var maxCountValue = myDataGrid.scrollPolicyOptions.maxRowCount;

// Get all
var scrollPolicyOptionsValues = myDataGrid.scrollPolicyOptions;

// Set one, leaving the others intact
myDataGrid.setProperty('scrollPolicyOptions.maxRowCount', 250);

// Set all. Properties not listed will be lost.
myDataGrid.scrollPolicyOptions = {maxRowCount: 1000};

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.

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 * <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 * <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}
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.rowIndex='1' scroll-position.columnIndex='1'></oj-data-grid>

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

Get or set the scrollPosition property after initialization:

// Get one
var scrollPositionValue = myDataGrid.scrollPosition.rowIndex;

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

// Get all
var scrollPositionValues = myDataGrid.scrollPosition;

// Set all. Those not listed will be lost until the scroll completes and the remaining fields are populated.
myDataGrid.scrollPosition = {
    x: 50,
    y: 45
};

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.

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 not allow for deselections. 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) 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. Setter may be used with only indices or keys.
myDataGrid.selection = [{startIndex: {row: 1, column: 1}, endIndex: {row: 2, column: 2}}];

selection-mode :Object.<string, string>

Specifies whether row or cell selection 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. If the selection mode is changed at runtime the selection will be cleared. Selection is initially disabled, but setting both attributes' value to none will disable selection.

Properties:
Name Type Description
row string set row selection mode, valid values are: 'none', 'single', 'multiple'
cell string set cell selection mode, valid values are: 'none', 'single', 'multiple'
Default Value:
  • {cell:'none', row:'none'}
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'
    row: 'none'
};

selection-mode.cell :string

Specifies whether cell selection can be made and the cardinality (single/multiple/none). 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. Cell selection is initially disabled, but setting the attribute's value to none will disable cell selection. If the selection mode is changed at runtime the selection will be cleared.

Supported Values:
Name Type Description
"multiple" string any number of cells selected at a time
"none" string no cell selection
"single" string at most one cell selected at a time
Default Value:
  • 'none'
Names
Item Name
Property selectionMode.cell
Examples

Initialize the DataGrid with the selectionMode.cell attribute specified:

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

Get or set the selectionMode.cell property after initialization:

// getter
var selectionModecellValue = myDataGrid.selectionMode.cell;

// setter
myDataGrid.selectionMode.cell = 'single';

selection-mode.row :string

Specifies whether row selection can be made and the cardinality (single/multiple/none). 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. Row selection is initially disabled, but setting the attribute's value to none will row disable selection. If the selection mode is changed at runtime the selection will be cleared.

Supported Values:
Name Type Description
"multiple" string any number of rows selected at a time
"none" string no row selection
"single" string at most one row selected at a time
Default Value:
  • 'none'
Names
Item Name
Property selectionMode.row
Examples

Initialize the DataGrid with the selectionMode.row attribute specified:

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

Get or set the selectionMode.row property after initialization:

// getter
var selectionModeRowValue = myDataGrid.selectionMode.row;

// setter
myDataGrid.selectionMode.row = 'single';

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) 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 :string

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 Argument Description
node Element <not nullable>
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.
Since:
  • 4.0.0
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.
Example

Invoke the refresh method:

myDataGrid.refresh();

setProperties(properties) → {void}

Performs a batch set of properties.
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 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.
Since:
  • 4.0.0
Returns:
Type
void
Example

Set a single subproperty of a complex property:

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