How to enhance the Drill Down feature in the GridView?

See more:

C#

ASP.NET

I am a new ASP.NET developer and I am trying to develop a GridView with Drill-Down Feature. I am following the steps in the following post in the CodeProject but I failed and I don't know how to fix it.

In my case, I have two tables:

**Course Table: CourseID, CourseName, GroupID**

**Group Table: GroupID GroupName**

(The first attribute in each table is the primary key)

I want to show the second table in the GridView and when the user clicks on the search icon image, the information in the first table will be displayed. So HOW TO DO THAT?

My ASP.NET:

<div align="center">


                <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"
                    DataKeyNames="CourseID" DataSourceID="SqlDataSource1">
                    <Columns>
                        <asp:TemplateField HeaderText="Item Details">
                            <ItemTemplate>
                                <table>
                                    <tr>
                                        <td>
                                            <img src="images/system-search-md.png" alt="click here to see details"
                                                 onclick='ToggleDisplay(<%# Eval("GroupID") %>);' style="cursor:pointer; height:15px; width:15px" />
                                        </td>
                                        <td<>
                                            <p><%# Eval("CourseID") %></p>
                                        </td>
                                        <td>
                                            <a href="Group.aspx?id=<%# Eval("CourseID") %>"><%# Eval("CourseName") %> </a>
                                        </td>
                                        <td>
                                            <%# Eval("CourseName") %>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td colspan="4">
                                            <div id'coldiv<%# Eval("GroupID") %>' style="display:none;">
                                                <asp:Literal runnat="server" ID="ltrl" Text='<%# Eval("GroupName") %>'></asp:Literal>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

                <script language="JavaScript">
                    function ToggleDisplay(id) {
                        var elem = document.getElementById('coldiv' + id);
                        if (elem) {
                            if (elem.style.display != 'block') {
                                elem.style.display = 'block';
                                elem.style.visibility = 'visible';
                            }
                            else {
                                elem.style.display = 'none';
                                elem.style.visibility = 'hidden';
                            }
                        }
                    }
</script>

                <asp:SqlDataSource ID="SqlDataSource1" runat="server"
                    ConnectionString="<%$ ConnectionStrings:testConnectionString %>"
                    SelectCommand="SELECT     dbo.groups.*, dbo.courses.*
                                    FROM         dbo.courses INNER JOIN
                                    dbo.groups ON dbo.courses.GroupID = dbo.groups.ID"></asp:SqlDataSource>
            </div>