In this article I will explain how to find, access, get value and validate TextBox and DropDownList controls in GridView row using jQuery in ASP.Net.
This article will explain how to find and validate TextBox and DropDownList controls inside the
ASP.Net GridView row using jQuery 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.
<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 ID = "lnkUpdate" Text="Update" runat="server" OnClick="OnUpdate" />
<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 jQuery
The following jQuery event handler is executed when the Update LinkButton is clicked.
Using the reference of the Update LinkButton, the current GridView Row is determined and the TextBox and the DropDownList controls are fetched.
Now the values of the TextBox and the DropDownList controls are validated and if the value of any one or both the controls is invalid then a jQuery alert message box is displayed.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=GridView1] [id*=lnkUpdate]").click(function () {
//Find the GridView Row using the LinkButton reference.
var row = $(this).closest("tr");
//Find the TextBox control.
var txtName = row.find("[id*=txtName]");
//Find the DropDownList control.
var ddlCountries = row.find("[id*=ddlCountries]");
var message = "";
//Validate the TextBox control.
if ($.trim(txtName.val()) == "") {
message += "Please enter Name.\n";
}
//Validate the DropDownList control.
if (ddlCountries.val() == "") {
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 jQuery in ASP.Net]()
Demo
Downloads
Download Code
