Length of text in Column Headings in Interactive Grid

Question

I require column headings to be as wide as text length in an Interactive Grid. In my report, which columns will get displayed depend on what user will choose in a select list using server-side conditions.

Is there any way to implement that?

Screenshot:

What Columns need to be displayed depend on the value chosen by the user through DQ Audit Select List.

Dan McGhan Dan McGhan · Accepted Answer · 2020-05-15T18:41:46

This isn't trivial, but the following should work for you...

First, add the following function to the page's Function and Global Variable Declaration property:

function resizeIGColumns(gridView) {
  var addWidth = 20;
  var addWidthSort = 2;

  gridView.view$.grid('getColumns').forEach(function(column) {
    if (column.hidden || column.property === 'APEX$ROW_ACTION') {
      return true;
    }

    var headerSpan$ = $('#' + column.domId);
    var headerSort$ = headerSpan$.next('.a-GV-header-sort');\
    var width = headerSpan$.width() + addWidth;

    if (headerSort$.length) {
      width += headerSort$.width() + addWidthSort;
    }

    gridView.view$.grid('setColumnWidth', column.property, width);
  });
}

Next, add the following code to the page's Execute when Page Loads attribute:

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

widgetInst.refresh = function() {
  orgRefresh.call(widgetInst);
  resizeIGColumns(gridView);
};

widgetInst.refresh();

This code is redefining the refresh function of the grid widget so that it invokes an additional resizeIGColumns function.

Older versions of APEX

After meeting with Abhinav online, we found that the following lines needed to be changed in APEX 5.

In resizeIGColumns, this line:

var headerSpan$ = $('#' + column.domId);

Should be changed to this:

var headerSpan$ = $('#' + column.elementId + '_HDR');

And in the Execute When Page Loads code, this line:

var gridView = apex.region('emp-reg').call('getViews').grid;

Should be changed to this:

var gridView = apex.region('emp-reg').widget().interactiveGrid('getViews').grid;

Length of text in Column Headings in Interactive Grid

2 Answers