Javascript Validations on EditItem Template of a Grid View

Self-Innovator
Posted by Self-Innovator under JavaScript category on | Points: 40 | Views : 5346
The below code uses a javascript validations for TextBox and Drop downlist control under gridview control..

Page Design
<asp:GridView ShowFooter="true" AutoGenerateColumns="False" ID="GrdView" runat="server" 
CellPadding="4" ForeColor="#333333" GridLines="None" DataKeyNames="Id"
onrowcancelingedit="GrdView_RowCancelingEdit" onrowediting="GrdView_RowEditing"
onrowupdating="GrdView_RowUpdating" onrowdatabound="GrdView_RowDataBound"
onrowdeleting="GrdView_RowDeleting" onrowcommand="GrdView_RowCommand">
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<Columns>

<asp:TemplateField HeaderStyle-HorizontalAlign="Left" HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%#Bind("Name") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtName" runat="server" onChange='javascript:return ValidateName(this);' Text='<%#Bind("Name") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtNewName" runat="server" onChange='javascript:return ValidateName(this);'></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>


<asp:TemplateField HeaderStyle-HorizontalAlign="Left" HeaderText="Country">
<ItemTemplate>
<asp:Label ID="lblCountry" runat="server" Text='<%#Eval("Country") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList ID="ddlCountry" onselectedindexchanged="ddlCountry_SelectedIndexChanged" runat="server" AutoPostBack="True"></asp:DropDownList>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="ddlNewCountry" onselectedindexchanged="ddlNewCountry_SelectedIndexChanged" AutoPostBack="true" runat="server"></asp:DropDownList>
</FooterTemplate>
</asp:TemplateField>


<asp:TemplateField HeaderStyle-HorizontalAlign="Left" ShowHeader="false" HeaderText="Edit">
<EditItemTemplate>
<asp:LinkButton ID="lnkUpdate" runat="server" OnClientClick='javascript:return ValidateGrid(this);' Text="Update" CommandName="Update" CausesValidation="true"></asp:LinkButton>
<asp:LinkButton ID="lnkCancel" runat="server" Text="Cancel" CommandName="Cancel" CausesValidation="false"></asp:LinkButton>
</EditItemTemplate>
<FooterTemplate>
<asp:LinkButton ID="lnkAdd" runat="server" OnClientClick='javascript:return ValidateGrid(this);' Text="Insert" CommandName="Insert" CausesValidation="true"></asp:LinkButton>
</FooterTemplate>
</asp:TemplateField>

</asp:GridView>


Javascript Function
<script language="javascript" type="text/javascript">
function ValidateGrid(x)
{
var gridView=document.getElementById('<%=GrdView.ClientID %>');
var selectedRowIndex=x.parentNode.parentNode.rowIndex;
var txtName=gridView.rows[parseInt(selectedRowIndex)].cells[0].children[0];
var ddlCountry=gridView.rows[parseInt(selectedRowIndex)].cells[1].children[0].selectedIndex;
if(txtName.value=="" || ddlCountry<=0)
{
alert('Please input all fields');
return false;
}
}
</script>

Comments or Responses

Login to post response