CODEWITHSUNDEEP
oracle-apexoracle-apex-5.1
Yash Sharma
Yash Sharma

Reputation: 374

Length of text in Column Headings in Interactive Grid

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:

enter image description here

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

Upvotes: 0

Views: 1528

Answers (2)

Dan McGhan
Dan McGhan

Reputation: 4659

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;

Upvotes: 1

Mónica Godoy
Mónica Godoy

Reputation: 381

There are two ways to define the width of the columns:

  1. Automatically. Depending on the number of columns in your IG, it will define the width column.
    1. By setting. You can go to Actions -> Columns and define the Minimum Column Width (Pixel) for every column.

Can you please set the width of the column and let me know if that works for you?

Upvotes: 0

Related Questions