Step 1 :
=====
At first you create normal Master-Details Page.
Step 2 :
=====
Go to Interactive grid Region.
-- Set STATIC ID for column. (QTY,SALE_PRICE,AMOUNT)
1. QTY ---> C_QTY
2. SALE_PRICE ---> C_PRICE
3. AMOUNT ---> C_TOTAL
-- Go to Page load and create DYNAMIC ACTION.
Action name : DA FOR TOTAL
Event : Change
Selection Type : Column(s)
Interactive Grid / Region : (Select your region name)
Column(s) : QTY,SALE_PRICE
-- True Action : Execute JavaScript Code
Code :
var qty = ($v("C_QTY") != "")?parseFloat($v("C_QTY")):0;
var price = ($v("C_PRICE") != "")?parseFloat($v("C_PRICE")):0;
var tot = 0;
if(!isNaN(qty) && !isNaN(price)){
tot = qty*price;
}
$s("C_TOTAL", tot);
Step 3 :
=====
Grand Total for QTY & AMOUNT
====================
--> Create New Region
Region name : RCV GRAND TOTAL
--> create new tow items
1. TOTAL_QTY --> type : Number
2. GRAND_TOTAL --> type : Number
--> Select Interactive Grid Region and set
Static ID --> rcv_dtl
--> Go to Page load and create DYNAMIC ACTION.
Action name : DA FOR GRAND TOTAL
Event : Lose Focus
Selection Type : Column(s)
Interactive Grid / Region : (select your Interactive Grid region name)
Column(s) : QTY,SALE_PRICE
--> True Action : Execute JavaScript Code
Code :
var model = apex.region("rcv_dtl").widget().interactiveGrid("getViews", "grid").model;
var qtyKey = model.getFieldKey("QTY"); // table column_name//
var totKey = model.getFieldKey("AMOUNT"); // table column_name//
var totQty = 0;
var totAmt = 0;
model.forEach(function(r) {
var qty = parseFloat(r[qtyKey], 10);
var tot = parseFloat(r[totKey], 10);
if (!isNaN(qty)) {
totQty += qty;
}
if (!isNaN(tot)) {
totAmt += tot;
}
});
$s('P97_TOTAL_QTY',totQty);
$s('P97_GRAND_TOTAL',totAmt);
--> Go to Page load and create DYNAMIC ACTION.
Action name : DA FOR GRAND TOTAL GET FOCUS
Event : Get Focus
Selection Type : Column(s)
Interactive Grid / Region : (select your Interactive Grid region name)
Column(s) : QTY,SALE_PRICE
--> True Action : Execute JavaScript Code
Code :
copy and paste the above code
Step 4 :
=====
Apply change এ গেলে যেন মাস্টারের ID অনুযায়ী IG এর total Show করে। এর জন্য নিচের Dynamic action দিবো।
--> Create Page Load Dynamic Action
Action name : DA FOR GRAND TOTAL when page load
Action : Execute JavaScript Code
CODE :
if ($v('P97_ID') != "")
{
var model = apex.region("rcv_dtl").widget().interactiveGrid("getViews", "grid").model;
var qtyKey = model.getFieldKey("QTY"); // column_name//
var totKey = model.getFieldKey("AMOUNT"); // column_name//
var totQty = 0;
var totAmt = 0;
model.forEach(function(r) {
var qty = parseFloat(r[qtyKey], 10);
var tot = parseFloat(r[totKey], 10);
if (!isNaN(qty)) {
totQty += qty;
}
if (!isNaN(tot)) {
totAmt += tot;
}
});
$s('P97_TOTAL_QTY',totQty);
$s('P97_GRAND_TOTAL',totAmt);
}
Step 5 :
=====
Create new region.
type : Static Content
HTML CODE :
========
<div style="margin:0;padding:0">
<table class="tbl_grand_total">
<tbody>
<tr>
<td style="text-align:left;padding-left:5em">Grand Total:</td>
<td style="width:10em" id="tot_qty"></td>
<td style="width:10em"></td>
<td style="width: 7em"></td>
<td style="width:10em" id="grand_total"></td>
</tr>
</tbody>
</table>
</div>
INLINE CSS
========
.tbl_grand_total {
border-collapse:collapse; width:100%
}
.tbl_grand_total, tr, td { border:1px solid #ddd; }
.tbl_grand_total td { padding:.5em; font-weight:bold; font-size: 1em;
}
.tbl_grand_total td { text-align:right;
}
----------------------------------------------------------------
--> Edit Lose Focus & Get Focus (Execute JavaScript Code)
// remove this
$s('P97_TOTAL_QTY',totQty);
$s('P97_GRAND_TOTAL',totAmt);
}
//
--->> And copy to paste
document.getElementById("tot_qty").innerHTML = totQty;
document.getElementById("grand_total").innerHTML = totAmt;
==============Different Style Total IG Show==============
Select Column (Salary) and
>Go To Column Initialization JavaScript Function :
function(options)
{
options.defaultGridColumnOptions = {aggregates: ["SUM"]};
return options;
}