Build a Reusable Datagrid to Make Life Easier

Are you still toiling with classic ASP for your customer’s Websites? Are you writing 20 or 30 page admin section for customers who just want to edit their News and Frequently Asked Questions pages? Well, put down your sticks because I’m about to hand you a golden Zippo!

If you freelance or run a small design company then you can’t financially justify continuing to use Classic ASP. It was just about 8 months ago that I can recall writing 8 or 10 pages just accomplish an ADD/EDIT/DELETE on a database table. Now I can do it in just one completely reusable page. I’d heard lots and lots about .NET, but I’d been rolling along great with ASP for so long and whenever I looked at it, the change seemed too daunting. I can’t remember what made me break down and get into .NET, but as soon as I saw what could be accomplished I knew that I’d made the right decision. After going through several books, I have built administration portions for 6 client sites, and each has been more functional and easier to use than the one before it.

What I am about to teach you is the ASP.NET datagrid. I'll assume that you have a basic understanding of ASP.NET and VB.NET.

The DataGrid

With some initial work you can put together an ADD/EDIT/DELETE datagrid that will make your life a whole lot easier. Just imagine, every time your client wants to edit a simple database table like a calendar, “What’s New” section, or Frequently Asked Questions, all you have to do is make a copy of the last datagrid you made and spend 20 minutes making changes. It’s my favorite part of ASP.NET, just because it’s such a time saver. Now you can see what it will do for you.

I think that the best way to demonstrate this is going to be to let you see the evolution of the datagrid that I’m currently using. It started out with just EDIT/DELETE and now it takes care of all of my simple, yet time consuming tasks.

Right out of the box, the datagrid does almost everything you require. Here’s what you need to get started.

Sub Page_Load(sender as object, e as eventargs)
   If Not Page.IsPostBack Then
       BindDataGrid()
   End If
End Sub
Sub BindDataGrid()
   Dim objConn as New OleDbConnection("Provider=Microsoft
   .Jet.OLEDB.4.0; Data Source=c:\inetpub\sites\site.com
   \www\database\site.mdb")
   objConn.Open()

   Dim ds as Dataset = New DataSet()
   Dim objAdapter as New OleDbDataAdapter("SELECT * FROM  
   News ORDER BY NewsDate DESC;", objConn)
   
   objAdapter.Fill(ds,"News")

   EditNews.DataSource = ds.Tables("News").DefaultView
   EditNews.DataBind()

   objConn.Close()
End Sub

In this example I wrote a BindDataGrid() function that will pull the data from the database and write it into the datagrid. You may also notice that I’m using OleDb. You can substitute any type of connection you want, just make sure to import the proper namespaces. I also wrote the Page_Load function that simply runs the BindDataGrid() function the first time the page loads.

Defining the Datagrid

Next up I’ll show you the beginnings of the datagrid. This is the part where you define what information will be in which column, and decide on the look and feel of the interface.

<form runat="server">
       <asp:datagrid id="EditNews" runat="server" GridLines="Horizontal"  
Cellspacing="0" CellPadding="5" EditItemStyle-BackColor="#333366"
EditItemStyle-ForeColor="white" DataKeyField="NewsID"  
OnEditCommand="DoItemEdit" OnUpdateCommand="DoItemUpdate"  
OnCancelCommand="DoItemCancel" OnDeleteCommand="DoItemDelete"  
AutoGenerateColumns="false" AlternatingItemStyle-BackColor="#CCCCCC"  
BorderColor="black">
           <columns>
               <asp:boundcolumn HeaderText="Date"  
               DataField="NewsDate" ReadOnly="true"  
               HeaderStyle-BackColor="#333366"  
               HeaderStyle-ForeColor="#FFFFFF" />
               <asp:templatecolumn HeaderText="News Title"  
               ItemStyle-Width="200"    HeaderStyle-BackColor="#333366"  
               HeaderStyle-ForeColor="#FFFFFF">
                   <ItemTemplate>
                       <asp:label Text='<%# Container.DataItem
                       ("NewsTitle")%>' runat="server"></asp:label>
                   </ItemTemplate>
                   <EditItemTemplate>
                       <asp:textbox ID="NewsTitle"  
                       TextMode="MultiLine" Rows="3" size="60"  
                       runat="server" Text='<%#  
                       Container.DataItem("NewsTitle")%>' />
                   </EditItemTemplate>
               </asp:templatecolumn>
               <asp:templatecolumn HeaderText="NewsBody"  
               ItemStyle-Width="400"  
               HeaderStyle-BackColor="#333366"  
               HeaderStyle-ForeColor="#FFFFFF">
                   <ItemTemplate>
                       <asp:label Text='<%# Container.DataItem
                       ("NewsBody")%>'
                        runat="server"></asp:label>
                   </ItemTemplate>
                   <EditItemTemplate>
                       <asp:textbox ID="NewsBody"  
                       Columns="50" TextMode="MultiLine"  
                       Rows="8" runat="server" Text='<%#  
                       Container.DataItem("NewsBody")%>' />
                   </EditItemTemplate>
               </asp:templatecolumn>
               <asp:templatecolumn HeaderText="News Author"  
               ItemStyle-Width="100" HeaderStyle-BackColor="#333366"
               HeaderStyle-ForeColor="#FFFFFF">
                   <ItemTemplate>
                       <asp:label Text='<%# Container.DataItem
                       ("NewsWrittenBy")%>' runat="server"></asp:label>
                   </ItemTemplate>
                   <EditItemTemplate>
                       <asp:textbox ID="NewsAuthor" width="100"  
                       runat="server" Text='<%# Container.DataItem
                       ("NewsWrittenBy")%>' />
                   </EditItemTemplate>
               </asp:templatecolumn>
               <asp:templatecolumn HeaderStyle-BackColor="#333366"
                HeaderStyle-ForeColor="#FFFFFF"  
                ItemStyle-Width="75">
                   <ItemTemplate>
                       <asp:button CommandName="Edit"  
                       Text="Edit" runat="server" />
                   </ItemTemplate>
                   <EditItemTemplate>
                       <asp:button CommandName="Update"  
                       Text="Update" runat="server" Width="75" />
                       <asp:button CommandName="Delete"  
                       Text="Delete" runat="server" Width="75" />
                       <asp:button CommandName="Cancel"
                       Text="Cancel" runat="server" Width="75" />
                   </EditItemTemplate>
               </asp:templatecolumn>
           </columns>
       </asp:datagrid>
   </form>