Sunday, 11 December 2011

Gridview with add edit and delete with validation in javscript and required field validations 

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="edit.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<font color="#000000"><style type="text/css">
body
{

}
#status
{
font-size:11px;
margin:10px;
}
.availablecss
{
background-color:#CEFFCE;

}
.notavailablecss
{
background-color:#FFD9D9;

}

</style>
</font>  
<title>grid add & edit</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript"  language="javascript">

////////////////////////////////////check field validation/////////////////////////////////////////////////

function ValidateGrid()
{
txtempName = document.getElementById('<%=((TextBox)GridView1.FooterRow.FindControl("txtempName")).ClientID%>');
txtempcode = document.getElementById('<%=((TextBox)GridView1.FooterRow.FindControl("txtempcode")).ClientID %>');
DropDownList2 = document.getElementById('<%=((DropDownList)GridView1.FooterRow.FindControl("DropDownList2")).ClientID%>');
txtsalary = document.getElementById('<%=((TextBox)GridView1.FooterRow.FindControl("txtsalary")).ClientID %>');
//listItemArray = document.getElementById('<%=((RadioButtonList)GridView1.FooterRow.FindControl("RadioButtonList2")).ClientID %>');

if(txtempName.value == 0)
{
alert("Please enter name...!");
txtempName.focus();
return false;
}
if(txtempcode.value == 0)
{
alert("Please Enter Emp code...!");
txtempcode.focus();
return false;
}
var str='';

var Grid_Table = document.getElementById('<%= GridView1.ClientID %>');
var SearchText = document.getElementById('<%=((TextBox)GridView1.FooterRow.FindControl("txtempcode")).ClientID %>').value;
var lenth =Grid_Table.rows.length;
if(lenth > 3)
{
for(var row=1; row<Grid_Table.rows.length-1; row++)
{
for(var col=0; col<Grid_Table.rows[row].cells.length; col++)
{
if(col==0)
 if(document.all[col])
  str=str+Grid_Table.rows[row].cells[2].innerText;
}
} 
}          str=str+'\n'; 
   var array=str.split(" "); 
   for(i = 0; i < array.length; i ++)

{ 

if(array[i] == SearchText)
{
//break;
alert("empcode  already exist");
return false;
}
}
if(DropDownList2.value == 0)
{
alert("Please select ...!");
DropDownList2.focus();
return false;
}
if(txtsalary.value == 0)
{
alert("Please Enter salary...!");
txtsalary.focus();
return false;
}
var numericExpression = /^[0-9]+$/;
if(txtsalary.value.match(numericExpression)){
return true;
}else{
alert("enter Number only");
txtsalary.focus();
return false;
}
var BaseControl = null;
BaseControl = document.getElementById('<%= this.GridView1.ClientID %>');
if (BaseControl == null)
return false;           
var ChildControl = "CheckBoxList1";
var Inputs = BaseControl.getElementsByTagName("input");
for (var n = 0; n < Inputs.length; ++n)
 if (Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(ChildControl, 0) >= 0 && Inputs[n].checked)
  var valid= true;
if(!valid)
{
alert('Select at least one Skill..!');
 return false;
 
}

var grid = document.getElementById('<%= GridView1.ClientID %>');
var rlength=grid.rows.length;
var clength=rlength-1;
var proj=grid.rows[clength].cells[7].childNodes[0];
for(i = 0; i < proj.length; i++) 
{
if(proj[i].selected)
{
var isvalid=true;
break;
}
    }
if(!isvalid){
alert("select atleast one project..! "); 
return false;
}
return true;
} 

///////////////////////////////////////////delete confirmation//////////////////////////////

function ConfirmationBox(empno) {
var result = confirm('Are you sure you want to delete '+empno+' employee id Details' );
if (result) {
return true;
}
else {
return false;
}
}
////////////////////////////////////checkskill/////////////////////////////////////
function Checkskill(sender, args)
{
BaseContrl = document.getElementById('<%= this.GridView1.ClientID %>');
var ChildContro = "CheckBoxList2";
var Inputs1 = BaseContrl.getElementsByTagName("input");
var ischecked=false;
args.IsValid =false;
for(i=0;i<Inputs1.length;i++)
{
var opt = Inputs1[i];
if(opt.type=="checkbox" && opt.id.indexOf(ChildContro, 0) >= 0 && opt.checked)
{
if(opt.checked)
{
    ischecked= true;
    args.IsValid = true;                
}
}
}

}

//////////////////////////////checkproject/////////////////////////////////   

function projectselect(sender, args)
{
debugger;
BaseContrl1 = document.getElementById('GridView1');
var ChildContro1 = "ListBox1";
var Inputs2 = BaseContrl1.getElementsByTagName("input");
var ischecked1=false;
args.IsValid1=false;

for(i=0;i<Inputs2.length;i++)
{
var opt = Inputs2[i];
if(opt.type=="ListBox" && opt.id.indexOf(ChildContro1, 0) >= 0 && opt.selected)
{
if(opt.selected)
{
    ischecked= true;
    args.IsValid = true;                
}
}
}

}


/////////////////////////////////checkduplicate value/////////////////////////    
</script>

<script type="text/javascript" language="javascript">

$(document).ready(function() {

var sname= $("#GridView1 input[name*='TextBox2']");

$(sname).change(function() {
var uname = $("#GridView1 input[name*='TextBox2']");
var msgbox = $("#GridView1 span[id*='status']");
if (uname.val().length >= 4) {
$.ajax({
type: "POST",
url: "Register.aspx/CheckUserName",
data: "{'args': '" + uname.val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
if (msg.d == 'Available') {
uname.removeClass("notavailablecss");
uname.addClass("availablecss");
msgbox.html(' <font color="Green"> Available </font>');
    }
else {
uname.removeClass("availablecss");
uname.addClass("notavailablecss");
msgbox.html(msg.d);
        }
    }
});
}
else {
uname.addClass("notavailablecss");
msgbox.html('<font color="#cc0000">Ecode must be 4 characters</font>');
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
CellPadding="4" ForeColor="#333333" GridLines="None"  ShowFooter="true"
onrowcancelingedit="GridView1_RowCancelingEdit" 
onrowediting="GridView1_RowEditing" onrowupdating="GridView1_RowUpdating" 
onrowdatabound="GridView1_RowDataBound"  OnRowDeleting="GridView1_RowDeleting"   ShowHeader="True">
<RowStyle BackColor="#EFF3FB" />
<Columns>
<asp:TemplateField HeaderText="ID">
<ItemTemplate >
<asp:Label ID="Label6" runat="server" Text='<%# Eval("empno") %>' ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate >
<asp:Label runat="server" Text='<%# Eval("empname") %>' ></asp:Label>
</ItemTemplate>
<EditItemTemplate >
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("empname")%>'  ></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Requiredempname" ControlToValidate="TextBox1" ValidationGroup="editmode"></asp:RequiredFieldValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtempName" Width="70px" runat="server" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Emp Code">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("empcode") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate >
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Eval("empcode") %>' ></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Requiredempcode" ControlToValidate="TextBox2" ValidationGroup="editmode"></asp:RequiredFieldValidator>
<br />
<span id="status"></span>
</EditItemTemplate>
<FooterTemplate> 
<asp:TextBox ID="txtempcode" Width="70px" runat="server"  />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Department">
<ItemTemplate >
<asp:Label ID="Label2" runat="server" Text='<%# Eval("department") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate >
<asp:DropDownList ID="DropDownList1" runat="server"  >
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Requireddepartment" ControlToValidate="DropDownList1" ValidationGroup="editmode">
</asp:RequiredFieldValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="DropDownList2" runat="server" DataSource= '<%# PopulateControls() %>' DataTextField="department" DataValueField="department"  >
</asp:DropDownList>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Salary">
<ItemTemplate >
<asp:Label ID="Label3" runat="server" Text='<%# Eval("salary") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" Text='<%# Eval("salary") %>' ></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="Requiredsalary" ControlToValidate="TextBox3"  ValidationGroup="editmode"></asp:RequiredFieldValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtsalary" Width="70px" runat="server" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Gender">
<ItemTemplate >
<asp:Label ID="Label4" runat="server" Text='<%# Eval("gender") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate >
<asp:RadioButtonList ID="RadioButtonList1" runat="server" >
<asp:ListItem >Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:RadioButtonList>
</EditItemTemplate>
<FooterTemplate>
<asp:RadioButtonList ID="RadioButtonList2" runat="server">
<asp:ListItem Selected="True">Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:RadioButtonList>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="skill">
<ItemTemplate >
<asp:Label ID="Label5" runat="server" Text='<%# Eval("skill") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate >
<asp:CheckBoxList ID="CheckBoxList2" runat="server" >
<asp:ListItem>asp.net</asp:ListItem>
<asp:ListItem>c#</asp:ListItem>
<asp:ListItem>java</asp:ListItem>
<asp:ListItem>php</asp:ListItem>
</asp:CheckBoxList>
<asp:CustomValidator  ClientValidationFunction="Checkskill"  ID="ValidateAge" runat="server" ErrorMessage="Please Select skill" ValidationGroup="editmode" > </asp:CustomValidator>  
</EditItemTemplate>
<FooterTemplate>
<asp:CheckBoxList ID="CheckBoxList1" runat="server"   >
<asp:ListItem>asp.net</asp:ListItem>
<asp:ListItem>c#</asp:ListItem>
<asp:ListItem>java</asp:ListItem>
<asp:ListItem>php</asp:ListItem>
</asp:CheckBoxList>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Project" HeaderStyle-HorizontalAlign="Left">
<EditItemTemplate>  
<asp:ListBox ID="ListBox1" runat="server" DataSource= '<%# PopulateControlslist() %>' DataTextField="projectname" DataValueField="projectname" SelectionMode="Multiple">
</asp:ListBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator5"  ControlToValidate="ListBox1" runat="server" ErrorMessage="select one project" ValidationGroup="editmode"></asp:RequiredFieldValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:ListBox ID="ListBox2" runat="server" DataSource= '<%# PopulateControlslist() %>' DataTextField="projectname" DataValueField="projectname"  SelectionMode="Multiple">
</asp:ListBox>
</FooterTemplate>  
<ItemTemplate>  
<asp:Label ID="lblState" runat="server" Text='<%#Eval("project")%>' />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit" ShowHeader="false">
<ItemTemplate>
<asp:LinkButton ID="btnedit" runat="server" CommandName="Edit" Text="Edit"  ></asp:LinkButton>
</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="btnupdate" runat="server" CommandName="Update" Text="Update"  ValidationGroup="editmode" ></asp:LinkButton>
<asp:LinkButton ID="btncancel" runat="server" CommandName="Cancel" Text="Cancel" CausesValidation="false"></asp:LinkButton>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="delete" ShowHeader="false">
<ItemTemplate>
<asp:LinkButton ID="btndelete" runat="server" CommandName="Delete" Text="Delete"  ></asp:LinkButton>
</ItemTemplate>
<FooterTemplate>
<asp:Button ID="btnSave" runat="server" Text="Save"  OnClick="save" OnClientClick="return ValidateGrid();"  />
</FooterTemplate>  
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
</form>
</body>
</html>

No comments:

Post a Comment