Overview
Interactive Grid (IG) allows a great deal of customization to its toolbar and menus. The toolbar is implemented by a new toolbar widget. Like most widgets, the toolbar is configured with an options object given to it when it is created.
A toolbar contains an array of control groups and each control group contains an array of controls. Controls can be buttons, toggle buttons, menus, radio groups, select lists, text fields, or static text.
Here we are going to see about adding the Total Salary(Aggregate Function) Option in the Selection Actions menus of the Interactive Grid.
Technologies and Tools Used
The following technology has been used to achieve the expected output.
Ø JavaScript
Use Case
In oracle apex, the Interactive Grid toolbar will have the default options for duplicate rows, delete rows, Refresh rows,..etc.We are going to add the customized option to the Selection Actions menus of the Interactive Grid as “Total Salary”(Aggregate Function).“Total Salary”(Aggregate Function) will sum the salary based on the selected rows in the interactive grid. We can change the Aggregate Function based on the business requirement.
Option Total Salary(Aggregate Function) not available in the Selection Actions menus of the Interactive Grid. To achieve the Aggregate Function in the Interactive we need to go to the Actions. From Action, we need to select Data and from Data we have the option to achieve Aggregate Function. This also will only provide the option to do the total Aggregate. The below will show how to add the Total Salary(Aggregate Function) Option in the Selection Actions menus of the Interactive Grid. Based on the selection we can do the Aggregate Function using this.
This document explains how to achieve this requirement.
Architecture
The following steps explain in detail,
Step 1:
We need to add the static Id to the report region.
Step 2:
Function and Global Variable Declaration in the page level option of JavaScript. We need to add the below JavaScript code.” SALARY” in the below code is the column name which we want to do the Aggregate Function. This also will display the output of the Aggregate Function in the Alert message.
// do this after the page loads but before the IG is initialized to catch the initial events
$(function() {
// listen for view change events to find out when grid views are created
$(“#emp”).on(“interactivegridviewchange”, function(event, data) {
if ( data.view === “grid” && data.created ) {
var view = apex.region(“emp”).widget().interactiveGrid(“getViews”, “grid”),
menu$ = view.selActionMenu$;
menu$.menu(“option”).items.push({
type:”action”,
label:”Total Salary”,
action: function(menu, element) {
var i, records = view.getSelectedRecords(),
total = 0;
for ( i = 0; i < records.length; i++) {
total += parseInt(view.model.getValue(records[i], “SALARY”), 10);
}
alert(“Total Salary is ” + total);
}
});
}
});
});
ScreenShot
Output:
By using the above steps we can add the Total Salary(Aggregate Function) Option in the Selection Actions menus of the Interactive Grid.
Link to previous Post: http://blogs.doyensys.com/interactive-grid-toolbar-customization-part-1/
