Estoy desarrollando una aplicación web que consiste en Datagrid anidada con otra datagrid. En la cuadrícula principal, tengo una casilla de verificación en la plantilla del encabezado y en la cuadrícula secundaria tengo otra casilla de verificación en la plantilla del elemento.

La funcionalidad es: 1.Si hago clic en la casilla de verificación principal, todos los elementos de la cuadrícula secundaria deben verificarse y viceversa. 2. Tengo una columna de cantidad en la cuadrícula secundaria, necesito que la suma de la cantidad de la fila marcada se muestre en el cuadro de texto.

Para EG: en mi cuadrícula secundaria tengo 3 columnas con el valor del campo de cantidad como 100,200,300. Si hago clic en Chkheader (encabezado de cuadrícula principal), se seleccionará toda la cuadrícula secundaria y en el cuadro de cuadro de texto se mostrará como (100 + 200 + 300) 600. Si desmarco manualmente la última fila de la cuadrícula secundaria, en el cuadro de texto debería aparecer como (100 + 200) 300.

Aquí está mi código:

<asp:DataGrid ID="dgcostOrigin" runat="server" BorderWidth="1px" BorderColor="#FE9B00">
 <Columns>
    <asp:TemplateColumn>
        <HeaderTemplate>                                                                        
        <asp:CheckBox ID="chkHeader" runat="server" />
        </HeaderTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn>
    <ItemTemplate>
        <asp:PlaceHolder ID="VoucherDetailsChargeId" runat="server" Visible="False">
            <asp:DataGrid ID="dg_VoucherChargeDetails" runat="server" DataSource='<%#GetCFSDetailsO( (String) DataBinder.Eval(Container.DataItem,           "Name") ) %>'>
            <Columns>
                <asp:BoundColumn DataField="ID" HeaderText="mFRL_NUPKId" Visible="False"></asp:BoundColumn>
                <asp:TemplateColumn>
                    <HeaderStyle Width="5%"></HeaderStyle>
                    <ItemTemplate>
                    <asp:CheckBox ID="CHKJobsOrigin" runat="server" >
                    </asp:CheckBox> 
                    </ItemTemplate>   
                </asp:TemplateColumn>
            </Columns>
            </asp:DataGrid> 
        </asp:PlaceHolder>
      </ItemTemplate>
      </asp:TemplateColumn>
  </Columns>
</asp:DataGrid>

aquí está mi Javascript para calcular el total ()

function CalculateTotalOriginCost(mcheckbox2) {
          var txtAmtOrg = mcheckbox2.id.replace("CHKJobsOrigin", "TXTCostOriginAmount");

            var AmountO = +(document.getElementById(txtAmtOrg).value + 0);

            var TotalAmountO = +(document.getElementById("TxtOriginCost").value + 0);

            if (mcheckbox2.checked == true) {
                TotalAmountO = TotalAmountO + AmountO;
            }
            else {
                TotalAmountO = TotalAmountO - AmountO;
            }
            document.getElementById("TxtOriginCost").value = TotalAmountO.toFixed(3);
            CalcYield();

         }

y aquí está para seleccionar y deseleccionar

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $("[id*=chkHeader]").live("click", function () {
        var chkHeader = $(this);
        var grid = $(this).closest("table");
        $("input[type=checkbox]", grid).each(function () {
            if (chkHeader.is(":checked")) {
                $(this).attr("checked", "checked");
                $("td", $(this).closest("tr")).addClass("selected");
            } else {
                $(this).removeAttr("checked");
                $("td", $(this).closest("tr")).removeClass("selected");
            }
        });
    });
    $("[id*=CHKJobsOrigin]").live("click", function () {
        var grid = $(this).closest("table");
        var chkHeader = $("[id*=chkHeader]", grid);
        if (!$(this).is(":checked")) {
            $("td", $(this).closest("tr")).removeClass("selected");
            chkHeader.removeAttr("checked");
        } else {
            $("td", $(this).closest("tr")).addClass("selected");
            if ($("[id*=CHKJobsOrigin]", grid).length == $("[id*=CHKJobsOrigin]:checked", grid).length) {
                chkHeader.attr("checked", "checked");
           var chkChild = $("[id*=CHKJobsOrigin]", grid);     
                 CalculateTotalOriginCost(chkChild); 
            }
        }

    });
</script>

seleccionar todo y cancelar la selección de todo funciona bien, pero no puedo mostrar el total en el cuadro de texto. sin la función select all si uso get total, estaba funcionando. Cómo combinar ambas funciones. ¿Alguien puede ayudarme a resolver este problema? Necesito la funcion javascript