Member Avatar for vijeevvv

Hi,

I have a gridview in asp.net. Inside that I have a template field control(Link button named "Details" in all the rows). When I click that link button the details of that particular row should be displayed.

Say suppose three records are there. When I click the link button in the first row I need to get that details displayed right below the first row itself.

So I need to expand the row of my gridview. Similarly the second row details below the 2nd row and so on. No idea of how to implement it.

Someone help.

And one more thing, when I click the link button again I need to hide the details.

I'm using asp.net C# and ms-access DB. .

  • 1 Contributor
  • 1 Reply
  • 131 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by vijeevvv

Dani AI

Generated

Good find, — the nested GridView article is a solid reference. For a simple expand/collapse that shows details directly under the clicked row, two practical patterns work well: (A) put a hidden details Panel inside the row and toggle its visibility, or (B) insert a new full-width GridViewRow (a detail row) under the clicked row and populate it on demand. Pattern A is easiest to implement and usually faster for read-only details.

Recommended minimal workflow (server-side, easy to maintain):

  • Add a TemplateField with the LinkButton (CommandName e.g. "Toggle") and a Panel (initially Visible="false") that holds the details controls.
  • In RowCommand find the clicked row (use CommandArgument or DataKeys), toggle the Panel, and — if details are heavy — load data for that Panel on demand by key.
  • Preserve expanded state across postbacks by storing the expanded row index or key in ViewState (and restoring it in RowDataBound). Avoid re-binding the GridView on every postback unless necessary; re-binding will collapse the expanded row.

Client-side alternative:

  • Render the details block hidden and toggle with jQuery to avoid any postback, or call a WebMethod/AJAX endpoint to fetch details HTML and inject it below the row. Use ARIA attributes for accessibility when you toggle visibility.

Common pitfalls and quick fixes:

  • Panel always collapses after postback: stop unconditional rebinds or restore the Panel visibility in RowDataBound using stored state.
  • FindControl returns null: ensure you use the correct NamingContainer (use e.Row.FindControl or GridView.Rows[index].FindControl).
  • Want a smooth UX without full page refresh: use an UpdatePanel or client-side AJAX.

Example skeleton (markup and code-behind) to illustrate the toggle approach:

<asp:TemplateField>
  <ItemTemplate>
    <asp:LinkButton ID="lnkDetails" runat="server" CommandName="Toggle"
      CommandArgument='<%# Container.DataItemIndex %>' Text="Details" />
    <asp:Panel ID="pnlDetails" runat="server" Visible="false">
      <!-- details controls go here -->
    </asp:Panel>
  </ItemTemplate>
</asp:TemplateField>
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
  if (e.CommandName == "Toggle")
  {
    int idx = Convert.ToInt32(e.CommandArgument);
    GridViewRow row = GridView1.Rows[idx];
    Panel p = (Panel)row.FindControl("pnlDetails");
    p.Visible = !p.Visible;
    ViewState["ExpandedRow"] = p.Visible ? idx : -1;
  }
}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
  if (e.Row.RowType == DataControlRowType.DataRow)
  {
    int idx = ViewState["ExpandedRow"] != null ? (int)ViewState["ExpandedRow"] : -1;
    Panel p = (Panel)e.Row.FindControl("pnlDetails");
    if (p != null) p.Visible = (e.Row.RowIndex == idx);
  }
}

This approach keeps the UI simple and gives a clean path to add on-demand data loading, client-side enhancements, or nested grids if you later need editable details.

Member Avatar for vijeevvv

I myself found a similar article here in this site...


Have a look at this article: Editable Nested GridView (All-in-One)[^]

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.