Problem solve Get help with specific problems with your technologies, process and projects.

Calling a detail data form from a DataGrid row

A demo of how you can have a form with a DataGrid control that can be used generically for several database tables.

This tip was submitted to the Visual Studio .NET Info Center tip exchange by member Roger McCook. Let other users know how useful this tip is by rating it below. Got a tip or code of your own you'd like to share? Submit it here!


Introduction
The idea is that we have a DataGrid that has a list of records in a database table. We want to be able to select a row and call up a detail form that will have the corresponding database detail.

Using Visual Studio .NET, I drag and drop a DataGrid onto my Web form and start tinkering with the properties. This is the way I like to do it but I still have to switch to HTML view and code a few items by hand. Here is some actual code from a recent project I worked on for a large company in Atlanta. The grid is generalized to handle several different reference tables in the database. The detail form that will be called is dependent on which table I'm working with.

<asp:DataGrid
    id="myDataGrid" 
    style="Z-INDEX: 102; 
    LEFT: 159px; 
    POSITION: absolute; 
    TOP: 116px" 
    runat="server"
    Border="0" 
    Cellpadding="4" 
    AlternatingItemStyle-BackColor="#EFEFEF"
    HeaderStyle-BackColor="Black" 
    HeaderStyle-ForeColor="White" 
    HeaderStyle-Font-Bold="True" 
    AllowPaging="True" 
    PagerStyle-Mode="NextPrev" 
    PagerStyle-NextPageText="Next ->" 
    PagerStyle-PrevPageText="<- Previous"
    PagerStyle-Font-Bold="True" 
    OnPageIndexChanged="myDataGrid_PageChanger"
    OnItemCommand="myDataGrid_ItemCommand" 
    AutoGenerateColumns="False"
    Width="501px" 
    BorderStyle="Solid" 
    BorderWidth="1px" 
    CellSpacing="1" 
    DataKeyField="ID"<
    <AlternatingItemStyle BackColor="#EEF5FA"></AlternatingItemStyle>
    <HeaderStyle Font-Bold="True" ForeColor="White"
BackColor="#6FB1D9"></HeaderStyle>
    <Columns>
    
    <asp:BoundColumn
        Visible="False"
        DataField="ID"
        ReadOnly="True"
        HeaderText="RowID">
    </asp:BoundColumn>
    
    <asp:BoundColumn
        DataField="Description" 
        HeaderText="Description">
    </asp:BoundColumn>
    
    <asp:ButtonColumn 
        Text="Edit" 
        CommandName="Edit">
    </asp:ButtonColumn>
    
    <asp:ButtonColumn
        Text="Delete" 
        CommandName="Delete">
    </asp:ButtonColumn>
    </Columns>
    
    <PagerStyle NextPageText="Next ->" Font-Bold="True"
PrevPageText="<- Prev"></PagerStyle>
</asp:DataGrid<

Most of the code was generated automatically by Visual Studio (VS.NET Enterprise Edition), but I had to switch to HTML view and add a couple of lines myself. The following info was manually entered: This following line (from above) calls a procedure named "myDataGrid_PageChanger" when I want to move forward or backward a page.

OnPageIndexChanged="myDataGrid_PageChanger"

These following lines (from above) put an EDIT button and a DELETE button in each row.

<asp:ButtonColumn Text="Edit"
CommandName="Edit"></asp:ButtonColumn>
<asp:ButtonColumn Text="Delete"
CommandName="Delete"></asp:ButtonColumn>

This following line (from above) calls a procedure named "myDataGrid_ItemCommand" when one of the above buttons is clicked.

OnItemCommand="myDataGrid_ItemCommand"


The following code is entered in the code-behind page in the page_load procedure. This is where I determine which table I'm working with and refresh the DataGrid accordingly.

 
    If Page.IsPostBack = False Then
         Me.lblPageTitle.Text = Request.QueryString("Table")
         RefreshGrid()
         Exit Sub
    End If

The following procedure is entered in the code-behind file to refresh the DataGrid. Note how the SQL syntax changes depending on which table I'm working with.

    Private Sub RefreshGrid()
        Dim strConnect As String = GetConnectString()
        Dim strSQL As String

        Select Case Trim$(lblPageTitle.Text)
    
            Case "Action Types"
                strSQL = "Select ActionType_ID as ID, ActionType_Desc
as Description"
                strSQL = strSQL & " FROM dbv_ActionType ORDER BY
ActionType_Desc"

            Case "Date Types"
                strSQL = "Select DateType_ID AS ID, DateType_Desc as
Description"
                strSQL = strSQL & " FROM dbv_DateType ORDER BY DateType_Desc"
   
        End Select

        Dim Conn As New SqlConnection(strConnect)
        Dim AdapterDockets As SqlDataAdapter
        Dim DataSetDockets As DataSet
        Conn.Open()
        AdapterDockets = New SqlDataAdapter(strSQL, Conn)
        DataSetDockets = New DataSet()
        AdapterDockets.Fill(DataSetDockets)
        myDataGrid.DataSource = DataSetDockets
        myDataGrid.DataBind()

    End Sub

The following procedure is called when you move forward or backward a page.

    Sub myDataGrid_PageChanger(ByVal Source As Object, ByVal E As
DataGridPageChangedEventArgs)
        myDataGrid.CurrentPageIndex = E.NewPageIndex
        RefreshGrid()
    End Sub


The following procedure is called when you click one of the command buttons in the DataGrid. Notice how I determine which button was clicked and how I pick out the Row_ID that I want to edit or delete.

    Sub myDataGrid_ItemCommand(ByVal s As Object, ByVal e As
DataGridCommandEventArgs)
    
        If e.CommandName = "Edit" Then
            Dim itemCell As TableCell = e.Item.Cells(0)
            Dim ID As Integer = Val(itemCell.Text)
            EditRecord(ID)
        End If

        If e.CommandName = "Delete" Then
            Dim itemCell As TableCell = e.Item.Cells(0)
            Dim ID As Integer = Val(itemCell.Text)
            DeleteRecord(ID)
        End If

    End Sub

Finally, there is one more procedure I'll show which is the EditRecord procedure. I'm not showing the DeleteRecord procedure because it is not relevant to this article. This is the code that redirects you to the appropriate detail form. By passing the database row in the call, you can write code in the detail form to fill the form from the database.

    Private Sub EditRecord(ByVal ID As Integer)

        Select Case Trim$(lblPageTitle.Text)
            
            Case "Action Types"
                Response.Redirect("AddActionType.aspx?ActionType_ID=" & ID)

            Case "Date Types"
                Response.Redirect("AddDateType.aspx?DateType_ID=" & ID)

        End Select

    End Sub

Conclusion
I've demonstrated how we can have a form with a DataGrid control that can be used generically for several database tables. The control will contain an EDIT button in each row. When you click the EDIT button, the program selects the appropriate detail form and opens it (passing in the row_id so that the detail form can be populated from the database.)

If you have any comments, corrections or other ideas, you can e-mail me at RogerMcCook@hotmail.com.

Roger D. McCook
McCook Software, Inc.

Dig Deeper on .NET Architecture Best Practices

Start the conversation

Send me notifications when other members comment.

Please create a username to comment.

-ADS BY GOOGLE

SearchCloudComputing

SearchSoftwareQuality

TheServerSide.com

Close