Calculating gridview field total and displaying in footer text box using javascript

Question

I am struglling a lot to find out the total of gridview cells and displaying the values Footer textbox. Every time I am getting the exception: Pls help me somebody whats wrong I am doing:

This is the exception: Microsoft JScript runtime error: Object expected * Here is my gridview code: *

 <div>
 <asp:gridview ID="Gridview1" runat="server" ShowFooter="true" 
        onrowcommand="Gridview1_RowCommand"  AutoGenerateColumns="false" 
        CellSpacing="0" CellPadding="0" Font-Bold="false" 
        onrowdeleting="Gridview1_RowDeleting">
    <Columns>
  <asp:BoundField DataField="RowNumber" HeaderText="Row Number"/>
  <asp:TemplateField HeaderText="Select" ControlStyle-Width="50px" HeaderStyle-Font-Bold="false" ControlStyle-Font-Bold="false">
 <ItemTemplate>
     <asp:CheckBox ID="chkSelect" runat="server" Width="80px"/>
 </ItemTemplate>     
 </asp:TemplateField>
    <asp:TemplateField HeaderText="Header 1" HeaderStyle-Font-Bold="false"  ControlStyle-Font-Bold="false">
        <ItemTemplate>
            <asp:TextBox ID="TextBox1" runat="server" Width="70px"></asp:TextBox>
        </ItemTemplate>            
        <FooterTemplate>
            <asp:Label ID="lblTotal" runat="server" Text="Total" Font-Bold="true">       </asp:Label>
        </FooterTemplate>            
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Header 2"  HeaderStyle-Font-Bold="false" ControlStyle-Font-Bold="false">
        <ItemTemplate>
            <asp:TextBox ID="TextBox2" Width="70px" runat="server" onkeyup="Calculate('Gridview1')"></asp:TextBox>
        </ItemTemplate>            
        <FooterTemplate>
            <asp:TextBox ID="total" runat="server" Width="70px"></asp:TextBox>
        </FooterTemplate>            
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Header 3" HeaderStyle-Font-Bold="false" ControlStyle-Font-Bold="false">
        <ItemTemplate>
             <asp:TextBox ID="TextBox3" Width="70px" runat="server" ></asp:TextBox>
        </ItemTemplate>
        <FooterStyle HorizontalAlign="Right" />
        <FooterTemplate>
         <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row" CommandName="AddNewRow" />
        </FooterTemplate>
    </asp:TemplateField>
    </Columns>
  </asp:gridview>   
  </div>

Here is my JavaScript code:

   <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js"></script>  
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script> 
<script type="text/javascript">  
function Calculate(GridView)
{
   var total = 0;   
   var gridview = document.getElementById('<%=Gridview1.ClientID %>').getElementsByTagName("input");        
   for ( i = 0; i < gridview.rows.length; i ++)
   {
       var node = gridview.rows[i].cells[3].childNodes[3]; //textbox  

       if (node != undefined && node.type == "text") //check only textbox, ignore empty one
            if (!isNaN(node.value) && node.value != "") //check for valid number
               total += parseInt(node.value); 
   }       
  // document.getElementById("total").innerHTML = total.toString(); //display
   var gridview1 = document.getElementById('<%=grdview1.ClientID %>');
   gridview1.rows[gridview.rows.length -1].cells[0].innerHTML=total;

}

I had tried with many ways but every time getting the same exception: Microsoft JScript runtime error: Object expected

It seems something wrong with my JavaScript code..pls somebody and help me out.

Answer 1

Your function doesn't need to take in an object since you are not using it in your javascript, the way you are passing the GridView I don't believe would work anyway.

I think your javascript would be cleaner and easier to follow as well if you took advantage of some of the jQuery selectors to find the elements in the DOM you need. You could use a special class for the text boxes you want to total, something like:

....
<asp:TemplateField HeaderText="Header 1" HeaderStyle-Font-Bold="false"  ControlStyle-Font-Bold="false">
    <ItemTemplate>
        <asp:TextBox ID="TextBox1" Class="TotalBox" runat="server" Width="70px"></asp:TextBox>
    </ItemTemplate>            
    <FooterTemplate>
        <asp:Label ID="lblTotal" Class="TotalLabel" runat="server" Text="Total" Font-Bold="true">       </asp:Label>
    </FooterTemplate>            
</asp:TemplateField>
....

Javacript

<script type="text/javascript">
function Calcutate()
{
     var total = 0;
     $('.TotalBox').each(function() {
         total = parseInt(this.val()) + total;
     });

     $('.TotalLabel').html(total);
}
</script>