Display Columns wise Grand total on the "Interactive Grid"

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 :
========

<tbody>

<tr>

<td style="text-align:left;padding-left:5em">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;
}

Display Columns wise Grand total on the "Interactive Grid"

Post a Comment

Contact Form