In this article I will explain how to find, access, get value and validate TextBox and DropDownList controls in GridView row using JavaScript in ASP.Net.
This article will explain how to find and validate TextBox and DropDownList controls inside the ASP.Net GridView row using JavaScript when it is being edited.
 
 

HTML Markup

The HTML Markup consists of following controls:
GridView – For displaying data.

Columns

The GridView consists of three TemplateField columns.
The First TemplateField column consists of ItemTemplate and EditItemTemplate.
ItemTemplate – It consists of a eval function.
EditItemTemplate - It consists of a TextBox.
The Second TemplateField column consists of ItemTemplate and EditItemTemplate.
ItemTemplate – It is also consisting of a eval function.
EditItemTemplate - It consists of a DropDownList.
The Third TemplateField column consists of ItemTemplate and EditItemTemplate.
ItemTemplate - It consists of an Edit LinkButton.
EditItemTemplate - It consists of an Update, Cancel LinkButtons.
The Update LinkButton has an OnClientClick event handler which will call the JavaScript function to validate TextBox and DropDownList controls in GridView row.
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" OnRowEditing="OnRowEditing">
    <Columns>
        <asp:TemplateField HeaderText="Name" ItemStyle-Width="150">
            <ItemTemplate>
                <%# Eval("Name") %>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="txtName" runat="server" Text='<%# Eval("Name") %>' />
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Country" ItemStyle-Width="150">
            <ItemTemplate>
                <%# Eval("Country") %>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:DropDownList ID="ddlCountries" runat="server">
                    <asp:ListItem Text="Please select" Value="" />
                    <asp:ListItem Text="United States" Value="United States" />
                    <asp:ListItem Text="India" Value="India" />
                    <asp:ListItem Text="France" Value="France" />
                    <asp:ListItem Text="Russia" Value="Russia" />
                </asp:DropDownList>
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton Text="Edit" runat="server" CommandName="Edit" />
            </ItemTemplate>
            <EditItemTemplate>
                <asp:LinkButton Text="Update" runat="server" OnClick="OnUpdate" OnClientClick="return Validate(this)" />
                <asp:LinkButton Text="Cancel" runat="server" OnClick="OnCancel" />
            </EditItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
 
 

Populating, Editing and Updating GridView

I am using Temporary DataTable with ViewState for populating, editing and updating GridView.
Note: The complete code for populating, editing and updating the GridView is available in the attached sample code. You can also refer the following article for reference Using DataTable as Temporary storage table in ASP.Net.
 
 

Validating TextBox and DropDownList controls in GridView row using JavaScript

Here, JavaScript function is executed when the Update LinkButton is clicked. This function accepts the reference of the Update LinkButton.
Using the reference of the Update LinkButton, the current GridView Row is determined and all the controls present in the GridView Row are fetched.
Now a loop is executed over the fetched controls and the ID of each control is matched with the ID of the TextBox and the DropDownList control.
Once the TextBox and the DropDownList control are found, their values are validated and if the value of any one or both the controls is invalid then a JavaScript alert message box is displayed.
<script type="text/javascript">
    function Validate(lnkUpdate) {
        var txtName, ddlCountries;
 
        //Find the GridView Row using the LinkButton reference.
        var row = lnkUpdate.parentNode.parentNode;
 
        //Fetch all controls in GridView Row.
        var controls = row.getElementsByTagName("*");
 
        //Loop through the fetched controls.
        for (var i = 0; i <controls.length; i++) {
 
            //Find the TextBox control.
            if (controls[i].id.indexOf("txtName") != -1) {
                txtName = controls[i];
            }
 
            //Find the DropDownList control.
            if (controls[i].id.indexOf("ddlCountries") != -1) {
                ddlCountries = controls[i];
            }
        }
        var  message = "";
 
        //Validate the TextBox control.
        if (txtName.value.replace(/\s/g,'') == "") {
             message += "Please enter Name.\n";
        }
 
        //Validate the DropDownList control.
        if (ddlCountries.value == "") {
             message += "Please select Country";
        }
 
        //Display error message.
        if (message != "") {
            alert(message);
            return false;
        }
        return true;
    }
</script>
 
 

Screenshot

Find and validate TextBox and DropDownList controls in GridView row using JavaScript in ASP.Net
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge   FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code