datagrid https://khalil232.com Sun, 12 Apr 2026 18:11:29 +0000 en-US hourly 1 https://wordpress.org/?v=7.0 https://i0.wp.com/khalil232.com/wp-content/uploads/2023/12/khalil232-favicon-color.png?fit=32%2C32&ssl=1 datagrid https://khalil232.com 32 32 222554886 How to have different colors on rows based on one field in row in oj-data-grid https://khalil232.com/vbcs-tutorials/217/how-to-have-different-colors-on-rows-based-on-one-field-in-row-in-oj-data-grid/ Mon, 04 Dec 2023 19:10:44 +0000 https://khalil232.com/?p=217 On a data grid, we can use a function in the cell.class-name attribute to dynamically pass the class name based on row data.

“cellContext” will contain the required information. We can use console.log() to identify the structure.

This can be used for other attributes, like “header.column.class-name” as well on oj-data-grid

This can be used when we want show different style for different rows, like

  • If we want to highlight top performer in a data set,
  • or differently show calculated fields
  • or if we want to show different type with a different color

Sample HTML code:

<div class="oj-flex">
  <div class="oj-flex-item oj-sm-12 ">
    <h5>Data grid</h5>
    <oj-data-grid id="datagrid" style="width:100%;height:400px" aria-label="My Data Grid" 
      data='{{ salaryDataADP }}'
      header.column.style="[[ headerColStyle ]]" header.column.resizable.width="enable"
      header.column.resizable.height="enable" header.row.resizable.width="enable"     
      header.row.resizable.height="enable"
      header.column.class-name="oj-helper-justify-content-flex-start" 
      cell.class-name="[[ cellClassNameFunc ]]"
      cell.style="width: 200px;">     
    </oj-data-grid>
  </div>
</div>

Sample JS code:

this.cellClassNameFunc = function (cellContext) {
  let cellRowIndex = cellContext.indexes.row;
  let classNameStr = "oj-helper-justify-content ";
  
  // to do styling based on index 
  // if (cellRowIndex % 3 === 0) {
  //   classNameStr += "oj-bg-success-10 oj-text-color-success";
  // } else if (cellRowIndex % 3 === 1) {
  //   classNameStr += "oj-bg-danger-30	 oj-text-color-danger";
  // } else {
  //   classNameStr += "oj-bg-warning-30 oj-text-color-warning";
  // }
  
  let key = cellContext.key;
  console.log(cellContext);
  console.log(cellContext.datasource.data[cellRowIndex]);
  let rowData = cellContext.datasource.data.find((x) => x.id === key);
  if (rowData.city === "Delhi" || rowData.city === "Banglore") {
    classNameStr += "oj-bg-success-10 oj-text-color-success";
  } else if (rowData.city === "Hyderabad" || rowData.city === "Kolkata") {
    classNameStr += "oj-bg-danger-30	 oj-text-color-danger";
  } else if (rowData.city === "Mumbai" || rowData.city === "Nagpur") {
    classNameStr += "oj-bg-warning-30 oj-text-color-warning";
  }
  
  cellContext.datasource[cellRowIndex];
  
  return classNameStr;
};

Screenshots

Choosing row background color and text color based on city

Choosing row background color and text color based on index

Live application URL ( row style based on city ): https://khalil232.com/apps/ojet-apps/?ojr=data-grid-example

References:

Datagrid js doc for identifying other attributes : https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojDataGrid.html

CSS helpers used:

Background-color: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/BackgroundColor.html

Font color: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/Text.html

]]> 217 How to enable resize in oj-data-grid https://khalil232.com/vbcs-tutorials/212/how-to-enable-resize-in-oj-data-grid/ Mon, 04 Dec 2023 18:32:09 +0000 https://khalil232.com/?p=212 : The following attributes on the header will allow resizing. When hovering on a border, the user can resize the row or column height or width. To add an additional right-click menu, we can add the below code. The user can right-click […]]]> We can enable resize in oj-data-grid by adding the following html code to <oj-data-grid>:

<oj-data-grid
  id="datagrid"
  style="width:100%;height:400px"
  aria-label="My Data Grid"
  data='{{ salaryDataADP }}'
  header.column.style="[[ headerColStyle ]]"
  header.column.resizable.width="enable"
  header.column.resizable.height="enable"
  header.row.resizable.width="enable"
  header.row.resizable.height="enable"
  header.column.class-name="oj-helper-justify-content-flex-start"
  cell.class-name="oj-helper-justify-content-flex-start"
>
  <oj-menu slot="contextMenu" aria-label="Employee Edit">
    <oj-option id="resizeWidth" value="Resize Width"
      data-oj-command="oj-datagrid-resizeWidth"></oj-option>
    <oj-option id="resizeHeight" value="Resize Height"
      data-oj-command="oj-datagrid-resizeHeight"></oj-option>
    <oj-option id="resizeFitToContent" value="Resize Fit To Content"
      data-oj-command="oj-datagrid-resizeFitToContent"></oj-option>
  </oj-menu>
</oj-data-grid>

The following attributes on the header will allow resizing. When hovering on a border, the user can resize the row or column height or width.

<oj-data-grid
  header.column.resizable.width="enable"
  header.column.resizable.height="enable"
  header.row.resizable.width="enable"
  header.row.resizable.height="enable"
>
</oj-data-grid>

To add an additional right-click menu, we can add the below code. The user can right-click and click on Resize width, and enter a desired width, like 100 or 200.

<oj-menu slot="contextMenu" aria-label="Employee Edit">
    <oj-option id="resizeWidth" value="Resize Width"
      data-oj-command="oj-datagrid-resizeWidth"></oj-option>
    <oj-option id="resizeHeight" value="Resize Height"
      data-oj-command="oj-datagrid-resizeHeight"></oj-option>
    <oj-option id="resizeFitToContent" value="Resize Fit To Content"
      data-oj-command="oj-datagrid-resizeFitToContent"></oj-option>
  </oj-menu>

There are other commands available, like below ( see the jsdoc link for more information ). Few features are supported only in latest version of JET

Default Functiondata-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 Widthoj-datagrid-resizeWidth
Resize Heightoj-datagrid-resizeHeight
Resize Fit To Contentoj-datagrid-resizeFitToContent
Sort Row Ascendingoj-datagrid-sortRowAsc
Sort Row Descendingoj-datagrid-sortRowDsc
Sort Column Ascendingoj-datagrid-sortColAsc
Sort Column Descendingoj-datagrid-sortColDsc
Cut (for reordering)oj-datagrid-cut
Paste (for reordering)oj-datagrid-paste
CutCells (for data transferring)oj-datagrid-cutCells
CopyCells (for data transferring)oj-datagrid-copyCells
PasteCells (for data transferring)oj-datagrid-pasteCells
Filloj-datagrid-fillCells
Select Multiple Cells on Touch Deviceoj-datagrid-discontiguousSelection
Freeze Columnsoj-datagrid-freezeCol
Freeze Rowsoj-datagrid-freezeRow
Unfreeze Columnsoj-datagrid-unfreezeColumn
Unfreeze Rowsoj-datagrid-unfreezeRow
Hide Columnsoj-datagrid-hideCol
Unhide Columnsoj-datagrid-unhideCol

Screenshots

Live application URL: https://khalil232.com/apps/ojet-apps/?ojr=data-grid-example

References:

helper classes: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/Helpers.html

jet cookbook: https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=dataGrid&demo=resizing

link for oj-data-commands: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojDataGrid.html#contextmenu-section

]]> 212