IG Hack - #4, Change the column width of Interactive Grid using JavaScript in Oracle APEX

This blog explains, how to change the column width of and Interactive Grid using JavaScript.

Follow the below steps to achieve this:

Example - 1: Set the Column Width for a single Column.

1) Put the below JavaScript Code in the Page -> JavaScript -> Execute When Page Loads section.

apex.region("EMP_IG").call("getViews").grid.view$.grid("setColumnWidth","EMPLOYEE_NAME",200);    

Note: 

• In the above code, the width of the Employee Name column is set to 200. 
• Replace EMPLOYEE_NAME with the name of your column that you want to set the width for.
• Replace EMP_IG with the Static ID of your Interactive Grid.

Example - 2: Set the Column Width for all Columns.

1)  Put the below JavaScript Code in the Page -> JavaScript -> Execute When Page Loads section.

var igView = apex.region("EMP_IG").call("getViews").grid.view$,
    colArray  = [];
    
colArray = igView.grid("getColumns");
for (i=0; i<colArray.length-1; i++){     
    igView.grid("setColumnWidth",colArray[i].property,500); 
}    

//(or) If the number of columns are more, the below code can be used for better performance
//This is because it re-renders the DOM only once.

let igView = apex.region("EMP_IG").call("getViews").grid.view$,
    colArray  = [];
colArray = igView.grid("getColumns");

for (let i=0; i < colArray.length-1; i++) {
    let col = colArray[i];
    col.width = 500;
}
igView.grid("refreshColumns").grid("refresh");

Note: 

• In the above code, the width of all the columns is set to 500. 
• Replace EMP_IG with the Static ID of your Interactive Grid.

BUT......

How to stop the Interactive Grid Columns from adjusting itself to the full width of the Interactive Grid and only consider the size that that has been configured.

To achieve this the noStretch property has to be applied to the Interactive Grid Columns.

Example - 3: Set the noStretch property for a single Column.

1) Put the below code in the JavaScript Initialization Code of the column that you want to set this property for.

function(config) {
    config.defaultGridColumnOptions = {
        noStretch: true
    };
    return config;
}   

Example - 4: Set the noStretch property for all the Columns.

1) Put the below code in the  Attributes -> JavaScript Initialization Code of the Interactive Grid.

function(config) {
    var o = config;
    "views.grid.features".split(".").forEach(function(p) { 
        if ( !o[p] ) {
            o[p] = {};
        }
        o = o[p];
    });
    o.stretchColumns = false;
    return config;
}  

Reference: https://hardlikesoftware.com/weblog/2017/01/06/interactive-grid-column-widths/

Click here for DEMO

Happy CODING!!!

Thank you :)