As I mentioned in an earlier blog post this month, three new data tutorials were added to my Working with Data in ASP.NET 2.0 tutorial series. One of these new tutorials looked at how to use the GridView's footer row as an inserting interface (see Inserting a New Record from the GridView's Footer [VB | C#]). The “footer as inserting interface” approach works well enough if there are records bound to the GridView. However, if you are working with a GridView that has no data associated with it, the footer row doesn't appear. In ASP.NET 1.x this wasn't an issue because regardless of whether there were any records in the DataGrid's data source, the header and footer were still displayed. It was the page developer's responsibility to check if there were no data records bound to the DataGrid and, if so, to hide the grid and display an appropriate message. In the case of using the footer to insert, however, we would leave the DataGrid visible so that the footer row was still present to allow the user to add the first record to the grid.
The GridView in ASP.NET 2.0 works a bit differently. If there are no records in the GridView's data source, it does not display its header or footer. If its EmptyDataText or EmptyDataTemplate properties are set, it will show that, otherwise the GridView emits no markup.
So, if you have an inserting interface in the GridView's footer, but there are no records in the underlying table, the footer will not display! Eep. What to do?
One option is to use the EmptyDataTemplate property. Drop a DetailsView in there, bind it to the same data source control as the GridView, check the “Enable Inserting” option from its smart tag and set its DefaultMode property to Insert. This will present the user with an inserting interface when there are no records in the table. Once they add a new record, the GridView will display its new, single record and future records can be added through the footer row.
If you use the DetailsView in the EmptyDataTemplate option and bind it to the same ObjectDataSource as used by the GridView with the code presented in the tutorial, you'll need to make one minor code modification. The ObjectDataSource has an event handler for its Inserting event. There is picks out the values from the footer and uses those values to populate its parameters. When inserting from the DetailsView, however, we can use two-way databinding instead (i.e., adding <%# Bind(”ColumnName”) %> to the properties of the Web controls in the DetailsView's InsertItemTemplates). Consequently, you'll need to bypass reading in the GridView's footer row values when inserting from the DetailsView, which can be accomplished with the following conditional statement:
1 // Only performt he following logic when inserting through the footer
2 if (Products.Rows.Count == 0)
3 // We are inserting through the DetailsView in the EmptyDataTemplate
4 return;
I've got a working example you can download to test this out. It's a stripped-down version of the download from the tutorial. I've manually deleted all of the rows from the Products table and added a DetailsView to the GridView's EmptyDataTemplate. Moreover, I've bound this DetailsView to the same ObjectDataSource as used by the GridView, added the above conditional statement to the ObjectDataSource's Inserting event handler, and added the markup to implement two-way databinding on the DetailsView. You can download this example from: http://datawebcontrols.com/demos/InsertFromFooter.zip
Hope this helps and, as always, Happy Programming!