Jquery Question posted in
The official Jquery Api Documentation can be found here.

Maximizing a region using jQuery

I have an interactive grid region in oracle apex that I want to be able to maximize via a toggle button located on the far right side of the toolbar. The customization of the toggle button itself has been relatively straightforward but I am struggling with how to implement the maximize function. I included the code I have so far that is located in the interactive grid’s "Initialization JavaScript Function" section.

function(config) {
    let $           = apex.jQuery,
    toolbarData     = $.apex.interactiveGrid.copyDefaultToolbar(),
    toolbarGroup    = toolbarData.toolbarFind("actions4");

    toolbarGroup.controls.push(
        {
            type: "TOGGLE",
            action: "maximize-region",
            icon: "fa fa-expand"
        }
    );

    config.initActions = function(actions){
        actions.add({
            name: "maximize-region",
            maximize: false,  
            set: function(maximize) {
                this.maximize = maximize;
                //jQuery to maximize the region would go here
            }, get: function() {
                return this.maximize;
            }
        });
    }

    config.toolbarData = toolbarData;
    return config;

}

Any help would be greatly appreciated!

Tags:

2

Answers


  1. 0

    Why wouldn’t you use built-in maximize button?

    • set region template to "Standard" (as far as I can tell, it has to be "Standard"; won’t work for e.g. "Interactive Report" template, which is default for interactive grids)
    • edit template options and check the "Show maximize button" checkbox
    • result is the maximize button (right-hand side of the screenshot)

    enter image description here

    Login or Signup to reply.
  2. 0

    You can try a few tricks, like this one:
    Page – Function and Global Variable Declaration:

    (function(){
    $(apex.gPageContext$).on("apexreadyend", function(jQueryEvent) {
        let tbGroup$ = $('#<IG Static ID>_ig_toolbar').find('.a-Toolbar-group').last();
        if (tbGroup$.length)
        {
            tbGroup$.addClass('a-IRR-buttons');
        }
        apex.theme42.page.init();
    });     
})();

    and checking ‘Show Maximize Button’ in the ‘Interactive Report’ template.
    But I think at the end of the day, maximizing an IG is simply not supported.
    Maximizing is a UT feature. Problem is, the IG is client-side generated, which happens after UT has initialized the page. Subsequently, the IG is also not providing a placeholder for the UT to generate the Maximize button.

    You can try by changing the template from ‘Interactive Report’ to ‘Standard’ and skipping above code. But most likely, you will see the IG not responding well to the resize events. And that is the second problem: upon resize, the IG should also reorganize itself as to accommodate the revised number of rows. I found it buggy there.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search