Sub Grid Total In Crm

I have a primary Entity (Self-Insurance) and a secondary entity (Compensation). They have a 1:N relationship. So in my main form of Self Insurance I have a sub-grid with the name 'Worker_Compensation' where i am adding up some payroll values. I have 2 questions. . .

1: The thing I want is that when I add some values in the sub-grid. I need to show a sum of all payrolls in the text below of my main form named as 'TOTAL'.

2: Where should i call this java script(On which event) Onload or Onsave of form ? or else where because I can seems to locate the events on Subgrid.

I am using a java script for this purpose.

enter code here
function setupGridRefresh() {
var targetgrid = document.getElementById("Worker_Compensation");

// If already loaded
if (targetgrid.readyState == 'complete') {
    targetgrid.attachEvent("onrefresh", subGridOnload);
}
else {
    targetgrid.onreadystatechange = function applyRefreshEvent() {
        var targetgrid = document.getElementById("Worker_Compensation");
        if (targetgrid.readyState == 'complete') {
            targetgrid.attachEvent("onrefresh", subGridOnload);
        }
    }
}
subGridOnload();
}

function subGridOnload() {
//debugger;
var grid = Xrm.Page.ui.controls.get('Worker_Compensation')._control;
var sum = 0.00;

if (grid.get_innerControl() == null) {
    setTimeout(subGridOnload, 1000);
    return;
}
else if (grid.get_innerControl()._element.innerText.search("Loading") != -1) {
    setTimeout(subGridOnload, 1000);
    return;
}

var ids = grid.get_innerControl().get_allRecordIds();
var cellValue;
for (i = 0; i < ids.length; i++) {
    if (grid.get_innerControl().getCellValue('new_estannualpayroll', ids[i]) != "") {
        cellValue = grid.get_innerControl().getCellValue('new_estannualpayroll', ids[i]);
        cellValue = cellValue.substring(2);
        cellValue = parseFloat(cellValue);
        sum = sum + cellValue;
    }

}

var currentSum = Xrm.Page.getAttribute('new_payrolltotal').getValue();
if (sum > 0 || (currentSum != sum && currentSum != null)) {
    Xrm.Page.getAttribute('new_payrolltotal').setValue(sum);
}
}

This piece of code is not working. after i add values in the grid my textbox remains empty! Thanks in advance

You can do it with subgrid's onRefresh. This is also unsupportted way but it works. You must add this functions to your javascript

function AddEventToGridRefresh(gridName, functionToCall) {
   // retrieve the subgrid
   var grid = document.getElementById(gridName);
   // if the subgrid still not available we try again after 1 second
   if (grid == null) {
       setTimeout(function () {AddEventToGridRefresh(gridName, functionToCall);}, 1000);
       return;
   }
   // add the function to the onRefresh event
   grid.control.add_onRefresh(functionToCall);
}
// function used in this example
function AdviseUser() {
   alert("Sub-Grid refreshed");
}

For more information, here is the link