Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

Interactive Grid remove column freeze for mobile

tfaJan 11 2021

Using apex 20.2.
My application has interactive grid page where I've applied a freeze to the two left most columns so that users can keep those columns showing when scrolling to the right for the other columns.
Problem is that when mobile users access the application on the smaller mobile screens it's not possible to right scroll past the two frozen columns to see the many other columns. How is it possible to conditionally unfreeze the two left most columns when using mobile. Or even detect when a user is using mobile device. Thoughts?
Thanks,
TFA

This post has been answered by hari-Oracle on Jan 11 2021
Jump to Answer

Comments

hari-Oracle
Answer

Hi TFA,
In this particular case, it does not matter whether user is using mobile or laptop or monitor. The issue you are facing is because of window width. You can get window width using jQuery $(window).width()
You can use blow code to unfreeze a column using JavaScript

// IG Static ID emp
// ENAME is column name that has to be freezed, unfreezed conditionally
var grid$ = apex.region("emp").call("getCurrentView").view$;
grid$.grid("unfreezeColumn", "ENAME");

You can use these two techniques to achieve what you are looking far..
Create dynamic action which fires on page load event, create true action which executes JavaScript code. Put below JS code in true action

// IG Static ID emp
// ENAME is column name that has to be freezed, unfreezed conditionally
var grid$ = apex.region("emp").call("getCurrentView").view$;
// here I am unfreezing column when window width is < 600 pixels
// change it based on your requirements
if ($(window).width() < 600) {     
  grid$.grid("unfreezeColumn", "ENAME");
}
else {
  grid$.grid("freezeColumn", "ENAME");
}

In addition, you can also execute this when on window resize event or using APEX event apexwindowresized 
Regards,
Srihari

Marked as Answer by tfa · Jan 11 2021
tfa

Srihari,
Thank you very much! Your solution works great. I've implemented dynamic actions for both the on page load and on resize events. Thanks for your expertise and solution it'll work really well for the application.
Thanks!
TFA

1 - 2

Post Details

Added on Jan 11 2021
2 comments
294 views