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.
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.
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.
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.
Click here for DEMO
Happy CODING!!!
Thank you :)
ocexQsaina-West Valley City Alan Malala https://wakelet.com/wake/CYuk_UN-fp9FXkRwa3vY-
ReplyDeletetitencontrich