Interactive Grid - Freeze/Unfreeze Columns Using JavaScript

In Oracle APEX forums, there was a question about "how to conditionally unfreeze interactive grid columns based on the screen size". I had bookmarked this question on my blog notes. Because, this is a good candidate for blogpost as it's a common use case and it may be helpful for other developers. 

Photo by Aaron Burden on Unsplash

So, I have started building demo for this blogpost. Then, I found that freezing, unfreezing columns based on column name may not be the best solution, because whenever we change column order, then we need to change JavaScript code as-well. With further research (reading documentation thoroughly 😊), I found out that we can also pass column definition object while using freezeColumn and unfreezeColumn methods. This solves the problem with column names. 

And then I did a little google search and found another similar question in APEX forums where John Snyders has provided a solution. This solution looks little different. Here, column property frozen is updated directly. Then I went back to documentation and found that freezeColumn/unfreezeColumn methods trigger the grid refresh as-well along with updating the column property. So, when we are freezing, unfreezing multiple columns, it is better to update the frozen property value first and at the end we can refresh the grid (only once).

Based on this, I have written a JavaScript function which freezes, unfreezes interactive grid columns based on screen size (window/viewport width). Here I am freezing up to first 4 columns based on screen size. If screen size is more than 1200 pixels, then I am freezing first 4 columns and if screen size is less than 600 pixels, then I am freezing only 1st column. When screen size is in between 600 and 1200 pixels, I am freezing 2 or 3 columns. I have used this logic for demo purpose and of course you can change it based on your requirements.

JavaScript function code:

function freezeUnfreezeIG(pIGStaticID) {
    apex.debug.info("BEGIN freezeUnfreezeIG");
    var grid$ = apex.region(pIGStaticID).call("getCurrentView").view$;
    apex.debug.info(grid$);
    // get column objects array
    var columnsArr = grid$.grid("getColumns");
    // get window width
    var winWidth = $(window).width();
    //apex.debug.info(`Window Width ${winWidth}`);
    // Unfeeze first 4 columns, ignoring hidden columns
    var i, counter = 0;
    for (i = 0; i < columnsArr.length; i++) {
        if (!columnsArr[i].hidden) {
            apex.debug.info(columnsArr[i]);
            columnsArr[i].frozen = false;
            //grid$.grid("unfreezeColumn", columnsArr[i]);
            counter++;
        }
        if (counter === 4) break;
    }
    var maxFrezee = 0;
    // determine number of columns to freeze based on window width
    if (winWidth <= 600) {
        maxFrezee = 1;
    }
    else if (winWidth > 600 && winWidth <= 900) {
        maxFrezee = 2;
    }
    else if (winWidth > 900 && winWidth <= 1200) {
        maxFrezee = 3;
    }
    else {
        maxFrezee = 4;
    }
    // freeze columns
    counter = 0;
    for (i = 0; i < columnsArr.length; i++) {
        if (!columnsArr[i].hidden) {
            columnsArr[i].frozen = true;
            //grid$.grid("freezeColumn",columnsArr[i]);
            counter++;
        }
        if (counter === maxFrezee) break;
    }
    grid$.grid("refreshColumns").grid("refresh");
    apex.debug.info("END freezeUnfreezeIG");
}

Demo:

For demo purpose, let's create a page with editable interactive grid on EMP table and give Static ID as emp.

Next, keep above JavaScript function code in Page > JavaScript > Function and Global Variable Declaration section.

Next, create dynamic action as below.

• Name: Freeze/UnFreeze IG Columns (or any proper name)
• When:
• Event: Custom
• Custom Event: apexwindowresized
• Selection Type: JavaScript Expression
• JavaScript Expression: window
• True Action: Execute JavaScript Code
• Code: freezeUnfreezeIG("emp");
• Execution Options: 
• Fire on Initialization: Yes (Enable)

Here, please observe, this dynamic action is fired when window is resized, as-well as when page is initially loaded. Executing this dynamic action on window resize will be helpful in several cases, for e.g. consider users with laptop and external monitor set-up. If users move your application window from external monitor to laptop, then you may want to unfreeze some of the columns as laptop screen width may be less compared to external monitor. 

That's it and here is the link for demo.

Thank you.