Change the Column Width of a POPUP LOV Item In Oracle APEX

Why should I change the Column Width of a Popup LOV when I have an option to stretch it to view the whole content?

Let me explain this with a use case:

Customer: I want to display a three columns in my Popup LOV and the first column must be fully visible.

Akil: There is an option to stretch the column to view its whole content.

Customer: No, I want it to be displayed fully. I don't want to stretch the column manually.

Akil: Ok, I can make this possible!

Let's Start....

1) Create an Item in the page (In this example: P16_EMP_NAME).

2) Create the list of values that will display the multiple columns in the Popup LOV. I created four columns in my Popup LOV. Refer below screenshot.

• To know how to display multiple columns in a Popup LOV, see Karkuvel Raja's Post 

3) Paste the below JavaScript code in the JavaScript Initialization Code section of the Popup LOV item (P16_EMP_NAME).

function(options) {
    var col, columns = options.columns;    
    col = columns.NAME; //if your column name has space (example: Employee Name) then, col = columns['Employee Name'];
    col.width = 300;
    col.noStretch = true;
    
    return options;
}

• In the above code NAME is the Column Name of one of the columns in the Popup LOV. 
• NAME is the column for which I have to change the width (Marked with red box in the screenshot in step 2).

What is noStretch in the  above JavaScript code:-

• If false, the default, columns will stretch to fill available width. 
• If true the column width will not stretch to fill available space as the grid resizes. 
• In either case the user can still adjust the width. 
• This stretching only applies if the total width of all columns is less than the width of the grid.

Important Note: 

• If the width of the column is changed by the user by dragging it. 
• The width that has been changed will remain for the the whole session. 
• If the LOV is closed and opened again (or) when the page is loaded, the width mentioned in the code won't be set,  instead the width set by the user (by dragging the column) will be set. 
• This is because the changed width is stored in the Application's Session Storage. This is the default functionality provided by APEX.

BUT..... I wanted the Column width to be set when the page is loaded every time.

So this is what I did.....

1) Right Click on the page -> Click on Inspect -> Application -> Session Storage

2) Open the Popup LOV and change the width of the column that you have set(In this example: NAME) by dragging it.

3) You can see a new session storage item being set. Copy the Key Name (In this example: PopupLov_16_P16_EMP_NAME.91177.16.state)

 

4) Paste the below code in the Function and Global Variable Declaration section.

function setLovSessionValue() { 
    let x = sessionStorage.getItem("PopupLov_16_P16_EMP_NAME.91177.16.state");

     if(x) {
         let y = JSON.parse(x);
         y.columnWidths.NAME = 300;//if your column name has space (example: Employee Name) then, y.columnWidths['Employee Name'] = 300;
         sessionStorage.setItem("PopupLov_16_P16_EMP_NAME.91177.16.state",JSON.stringify(y));
     }
}

• In the above code, replace PopupLov_16_P16_EMP_NAME.91177.16.state with the key name that you have copied.

5) Call the above JavaScript function in the Execute When Page Load section.

Its done :)

If you know know to change the width of the column, each time the Popup is closed and opened, ideas are welcome!!!

References: JSON.parse() , JSON.stringify , sessionStorage.getItem() , sessionStorage.setItem()

Click here for DEMO

Happy CODING!!!

Thank you :)