Beginning ASP.NET Using VB.NET - Chapter 14: ASP.NET Server Controls

Adding data is slightly different to the other methods of changing data, because there is no specific Add command. What we have to do is add the row to the dataset, and then rebind the data. First, we load the data from the Session:
Sub DEDR_Add(Sender As Object, E As EventArgs)                            
 Dim dataSet As DataSet = LoadMyCalendarData
Then we use the NewRow method of the table to create a new row object.
 Dim newRow As DataRow                            
 newRow = dataSet.Tables(0).NewRow()
Now we have the new row, we can set the data for it. You can use any date here (perhaps the date selected from a Calendar), but I used similar dates to the previous entries. The other data is set to empty strings:
 newRow.Item("EventDate") = "2001/07/15"                            
 newRow.Item("ShortDesc") = ""                              
 newRow.Item("DetailDesc") = ""                            
 newRow.Item("StartTime") = ""                            
 newRow.Item("EndTime") = ""

Once the data is set, we add the new row the to the table.
 dataSet.Tables(0).Rows.Add(newRow)
Now we save the data to its file , invalidate the Session, and reload it:
 dataSet.WriteXml(Server.MapPath("MyCalendar.xml"))                            
 Session("MyCalendarData") = Nothing                            
 EventData.DataSource = LoadMyCalendarData                            
 EventData.DataBind()
Now the data is reloaded, we set the EditItemIndex of the new row, so that the row is put into edit mode. You don't have to do this, but it saves the user from having to click the Edit link on the new row. We use the Items collection of the Datagrid to identify how many rows it has. The Count property tells us how many rows, and since the rows are indexed from 0, we subtract 1 from this count, and then rebind the data (thus forcing the switch of templates):
 EventData.EditItemIndex = EventData.Items.Count - 1                              
 EventData.DataSource = LoadMyCalendarData                            
 EventData.DataBind()                            
End Sub                          
</script>
That's all there is to it. It seems a lot, but there's not actually much code. The key things to remember are:

• Use Button or LinkButton controls to provide the edit commands
• Link these edit command buttons with event procedures using the On...Command attributes of the DataGrid
• Set the EditItemIndex to the required row and rebind the data to put the grid into edit mode
• Set the EditItemIndex to –1 to cancel from edit mode

AutoGenerating the Columns

As an alternative solution to writing the column information yourself, you can let the DataGrid do most of the layout for you. In our code above we used the AutoGenerateColumns attribute to tell the grid not to automatically create columns from the bound data. That enabled us to provide the exact layout we required. If you let the grid generate the columns, however, you can also add columns using the Columns tag. The following code shows how this is done – it lets the grid handle the columns for the data, while we add the extra columns for the edit links:

<asp:DataGrid id="EventData"                                  
   width="100%" runat="server"                              
   OnEditCommand="DEDR_Edit"                                
   OnUpdateCommand="DEDR_Update"                            
   OnCancelCommand="DEDR_Cancel"                            
   OnDeleteCommand="DEDR_Delete">                            
                         
 <HeaderStyle ForeColor="White" BackColor="DodgerBlue"                              
                 Font-Bold="true"/>                                
 <ItemStyle BackColor="White"/>                            
 <AlternatingItemStyle BackColor="Gainsboro"/>                                
                         
 <Columns>                          
                                 
   <asp:TemplateColumn>                              
     <ItemTemplate>                                
       <asp:LinkButton CommandName="Edit"   text="Edit"                                        
         runat="server"/>                              
       <asp:LinkButton CommandName="Delete" Text="Delete"                                  
         runat="server"/>                                
     </ItemTemplate>                              
     <EditItemTemplate>                              
       <asp:LinkButton CommandName="Cancel" Text="Cancel"                          
         runat="server"/>                                
       <asp:LinkButton CommandName="Update" Text="Update"                              
         runat="server"/>                            
     </EditItemTemplate>                              
   </asp:TemplateColumn>                          
                           
 </Columns>                              
                         
</asp:DataGrid>
This would create a grid like so:

Having the edit links in the first column isn't a big issue, although I personally prefer them at the end. What's more of a problem is that the headings now reflect the names of the columns, rather than some neat text. In the long run, I think defining your own templates is better, as you have finer control over what your data will look like.

The EditItemTemplate technique is also available with the DataList, which is particularly useful when you require a more free-form approach to your layout, as opposed to the more columnar layout of the grid. Whichever way you choose to display your data, templating makes it really easy.