Add row below each row in ASP.Net GridView using C# and VB.Net

Hi kankon,

You need to make use of GridView OnRowCreated event handler and add a cell with the notes column value.

Refer below sample code.

HTML

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <style>
        .Pending-status { background-color: #FFC107; }
        .Approved-status { background-color: #67f545; }
        .Rejected-status { background-color: #f54444; }
        .container { max-width: 800px; margin: 0 auto; padding: 20px; }
        .rtl { direction: rtl; text-align: right; font-family: 'Sultan Medium'; font-size: large; }
        .mt-5 { margin-top: 5px; }
        .mb-3 { margin-bottom: 3px; }
        .mt-4 { margin-top: 4px; }
        .table { width: 100%; border-collapse: collapse; }
        .table th,
        .table td { padding: 8px; border: 1px solid #ddd; text-align: center; vertical-align: middle; /* Ensure text is vertically centered */ }
        .btn-primary { background-color: #007bff; color: #fff; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; text-decoration: none; }
        .btn-primary:hover { background-color: #0056b3; }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div class="container">
        <h2 class="text-center mt-5 mb-3 rtl" style="font-family: 'Sultan Medium'; font-size: xx-large; font-weight: bold">متابعة صحيفة الإجراءات</h2>
        <div class="mt-4">
            <asp:GridView ID="gvReports" runat="server" CssClass="table table-striped table-bordered rtl" AutoGenerateColumns="false"
                OnRowCreated="OnRowCreated">
                <HeaderStyle HorizontalAlign="Center" />
                <Columns>
                    <asp:TemplateField HeaderText="N">
                        <HeaderStyle HorizontalAlign="Center" />
                        <ItemTemplate>
                            <asp:Label ID="lblRowNumber" runat="server" Text="<%# Container.DataItemIndex + 1 %>" Style="text-align: center;"></asp:Label>
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Date Order">
                        <ItemTemplate>
                            <%# Eval("date") %>
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Request type">
                        <ItemTemplate>
                            <asp:Label ID="lblOrderName" runat="server" Text='<%# Eval("ordername") %>'></asp:Label>
                            <br />
                            <br />
                            <asp:LinkButton ID="lnkDownload" runat="server" CommandArgument='<%# Eval("Id") %>' Text="تحميل" CssClass="btn btn-primary"></asp:LinkButton>
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Approv">
                        <ItemTemplate>
                            <asp:Label ID="lblStatus" runat="server" Text='<%# Eval("Status") %>'></asp:Label>
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </div>
</asp:Content>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("Id");
        dt.Columns.Add("Status");
        dt.Columns.Add("notes");
        dt.Columns.Add("ordername");
        dt.Columns.Add("date");
        dt.Rows.Add(1, "Approve 1", "Nothing Yet", "Type 1", DateTime.Now.ToString());
        dt.Rows.Add(2, "Approve 2", "Please come back to minstry", "Type 2", DateTime.Now.ToString());
        dt.Rows.Add(3, "Approve 3", "No Paper uploaded", "Type 3", DateTime.Now.ToString());
        gvReports.DataSource = dt;
        gvReports.DataBind();
    }
}

protected void OnRowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        if (e.Row.RowIndex > 0)
        {
            DataTable dt = (e.Row.DataItem as DataRowView).DataView.Table;
            string note = dt.Rows[e.Row.RowIndex]["notes"].ToString();
            this.AddTotalRow("", note);
        }
    }
}

private void AddTotalRow(string labelText, string value)
{
    GridViewRow row = new GridViewRow(0, 0, DataControlRowType.DataRow, DataControlRowState.Normal);
    row.Cells.AddRange(new TableCell[] { new TableCell { Text = value } });
    row.Cells[0].Attributes["colspan"] = "5";
    row.Cells[0].Attributes["style"] = "text-align: right";
    gvReports.Controls[0].Controls.Add(row);
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.Add("Id")
        dt.Columns.Add("Status")
        dt.Columns.Add("notes")
        dt.Columns.Add("ordername")
        dt.Columns.Add("date")
        dt.Rows.Add(1, "Approve 1", "Nothing Yet", "Type 1", DateTime.Now.ToString())
        dt.Rows.Add(2, "Approve 2", "Please come back to minstry", "Type 2", DateTime.Now.ToString())
        dt.Rows.Add(3, "Approve 3", "No Paper uploaded", "Type 3", DateTime.Now.ToString())
        gvReports.DataSource = dt
        gvReports.DataBind()
    End If
End Sub

Protected Sub OnRowCreated(sender As Object, e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then

        If e.Row.RowIndex > 0 Then
            Dim dt As DataTable = (TryCast(e.Row.DataItem, DataRowView)).DataView.Table
            Dim note As String = dt.Rows(e.Row.RowIndex)("notes").ToString()
            Me.AddTotalRow("", note)
        End If
    End If
End Sub

Private Sub AddTotalRow(labelText As String, value As String)
    Dim row As GridViewRow = New GridViewRow(0, 0, DataControlRowType.DataRow, DataControlRowState.Normal)
    row.Cells.AddRange(New TableCell() {New TableCell With {.Text = value}})
    row.Cells(0).Attributes("colspan") = "5"
    row.Cells(0).Attributes("style") = "text-align: right"
    gvReports.Controls(0).Controls.Add(row)
End Sub

Screenshot