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!
What happens if you use next code in Page - Function and Global Variable Declaration:
(function($){
$(apex.gPageContext$).on("apexreadyend", function(jQueryEvent) {
$('#IG_STATIC_ID_ig_toolbar').find('.a-Toolbar-group').last().addClass('a-IRR-buttons');
apex.theme42.page.init();
});
})(apex.jQuery);
IG_STATIC_ID to be replaced
your code in "Initialization JavaScript Function" to be disabled
'show maximize button' to be checked on the template options:
Template needs to be 'Interactive Report'
Idea is when it finds the last toolbar group, it adds the 'a-IRR-buttons' class as to mark that toolbar group as a placeholder:
Then the UT init should add the maximize button and attach all needed logic
Maximized:
The relevant UT code is in theme42.js, maximize function.
injectButtonSelector:
adding of the maximize button:
Demo: https://apex.oracle.com/pls/apex/r/yola/demo/igmaximizebutton