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 following HTML Markup consists of an ASP.Net GridView three columns.
The first two columns are Name and Country. In edit mode, the Name column will display a TextBox and the Country column will display a DropDownList control.
The third column consists of Edit, Update and 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="GridView1" 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.
Validating TextBox and DropDownList controls in GridView row using JavaScript
The following 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]()
Demo
Downloads
