Calculate Row Total and Grand Total in GridView using jQuery DataTable plugin in ASP.Net

Dear friends!

How to use datatables tools to build responsive gridview and caculate columns on it

I'm using datatables.net'tools to build responsive gridview, all everything display good on mobile, laptop. Now, I'm facing with problem is caculate of columns in gridview2.

I want when I change value of one in columns: Salary1 OR Salary2 (Salary12 will change instant) OR Salary12 OR Divide(3) OR Benefit (4) OR 'REMOVE ROW' OR 'add row' then Received=(1+2)/3+4 AND 'Total Received' will be changed instant.

I WANT ALL changed instant (as using jquery), 'Total Received' must be textbox outside gridview2.

Any body can helpme. this is my lasted code: 

<%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" UnobtrusiveValidationMode="None" EnableEventValidation="false"  AutoEventWireup="true" CodeBehind="CS.aspx.cs" Inherits="Quanlynhachothue.CS" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<asp:Content id="Content1" ContentPlaceHolderID="head" Runat="Server">     
     

</asp:Content> 

<asp:Content id="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">          

    <asp:UpdatePanel id="UpdatePanel1" runat="server"> 
    <ContentTemplate>
 
    <asp:GridView id="GridView1"  CssClass="dt-responsive" class="display" Width="100%"  runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#BED7F3" HeaderStyle-Height="30px" HeaderStyle-BorderStyle="None" HeaderStyle-ForeColor="#144383"  Font-Names="Arial" HeaderStyle-Font-Size="13px" >
    
    <Columns>
            <asp:BoundField DataField="Id" HeaderText="Customer Id" />
            <asp:BoundField DataField="Name" HeaderText="Customer Name" />
            <asp:BoundField DataField="Country" HeaderText="Country" />
        
          <asp:TemplateField HeaderText="Salary" >
                    <ItemTemplate>
                        <asp:textbox ID="txtSalary" Text='<%# Eval("Salary") %>'   Width="80px"  runat="server"></asp:textbox>
                    </ItemTemplate>
           </asp:TemplateField>
           
         <asp:BoundField DataField="Job" HeaderText="Job" />         
        
    </Columns>                       
    </asp:GridView> 

    <input type="hidden" runat="server" id="hidMaHDDV" />                       
                                   
    </div>                                                              
    <!-- End List -->
    
      
      <asp:Gridview id="GridView2" CssClass="dt-responsive" class="display" Width="100%"   runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#BED7F3" HeaderStyle-Height="30px" HeaderStyle-BorderStyle="None" HeaderStyle-ForeColor="#144383"  Font-Names="Arial" HeaderStyle-Font-Size="13px">
                  
            <Columns>                
            
                <asp:TemplateField HeaderText="Id" HeaderStyle-Width ="20px">
                    <ItemTemplate>
                        <asp:Label ID="txtId" Width="20px"  Text='<%# Eval("MyId") %>'  runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                                
                <asp:TemplateField HeaderText="Customer Name" >
                    <ItemTemplate>
                        <asp:textbox ID="txtName" Text='<%# Eval("MyName") %>' Width="150px"  runat="server"></asp:textbox>
                    </ItemTemplate>
                </asp:TemplateField>
                                
                 <asp:TemplateField HeaderText="CountryCode" Visible="false">
                    <ItemTemplate>
                        <asp:Label ID="txtCountryCode" Text='<%# Eval("CountryCode") %>'  runat="server" Visible="false"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>


                 <asp:TemplateField HeaderText="Country" >
                    <ItemTemplate>
                     <asp:textbox ID="txtCountry" Text='<%# Eval("MyCountry") %>' Width="100px"   runat="server" ></asp:textbox>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Salary1" >
                    <ItemTemplate>
                        <asp:textbox ID="txtSalary1" Text='<%# Eval("MySalary1") %>' Width="80px"  runat="server"></asp:textbox>
                    </ItemTemplate>
                </asp:TemplateField>

                  <asp:TemplateField HeaderText="Salary2" >
                    <ItemTemplate>
                        <asp:textbox ID="txtSalary2" Text='<%# Eval("MySalary2") %>'  Width="80px"  runat="server"></asp:textbox>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Salary=(1+2)" >
                    <ItemTemplate>
                        <asp:textbox ID="txtSalary12" Text='<%# Eval("MySalary12") %>' Width="80px"  runat="server"></asp:textbox>
                    </ItemTemplate>
                </asp:TemplateField>
                
                <asp:TemplateField HeaderText="Divide(3)" >
                    <ItemTemplate>
                         <asp:DropDownList ID="txtDivide"   runat="server" AppendDataBoundItems="true">
                        </asp:DropDownList>
                    </ItemTemplate>
                </asp:TemplateField>
                
                 <asp:TemplateField HeaderText="Received=(1+2)/3+4" >
                    <ItemTemplate>
                        <asp:textbox ID="txtReceived" ReadOnly="true" Text='<%# Eval("MyReceived") %>'  Width="80px"  runat="server"></asp:textbox>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Remove" HeaderStyle-Width="50px" >
                    <ItemTemplate>
                        <asp:Button ID="bttRemoveRow" Width="100px" Text="Remove row" runat="server" onclick="bttRemoveRow_Click" Class="btn-primary"></asp:Button>
                    </ItemTemplate>
                </asp:TemplateField>
                                                        
            </Columns>
        </asp:Gridview>        
     
     <div align="right" >
     <asp:Button ID="ButtonAdd" runat="server"  Text="Add row" onclick="ButtonAdd_Click" Class="btn-primary" />
     </div>
     <br />
     <div align="right" >
     <label for="tungay">Total Received:
     <asp:TextBox ID="txtTotalReceived" ReadOnly="true" runat="server" />
     </label>
     </div>

    <asp:HiddenField ID="HiddenTab" runat="server" />

    </ContentTemplate>
    </asp:UpdatePanel>

     <!-- Panel  End-->              
     
<script type="text/javascript">

        function RememberValue() {        
            var table = $('#<%=GridView2.ClientID%>').DataTable({
                "paging": false,
                "ordering": true,
                "searching": false,
                "destroy": true,
                'columnDefs': [
                    {                        
                        //"defaultContent": "-",
                        'targets': [1, 2, 3, 4],
                        'render': function (data, type, row, meta) {
                            if (type === 'display') {
                                var api = new $.fn.dataTable.Api(meta.settings);

                                var $el = $('input, select, textarea', api.cell({ row: meta.row, column: meta.col }).node());

                                var $html = $(data).wrap('<div/>').parent();

                                if ($el.prop('tagName') === 'INPUT') {
                                    $('input', $html).attr('value', $el.val());
                                    if ($el.prop('checked')) {
                                        $('input', $html).attr('checked', 'checked');
                                    }
                                } else if ($el.prop('tagName') === 'TEXTAREA') {
                                    $('textarea', $html).html($el.val());

                                } else if ($el.prop('tagName') === 'SELECT') {
                                    $('option:selected', $html).removeAttr('selected');
                                    $('option', $html).filter(function () {
                                        return ($(this).attr('value') === $el.val());
                                    }).attr('selected', 'selected');
                                }

                                data = $html.html();
                            }

                            return data;
                        }
                    }

                ],
                'responsive': true
             });

            // Update original input/select on change in child row
            $('#<%=GridView2.ClientID%> tbody').on('keyup change', '.child input, .child select, .child textarea', function (e) {
            
                var $el = $(this);
                var rowIdx = $el.closest('ul').data('dtr-index');
                var colIdx = $el.closest('li').data('dtr-index');
                var cell = table.cell({ row: rowIdx, column: colIdx }).node();
                $('input, select, textarea', cell).val($el.val());
                if ($el.is(':checked')) {
                    $('input', cell).prop('checked', true);
                } else {
                    $('input', cell).removeProp('checked');
                }
            });
        };  

        function gridView1DataTable() {
            var table = $('#<%=GridView1.ClientID%>').DataTable({ "destroy": true, "paging": false, "ordering": false, "searching": false, 'responsive': true, "AutoWidth": false });
            
        }
    </script>    
    
</asp:Content>