List控件中使用日期选择

The Question:

In a DataGrid, when the user clicks on the Edit button, a cell (TableCell) and an image link are created at runtime. When the user clicks on the image, a calendar pops up. It closes itself when the user clicks on a date. My problem is that I don't know how to populate the cell with the date that the user chooses from the calendar. I can, however, get the date from the calendar to populate the text outside the datagrid. I'd be appreciate if you coud show me some samples on how to achieve this. Thanks.

Wally Stem

The Answer:

Truthfully, if you can populate a TextBox outside of a DataGrid, you have done all of the work. The only thing your missing is how to correctly identify the control inside the DataGrid that you want to put the date into. DataGrids implement the INamingContainer interface, which means that the DataGrid dynamically renames its child controls to prevent any naming conflicts. If you look at the source code for the Web Form shown in Figure 1 you will see what I mean.

Figure 1

In Figure 1 is a DataGrid displaying the first 10 records from the Northwind Orders table, with the third record in edit mode. In the rendered HTML you can see how the TextBox (which has the ID value of txtDate) has been rendered as shown here:

You can see how the TextBox's ID value was changed to "DataGrid1:_ctl4:txtDate" - this is what the INamingContainer interface does. With this in mind, the soluion to the problem is to capture the rendered name of the TextBox at runtime and use it.

How It Works

When the Web Form is rendered with a DataGrid in edit mode you need to:

1. Link to a JavaScript file with the CalendarPopUp function
2. Render a JavaScript link in the row that is being edited

The JavaScript file is included in the source code (CalendarPopUp.js) for this article, and is shown here:

When the pickDate() function is invoked, a new browser window is opened, without the navigation bars (as seen in Figure 2), and a Web Form showing the calendar is rendered.

Figure 2

The Web Form

The Web Form (WebForm1.aspx) has a DataGrid with a single column set up for editing, the last column - the Shipped Date column. In the EditItemTemplate I have defined a single TextBox and assigned it the ID value of txtDate. When this EditItemTemplate is rendered, this TextBox will be renamed, as we saw above.

The Event Handlers

Let me break down all of the event handlers for this Web Form.

The Page_Load() Event Handler

In the Page_Load() event handler I simply invoke the BindData() method whenever the request is NOT a postback. In the BindData methid I create a connection to my Northwind database and I bind the results of a SQL command to the DataGrid.

The InitializeComponent() Method

In order for the next few event handlers to work properly, I edited the InitializeComponent() method that is created by Visual Studio .NET. I hade to register the new DataGrid event handlers I am adding.

The DataGrid1_EditItemCommand() Handler

In the DataGri1_EditItemCommand handler I simply set the EditItemIndex property of the DataGrid and rebind the data.

The DataGrid1_CancelItemCommand() Event Handler

In this event handler I simply reset the DataGrid to non-edit mode and rebind the data.

The DataGrid1_UpdateItemCommand() Event Handler

In this event handler, I capture the value submitted in the txtDate TextBox and - for the purposes of this sample - render the value to a Label control. Normally you would use the value to update your data source (as is indicated by a comment in the code).

The DataGrid1_OnItemDataBound() Event Handler

In the DataGrid1_OnItemDataBound event handler I do a little more work. Here I render the link tag and image tag for the calendar pop-up link. I need to pass the name of my TextBox control to the CalendarPopUp.aspx Web Form so that that Web Form know which control it has to pass a value back to. This is where I have to know the name of the TextBox as it is rendered to the client. I can use the Control.ClientID property. This property (which is inherited by all Web controls) returns the name of the HTML element that is rendered to the client. That's the big secret...that's how you can get the rendered name of a control embedded in a parent control that implements INamingContainer.

Using the ClientID value I can render the link tag, passing the ClientID value to the pickDate() javascript function.

The CalendarPopUp.aspx Web Form

The CalendarPopUp.asx Web Form displays a Calendar control and a LinkButton control. After a date is selected in the Calendar, and the LinkButton is clicked, an event handler is used to rewrite the HTML output of the page. The new HTML closes the page and passes the selected value back to the originating page and control.

Summary

To use a pop-up calendar, I implemented some basic javascript and opened a new browser window. When I opened the window, I passed a reference to the Web control I want to put the date into. When the pop-up window is closed, it passed the date value back to the correct control. For DataGrid embedded controls I used the Control.ClientID property to get the rendered name of the Web control I am modifying. The ClientID value is the ID of the control as it appears in the browser source text, which may not be the same as the ID value assigned to the control in code.