How to Identify GridView EmptyDataTemplate in JavaScript using ASP.NET. (OR) How to calculate GridView EmptyDataTemplate Textbox values in JavaScript using ASP.NET

In this article I will explain how to Identify GridView EmptyDataTemplate in JavaScript using ASP.NET.

(OR)

How to calculate GridView EmptyDataTemplate Textbox values in JavaScript using ASP.NET

I have created GridView with Empty data template. I want to calculate data dynamically at the data entry time. If the end user enter the Quantity, Rate, TaxAmt after automatically calculate and update the Amount column.

Below is the sample code for design of GridView

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" ShowFooter="true"  Width="100%" >

                                              

              <EmptyDataTemplate>

                                                    <table border="1">

                                                        <tr>                                                           

                                                            <td>Quantity

                                                            </td>

                                                            <td>Rate

                                                           </td>

                                                            <td>TaxAmt

                                                            </td>

                                                            <td>Amount

                                                            </td>

                                                        </tr>

                                                        <tr>

                                                               

                                                            <td Width="10%">

                                                                <asp:TextBox runat="server" ID="txtQuantityEDT" Width="90%" onblur="ValidateGridEmptyTemp();" ></asp:TextBox>

                                                            </td>

                                                            <td Width="10%">

                                                                <asp:TextBox runat="server" ID="txtRateEDT" Width="90%"  onblur="ValidateGridEmptyTemp();"></asp:TextBox>

                                                            </td>

                                                            <td Width="10%">

                                                                <asp:TextBox runat="server" ID="txtTaxAmtEDT" Width="90%" onblur="ValidateGridEmptyTemp();"></asp:TextBox>

                                                            </td>

                                                            <td Width="10%">

                                                                <asp:TextBox runat="server" ID="txtAmountEDT" Width="90%" onblur="ValidateGridEmptyTemp();"></asp:TextBox>

                                                                

                                                            </td>

                                                        </tr>

                                                    </table>

                     </EmptyDataTemplate>

  </asp:GridView>

Below is the JavaScript code for Dynamic empty data template calculation.

function ValidateGridEmptyTemp() {

            var txtName = document.getElementById('<%=((TextBox)GridView1.Controls[0].Controls[0].FindControl("txtQuantityEDT")).ClientID %>');

            var Quantity = document.getElementById('<%=((TextBox)GridView1.Controls[0].Controls[0].FindControl("txtRateEDT")).ClientID %>');

            var Bill = document.getElementById('<%=((TextBox)GridView1.Controls[0].Controls[0].FindControl("txtTaxAmtEDT")).ClientID %>');

            var Final = Number(txtName.value * Quantity.value) + Number(Bill.value);

            document.getElementById('<%=((TextBox)GridView1.Controls[0].Controls[0].FindControl("txtTaxAmtEDT")).ClientID %>').value = Final;

        }