Oracle Apex font on a row selector

Question

I have been asked if I can modify my oracle apex interactive grid to make the row selector column wider, bold and add a title is possible. I know how to do this for a column but I am not sure it is possible for an interactive grid row selector. Any help or an example would be helpful.. Thank you

What are you showing for a row selector, a checkbox? If so, how would bold work with this? Are you only wanting to make it wider to fit the title? — Dan McGhan
yes it is a checkbox column type = rowselector. We would like to make the column wider and add a title and the display of the column in the interactive grid when checked is a very light font so we were trying to enhance that by making it bold — GMan1973

Dan McGhan Dan McGhan · Accepted Answer · 2019-11-13T22:08:40

Wow, this was a tricky one. I think I've figured it out (many thanks to John Snyders!). Assuming the IG has an id of 'emp', the following should work:

Add the following CSS to the page's Inline property under CSS. This will handle the styling of the checkbox, the checkmark in the checkbox, and it will show the column's header which is hidden by default. You can remove the #emp selector if you want to target all IGs on a page.

/* Style the box */
#emp .u-selector {
  border: 2px solid #000;
  padding: .5px;
}

/* Style the check in the box */
#emp .u-selector:before {
  font-weight: 900;
  color: #000;
}

/* Show the row selector column header */
#emp .a-GV-headerLabel {
  position: relative;
}
#emp .a-GV-table th {
  white-space: normal;
}

Next, add the following JavaScript code to the page's Execute when Page Loads property under JavaScript.

var igRegionId = 'emp';
var widgetInst = apex.region(igRegionId).call('getViews').grid.view$.data('apex-grid');
var orgRefresh = widgetInst.refresh;

widgetInst.refresh = function() {
  orgRefresh.call(widgetInst);
  $('.u-vh.a-GV-headerLabel').text('Hello World!');
};

widgetInst.refresh();

Finally, add the following JavaScript to the IG region > Attributes > JavaScript Initialization Code. This will resize the column as needed:

function(config) {
  config.defaultGridViewOptions = {
    rowHeaderWidth: 100
  };

  return config;
}

Oracle Apex font on a row selector

1 Answers