在datagrid上添加新行

A better method to adding new rows in a DataGrid

If you've been working with the DataGrid Control you understand the difference of the different templates and how you can use the FooterTemplate to create functionality so a user can add in a new row to your datasource. But showing and hiding the Footer Template isn't enough to make a good UI. This article uses a few simple ideas to make adding in new records better for the user.

First let's do a quick recap (you should already be familiar with the DataGrid control and EditItemTemplates and how to edit data within your DataGrid). By default the FooterTemplate is turned off for each column, so it can be used to put in other controls, mainly those for allowing a user to add in new row of information to the datasource that the DataGrid is connected too. So you could have a TemplateColumn that looks like this:

<asp:TemplateColumn>

<HeaderTemplate>
<b>First Name</b><br/>
</HeaderTemplate>
<ItemTemplate>
<asp:Label
Text='<%# DataBinder.Eval(Container.DataItem, "FirstName") %>'
runat="server"/>
</ItemTemplate>

<EditItemTemplate>
<b>First Name</b><br/>
<asp:TextBox columns="3" CssClass="forminputs" id="FirstName" 
Text='<%# DataBinder.Eval(Container.DataItem, "FirstName") %>' 
runat="server"/>
</EditItemTemplate>

<FooterTemplate>
<b>FirstName</b><br/>
<asp:TextBox columns="3" CssClass="forminputs" id="FirstName" Text="0"
runat="server"/>

<asp:RequiredFieldValidator  runat="server" id="FirstNameRequired" 
ControlToValidate="FirstName" 
ErrorMessage = "Enter in your first name please."/>

</FooterTemplate>

</asp:TemplateColumn>

In order to show your FooterTemplate you just need to set the property ShowFooter="True", and in your Edit or Delete column create another FooterTemplate with a button for submitting the new row of information to your datasource.

Using this method it will show all the records in your DataGrid (or the amount you have paged) and then show the FooterTemplates for each column as the ending row in your DataGrid allowing the user to enter in a new row of information. But is this really that good for the user? Does your DataGrid really have to resemble the look and feel of a table layout in Enterprise Manager?

In most scenarios the answer is no. While the DataGrid provides advantages out of the box it's up to you to use them not only to speed up the development process, but to also make sure that you don't get caught up in doing too little either. What if the user is already looking at a DataGrid with 15 rows per page and each column has a nicely formatted look and feel where the columns aren't just one column of data but rather a snapshot of data (for instance the first column is called "Personal Information" and has the user's First Name, Last Name, and E-mail). Does it really make sense to have the user scroll down the page, or to have to look at all the other previous rows of data to add in a new row of data? Not really.

A better way to accomplish this is to have the same formatting with the FooterTemplates as explained above, but instead of having the FooterTemplate shown by default, have a button at the top of your DataGrid which performs two actions: 1.) Shows the FooterTemplates 2.) Doesn't show any of the previous data. This can be accomplished by using a method like the following:

public void Show_NewRow(Object sender, EventArgs e) 
{
MyData.CurrentPageIndex=0;

DataTable dt = new DataTable();	
DataView dv = new DataView(dt);
MyData.DataSource = dv;
MyData.DataBind();
MyData.ShowFooter=true;
}

When the user clicks on the button above your DataGrid it will set the CurrentPageIndex=0 (which is done to eliminate any errors if on the last page of your DataGrid, similar to if you're deleting the last record on the last page of your DataGrid), then create a new blank DataTable and DataView as the DataGrid's DataSource, bind the datasource, and finally show the footer for the DataGrid.

What's nice about this method is that now the user doesn't have to scroll or look at any other records to add in a new record, but just gets the "new row" form instead. At the same time it easily shows the user a button to add in a new record, which results in a cleaner UI for the user. If the user decides to cancel their new addition, or once the new row is submitted you can just rebind your "real" DataSource to the DataGrid to show the data again.

While this may seem like a simple update to how you add in new rows using a DataGrid it can go a long way in making a better and easier interface for your user.