Forum Stats

  • 3,817,447 Users
  • 2,259,334 Discussions
  • 7,893,776 Comments

Discussions

implementing row expander in oracle visual builder cloud service

Want to implement row exapander in table in oracle vbcs following below code:

PageModule.prototype.rowRenderer = function(context) {

  var tableRow = context.rowContext.parentElement;

  var deptIdCell = document.createElement('td');

  var expandIconDiv = document.createElement('div');

  expandIconDiv.style.display = 'inline-block';

  expandIconDiv.style.width = '21px';

  var expandIcon = document.createElement('a');

  expandIcon.setAttribute('href', '#');

  expandIcon.setAttribute('aria-expanded', false);

  // need to set the id after the row had been added to the DOM

  // since we don't have the id yet

  setTimeout(function() {

  expandIcon.setAttribute('aria-labelledby', deptIdCell.id);

  }, 0);

  expandIcon.classList.add('oj-component-icon');

  expandIcon.classList.add('oj-clickable-icon-nocontext');

  expandIcon.classList.add('oj-fwk-icon-arrow03-end');

  if (context.data.ParentID == -1) {

  expandIconDiv.appendChild(expandIcon);

  deptIdCell.appendChild(expandIconDiv);

  }

  $(deptIdCell).append(context.row.ParamName);

  var deptNameCell = document.createElement('td');

  //deptNameCell.style.padding = '50px';

  $(deptNameCell).append(context.row.ParamValue);

  var deptLocIdCell = document.createElement('td');

  $(deptLocIdCell).append(context.row.WMAPE);

  var deptManIdCell = document.createElement('td');

  $(deptManIdCell).append(context.row.Bias);

  var statIdCell = document.createElement('td');

  $(statIdCell).append(context.row.stat);

  tableRow.appendChild(deptIdCell);

  tableRow.appendChild(deptNameCell);

  tableRow.appendChild(deptLocIdCell);

  tableRow.appendChild(deptManIdCell);

  tableRow.appendChild(statIdCell);

  };

PageModule.prototype.TableDataExpendHandler = function(objectdata) {

  var indexInArray = deptArray.map(function(obj) {

  return obj.ID;

  }).indexOf(objectdata.ID);

  if (deptArray[indexInArray].ParentID == -1) {

  var i;

  for (i = 0; i < deptArray.length; i++) {

  if (deptArray[indexInArray].ID == deptArray[i].ParentID) {

  if (deptArray[i].Display == 0) {

  deptArray[i].Display = 1;

  } else {

  deptArray[i].Display = 0;

  }

  }

  }

  }

  var filtered = deptArray.filter(function(value, index, arr) {

  value = deptArray[index].Display;

  return value == 1;

  });

  var dataprovider = new oj.ArrayDataProvider(filtered, {

  keyAttributes: 'ID'

  });

  return dataprovider;

  };

==================Table

<oj-table id="table" columns-default.sortable="disabled" columns='[ { "headerText": "Run Description", "field": "ParamName", "headerClassName": "oj-sm-only-hide", "className": "oj-sm-only-hide" }, { "headerText": "Value", "field": "ParamValue", "headerClassName": "oj-sm-only-hide", "className": "oj-sm-only-hide", "resizable": "enabled" }, { "headerText": "WMAPE", "field": "WMAPE", "headerClassName": "oj-sm-only-hide", "className": "oj-sm-only-hide", "resizable": "enabled" }, { "headerText": "Bias", "field": "Bias", "headerClassName": "oj-sm-only-hide", "className": "oj-sm-only-hide" }, { "headerText": "Status", "field": "stat", "headerClassName": "oj-sm-only-hide", "className": "oj-sm-only-hide" }]'

style="width: 100%; height:100%;" selection-mode.row="single" data="[[$page.variables.TableDataProviderCycles]]"

class="oj-flex-item" display="grid" on-first-selected-row-changed="[[$listeners.tableFirstSelectedRow]]"

row-renderer="{{$page.functions.rowRenderer}}" scroll-policy="auto">

</oj-table>

but getting error while returning dataprovider variable, saying oj is not defined.

Any help would be appreciated!!