Hi tbh,
I have created one sample please check with this.
HTML
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.dynDateTime.min.js" type="text/javascript"></script>
<script src="Scripts/calendar-en.min.js" type="text/javascript"></script>
<link href="Styles/calendar-blue.css" rel="stylesheet" type="text/css" />
<link href="Styles/calendar-blue.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$(".Calender").dynDateTime({
showsTime: true,
ifFormat: "%Y/%m/%d %H:%M",
daFormat: "%l;%M %p, %e %m, %Y",
align: "BR",
electric: false,
singleClick: false,
displayArea: ".siblings('.dtcDisplayArea')",
button: ".next()"
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FormView ID="FormView1" DataKeyNames="Name" GridLines="Both" AllowPaging="true"
runat="server" OnItemInserting="ItemInserting" OnModeChanging="ModeChanging"
OnPageIndexChanging="PageIndexChanging">
<ItemTemplate>
<table>
<tr>
<td align="right">
<b>Name:</b>
</td>
<td>
<%# Eval("Name")%>
</td>
</tr>
<tr>
<td align="right">
<b>Date Of Birth:</b>
</td>
<td>
<asp:TextBox ID="txtItemDOB" runat="server" ReadOnly="true" class="Calender" />
<img src="calender.png" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:LinkButton ID="NewButton" Text="New" CommandName="New" runat="server" />
</td>
</tr>
</table>
</ItemTemplate>
<EditItemTemplate>
<table>
<tr>
<td align="right">
<b>Name:</b>
</td>
<td>
<%# Eval("Name")%>
</td>
</tr>
<tr>
<td align="right">
<b>Date Of Birth:</b>
</td>
<td>
<asp:TextBox ID="txtEditDOB" runat="server" ReadOnly="true" class="Calender" />
<img src="calender.png" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:LinkButton ID="UpdateButton" Text="Update" CommandName="Update" runat="server" />
<asp:LinkButton ID="CancelUpdateButton" Text="Cancel" CommandName="Cancel" runat="server" />
</td>
</tr>
</table>
</EditItemTemplate>
<InsertItemTemplate>
<table>
<tr>
<td align="right">
<b>Name:</b>
</td>
<td>
<asp:TextBox ID="txtInsertName" Text='<%# Bind("Name") %>' runat="Server" />
</td>
</tr>
<tr>
<td align="right">
<b>Date Of Birth:</b>
</td>
<td>
<asp:TextBox ID="txtInsertDOB" runat="server" class="Calender" />
<img src="calender.png" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:LinkButton ID="InsertButton" Text="Insert" CommandName="Insert" runat="server" />
<asp:LinkButton ID="CancelInsertButton" Text="Cancel" CommandName="Cancel" runat="server" />
</td>
</tr>
</table>
</InsertItemTemplate>
</asp:FormView>
</div>
</form>
</body>
Code
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.BindGridWithDummyData();
}
}
private void BindGridWithDummyData()
{
DataTable dt = new DataTable();
dt.Columns.Add("Name");
dt.Columns.Add("DateOfBirth");
dt.Rows.Add();
dt.Rows[0]["Name"] = "John";
dt.Rows.Add();
dt.Rows[1]["Name"] = "Sam";
dt.Rows.Add();
dt.Rows[2]["Name"] = "Tommy";
FormView1.DataSource = dt;
FormView1.DataBind();
}
protected void ItemInserting(object sender, FormViewInsertEventArgs e)
{
string name = ((TextBox)FormView1.FindControl("txtInsertName")).Text.Trim();
string dateOfBirth = ((TextBox)FormView1.FindControl("txtInsertDOB")).Text.Trim();
}
protected void ModeChanging(object sender, FormViewModeEventArgs e)
{
FormView1.ChangeMode(e.NewMode);
BindGridWithDummyData();
}
protected void PageIndexChanging(object sender, FormViewPageEventArgs e)
{
FormView1.PageIndex = e.NewPageIndex;
BindGridWithDummyData();
}
Screenshot
