Customize the Column Heading Menu (Interactive Grid #8)

 

Here we go with tip no.8!

#8 Customize the Column Heading Menu

The Interactive Grid is very popular in development, but not all the features that the IG brings are always necessary and can overwhelm the user. Therefore it is sometimes welcome to reduce some functions of the IG. In this post we will show you a few examples how to customize the "Column Heading Menu".

First, we will disable all header activation for a specific column. So when you click on the header no menu open anymore. The implementation is quite simple. A JavaScript function has to be added to each column where no menu is to be displayed. To do this, click on the specific column in the APEX Builder and enter the following JavaScript initialization code:

function(options) { 

    options.defaultGridColumnOptions = { 

       noHeaderActivate: true 

     } 

     return options; 

   }

If this function is to be used for several columns, it is recommended to create a global function and call it for each column ;-)

In the APEX Builder, you can deactivate or activate options without having to write additional code. At the moment there are three options -> Hide, Control Break/Aggregate and Sort. However, if you only want to deactivate aggregate and display Control Break, for example, additional development is required. To do this, we do the same as in the first case and add a JavaScript code to the column again, which is as the following:

function(options) {

    options.features = options.features || {};

    options.features.aggregate = false;

    return options;

}

If all columns are to be affected, we can run the function in a loop for each column. In this case, however, the JavaScript function must be added to the Interactive Grid, not to the column. Click Attributes on the IG and enter the following JS code in the JavaScript initialization code:

function(options) { 

    options.columns.forEach(col => { 

       col.features = col.features || {};

       col.features.aggregate = false;       

     }) 

     return options; 

}

The next and final example shows how to hide all (or just the required) options for all columns in one JavaScript function. First we give the Interactive Grid a Static-Id, for example "my_ig". Then we add the following "Execute when Page Load" JavaScript Function:

$("#my_ig").on("gridactivatecolumnheader", function(e){

    setTimeout(function() {

        $("#my_ig_ig_column_header_menu").find("[data-option='freeze']").remove();

        $("#my_ig_ig_column_header_menu").find("[data-option='hide']").remove();

        $("#my_ig_ig_column_header_menu").find("[data-option='aggregate']").remove();

        $("#my_ig_ig_column_header_menu").find("[data-option='break']").remove();

    },1);

});

Nothing more to do :-)

We hope the tips and tricks will help you. 

If you have questions or suggestions, please leave us a comment ;-)

And here is the demo app.

References:
https://docs.oracle.com/en/database/oracle/application-express/20.2/aexjs/grid.html#columns