How to implement popup Calendar dialog box with DataGrid
2005-12-23 11:59
531 查看
当你有一个DataGrid控件，而且DataGrid允许用户删除网格（grid）中的一行时，你不需要某些客户端代码，你只需要点击网格上的Delete按钮就可以删除行了，但是删除时不会提示用户进行确认。这时Attributes属性就派得上用场了。你可以用DataGrid的ItemDataBound()服务器事件给网格中的每个删除按钮添加一个属性。当你用DataGrid的DataBind方法将数据绑定到网格时，所添加的每一行都会触发ItemDataBound事件。在事件中添加的代码如下：
客户要在DataGrid里绑定日期数据，并显示一个按钮，按钮按了以后弹出一个Calendar，可供选择日期。选择的结果要还给原来的DataGrid。给他做了一个：
有一点，在DataGrid.ItemCreated事件里取不到control的正确的Client ID或Unique ID，老是返回“TextBox1”，弄得client side script很难写……而在DataGrid.ItemDataBound事件里就能取到“DataGrid1__ctl2_TextBox1”……未及深究，不知道有没有人能给个solid的解释……
re: 在ASP.Net DataGrid中制作弹出式的日期选择Calendar 2004-12-11 4:23 Lostinet
ItemCreated的时候，Item并没有Add到DataGrid.Controls中，所以无法自动生成ID。
可以在ItemCreated时，得到e.Item
绑定e.Item.Init+=new ...
void e_Item_Init(..)
{
DataGridItem item=(DataGridItem)sender;
在这里做能得到UniqueID/ClientID的初始化。
}
The following two pages will demonstrate how to use client side "window.showModalWindow" in combination with ASP.Net server side PostBack.
=======================WebForm1.aspx=========================
<%@ Page language="c#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:DataGrid id="DataGrid1" style="Z-INDEX: 101; LEFT: 56px; POSITION: absolute; TOP: 48px" runat="server"
Width="512px" Height="256px" AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="StringColumn" HeaderText="StringColumn"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="DateColumn">
<ItemTemplate>
<asp:TextBox id=TextBox1 runat="server" Text='<%# DateTime.Parse(DataBinder.Eval(Container, "DataItem.DateColumn").ToString()).ToShortDateString() %>'>
</asp:TextBox>
<asp:Button id="Button1" runat="server" Text="Edit Value"></asp:Button>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</form>
<script runat="server">
protected DataTable dt;
protected void Page_Load(object sender, System.EventArgs e)
{
DataGrid1.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.DataGrid1_ItemDataBound);
dt = new DataTable("TestTable");
dt.Columns.Add("StringColumn",typeof(string));
dt.Columns.Add("DateColumn",typeof(DateTime));
dt.Rows.Add(new object[]{"String 1",DateTime.Now});
dt.Rows.Add(new object[]{"String 2",DateTime.Now});
DataGrid1.DataSource = dt;
DataGrid1.DataBind();
}
protected void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
//Eliminate the headers and footers.
if (e.Item.Cells[1].Controls.Count == 5)
{
TextBox tx = (TextBox)e.Item.Cells[1].Controls[1];
Button btn = (Button)e.Item.Cells[1].Controls[3];
btn.Attributes.Add("onclick","return buttonClick('" + tx.ClientID + "');");
}
}
</script>
<script language="javascript">
function buttonClick(senderTextBoxID) {
//debugger;
var i;
var senderTextBox;
for (i = 0; i < event.srcElement.parentElement.children.length; i++) {
if (event.srcElement.parentElement.children[i].id == senderTextBoxID) {
senderTextBox = event.srcElement.parentElement.children[i];
}
}
var returnValue;
returnValue = window.showModalDialog("CalendarDialog.aspx?selectedDate=" + senderTextBox.value);
//debugger;
if (returnValue != null) {
senderTextBox.value = returnValue.toString();
}
//Cancel the postback.
return false;
}
</script>
</body>
</HTML>
=======================CalendarDialog.aspx=========================
<%@ Page language="c#" AutoEventWireup="true"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>CalendarDialog</title>
<base target=_self>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:Calendar id="Calendar1" style="Z-INDEX: 101; LEFT: 32px; POSITION: absolute; TOP: 32px" runat="server"
Width="241px" Height="176px"></asp:Calendar>
<INPUT style="Z-INDEX: 102; LEFT: 32px; WIDTH: 96px; POSITION: absolute; TOP: 224px; HEIGHT: 24px"
type="button" value="OK" onclick="returnToMainForm();">
<INPUT style="Z-INDEX: 103; LEFT: 176px; WIDTH: 96px; POSITION: absolute; TOP: 224px; HEIGHT: 24px"
type="button" value="Cancel" onclick="window.close();">
</form>
<script runat=server>
protected void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
DateTime dt;
try
{
dt = DateTime.Parse(Request.QueryString["selectedDate"]);
}
catch
{
dt = DateTime.Now;
}
Calendar1.SelectedDate = dt;
RegisterHiddenField("selectedDate",dt.ToShortDateString());
}
Calendar1.SelectionChanged += new EventHandler(Calendar1_SelectionChanged);
}
protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{
RegisterHiddenField("selectedDate",this.Calendar1.SelectedDate.ToShortDateString());
}
</script>
<script language=javascript>
function returnToMainForm() {
window.returnValue = window.Form1.selectedDate.value;
window.close();
}
</script>
</body>
</HTML>
protected DataTable dt;
protected void Page_Load(object sender, System.EventArgs e)
{
DataGrid1.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.DataGrid1_ItemDataBound);
dt = new DataTable("TestTable");
dt.Columns.Add("StringColumn",typeof(string));
dt.Columns.Add("DateColumn",typeof(DateTime));
dt.Rows.Add(new object[]{"String 1",DateTime.Now});
dt.Rows.Add(new object[]{"String 2",DateTime.Now});
DataGrid1.DataSource = dt;
DataGrid1.DataBind();
}
protected void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
//Eliminate the headers and footers.
if (e.Item.Cells[1].Controls.Count == 5)
{
TextBox tx = (TextBox)e.Item.Cells[1].Controls[1];
Button btn = (Button)e.Item.Cells[1].Controls[3];
btn.Attributes.Add("onclick","return buttonClick('" + tx.ClientID + "');");
}
}
function buttonClick(senderTextBoxID) {
//debugger;
var i;
var senderTextBox;
for (i = 0; i < event.srcElement.parentElement.children.length; i++) {
if (event.srcElement.parentElement.children[i].id == senderTextBoxID) {
senderTextBox = event.srcElement.parentElement.children[i];
}
}
var returnValue;
returnValue = window.showModalDialog("CalendarDialog.aspx?selectedDate=" + senderTextBox.value);
//debugger;
if (returnValue != null) {
senderTextBox.value = returnValue.toString();
}
//Cancel the postback.
return false;
}
Private Sub MyDataGrid_ItemDataBound(ByVal _
Sender as object, ByVal e As _
System.Web.UI.WebControls. _
DataGridItemEventArgs) _
Handles MyDataGrid.ItemDataBound
' This code adds javascript to the "Del"
' button on each row in
' the datagrid the javascript displays a
' message box to the
' user, confirming the delete action
Dim btnDel As LinkButton
Const DEL_COLUMN As Int16 = 1
If Not (e.Item.ItemType = _
ListItemType.Header Or _
e.Item.ItemType = _
ListItemType.Footer) Then
btnDel = _
e.Item.Cells(DEL_COLUMN).Controls(0)
btnDel.Attributes.Add("onClick", _
"confirmDelete();")
End If
End Sub |
有一点，在DataGrid.ItemCreated事件里取不到control的正确的Client ID或Unique ID，老是返回“TextBox1”，弄得client side script很难写……而在DataGrid.ItemDataBound事件里就能取到“DataGrid1__ctl2_TextBox1”……未及深究，不知道有没有人能给个solid的解释……
re: 在ASP.Net DataGrid中制作弹出式的日期选择Calendar 2004-12-11 4:23 Lostinet
ItemCreated的时候，Item并没有Add到DataGrid.Controls中，所以无法自动生成ID。
可以在ItemCreated时，得到e.Item
绑定e.Item.Init+=new ...
void e_Item_Init(..)
{
DataGridItem item=(DataGridItem)sender;
在这里做能得到UniqueID/ClientID的初始化。
}
The following two pages will demonstrate how to use client side "window.showModalWindow" in combination with ASP.Net server side PostBack.
=======================WebForm1.aspx=========================
<%@ Page language="c#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:DataGrid id="DataGrid1" style="Z-INDEX: 101; LEFT: 56px; POSITION: absolute; TOP: 48px" runat="server"
Width="512px" Height="256px" AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="StringColumn" HeaderText="StringColumn"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="DateColumn">
<ItemTemplate>
<asp:TextBox id=TextBox1 runat="server" Text='<%# DateTime.Parse(DataBinder.Eval(Container, "DataItem.DateColumn").ToString()).ToShortDateString() %>'>
</asp:TextBox>
<asp:Button id="Button1" runat="server" Text="Edit Value"></asp:Button>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</form>
<script runat="server">
protected DataTable dt;
protected void Page_Load(object sender, System.EventArgs e)
{
DataGrid1.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.DataGrid1_ItemDataBound);
dt = new DataTable("TestTable");
dt.Columns.Add("StringColumn",typeof(string));
dt.Columns.Add("DateColumn",typeof(DateTime));
dt.Rows.Add(new object[]{"String 1",DateTime.Now});
dt.Rows.Add(new object[]{"String 2",DateTime.Now});
DataGrid1.DataSource = dt;
DataGrid1.DataBind();
}
protected void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
//Eliminate the headers and footers.
if (e.Item.Cells[1].Controls.Count == 5)
{
TextBox tx = (TextBox)e.Item.Cells[1].Controls[1];
Button btn = (Button)e.Item.Cells[1].Controls[3];
btn.Attributes.Add("onclick","return buttonClick('" + tx.ClientID + "');");
}
}
</script>
<script language="javascript">
function buttonClick(senderTextBoxID) {
//debugger;
var i;
var senderTextBox;
for (i = 0; i < event.srcElement.parentElement.children.length; i++) {
if (event.srcElement.parentElement.children[i].id == senderTextBoxID) {
senderTextBox = event.srcElement.parentElement.children[i];
}
}
var returnValue;
returnValue = window.showModalDialog("CalendarDialog.aspx?selectedDate=" + senderTextBox.value);
//debugger;
if (returnValue != null) {
senderTextBox.value = returnValue.toString();
}
//Cancel the postback.
return false;
}
</script>
</body>
</HTML>
=======================CalendarDialog.aspx=========================
<%@ Page language="c#" AutoEventWireup="true"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>CalendarDialog</title>
<base target=_self>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:Calendar id="Calendar1" style="Z-INDEX: 101; LEFT: 32px; POSITION: absolute; TOP: 32px" runat="server"
Width="241px" Height="176px"></asp:Calendar>
<INPUT style="Z-INDEX: 102; LEFT: 32px; WIDTH: 96px; POSITION: absolute; TOP: 224px; HEIGHT: 24px"
type="button" value="OK" onclick="returnToMainForm();">
<INPUT style="Z-INDEX: 103; LEFT: 176px; WIDTH: 96px; POSITION: absolute; TOP: 224px; HEIGHT: 24px"
type="button" value="Cancel" onclick="window.close();">
</form>
<script runat=server>
protected void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
DateTime dt;
try
{
dt = DateTime.Parse(Request.QueryString["selectedDate"]);
}
catch
{
dt = DateTime.Now;
}
Calendar1.SelectedDate = dt;
RegisterHiddenField("selectedDate",dt.ToShortDateString());
}
Calendar1.SelectionChanged += new EventHandler(Calendar1_SelectionChanged);
}
protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{
RegisterHiddenField("selectedDate",this.Calendar1.SelectedDate.ToShortDateString());
}
</script>
<script language=javascript>
function returnToMainForm() {
window.returnValue = window.Form1.selectedDate.value;
window.close();
}
</script>
</body>
</HTML>
protected DataTable dt;
protected void Page_Load(object sender, System.EventArgs e)
{
DataGrid1.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.DataGrid1_ItemDataBound);
dt = new DataTable("TestTable");
dt.Columns.Add("StringColumn",typeof(string));
dt.Columns.Add("DateColumn",typeof(DateTime));
dt.Rows.Add(new object[]{"String 1",DateTime.Now});
dt.Rows.Add(new object[]{"String 2",DateTime.Now});
DataGrid1.DataSource = dt;
DataGrid1.DataBind();
}
protected void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
//Eliminate the headers and footers.
if (e.Item.Cells[1].Controls.Count == 5)
{
TextBox tx = (TextBox)e.Item.Cells[1].Controls[1];
Button btn = (Button)e.Item.Cells[1].Controls[3];
btn.Attributes.Add("onclick","return buttonClick('" + tx.ClientID + "');");
}
}
function buttonClick(senderTextBoxID) {
//debugger;
var i;
var senderTextBox;
for (i = 0; i < event.srcElement.parentElement.children.length; i++) {
if (event.srcElement.parentElement.children[i].id == senderTextBoxID) {
senderTextBox = event.srcElement.parentElement.children[i];
}
}
var returnValue;
returnValue = window.showModalDialog("CalendarDialog.aspx?selectedDate=" + senderTextBox.value);
//debugger;
if (returnValue != null) {
senderTextBox.value = returnValue.toString();
}
//Cancel the postback.
return false;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- How to implement popup Calendar dialog box with DataGrid
- How to create a resizeable dialog box with scroll bars in Visual C++
- How to Customize Common Open File Dialog Box Places Bar in Windows
- add a confirm dialogbox to the editItem of the datagrid
- How to Implement Add/Edit/Delete/View with PHP using Angular JS (Part-2)
- How to implement the similar mechanism with Java final in c++?
- how to use adb and gdbserver with VirtualBox - KVM (qemu)
- How to cover an IE windowed control (Select Box, ActiveX Object, etc.) with a DHTML layer.
- How to drag a dialog box derived from DHtmlDialog ?
- How to load a dll resource dialog box at an application Dialog box (怎么在一个应用程序对话框动态加载DLL里的资源对话框)
- how to show a dialog box that prompts you to either "Open it" or "Save it to disk"again?
- [XAF] How to represent an enumeration property via a drop-down box with check boxes
- how to create a window ot dialog with fixed size?
- How to play '.rm' files with RhythmBox in Ubutu?
- How to implement COMET with PHP
- How to install OS X Mountain Lion in Virtualbox with iAtkos
- How to make a combo box with fulltext search autocomplete support?
- How to integrate the latest lispbox with clisp.
- How to Implement Add/Edit/Delete/View with PHP using Angular JS (Part-1)
- How to implement multiple constructor with different parameters in Scala