asp.net gridview - spread bound data across multi lines per row with updatepanel

Question

I have a panel inside a gridview and I need it to be 'spread' for the width of the row :

never mind what's in the panel. What I show here is just to demo my needs...My HTML:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False"
    CellPadding="3"
    CssClass="myGrid"
    DataKeyNames="Role_Name">
    <AlternatingRowStyle BackColor="#E6E6E6" />
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:ImageButton ID="imgShow" runat="server" OnClick="Show_Hide_details" BorderStyle="None" BackColor="Transparent" ImageUrl="~/Content/Images/Arrow_Down.png"
                CommandArgument="Show" />
                <asp:Panel ID="pnlRole" runat="server" Style="position: relative;" Visible="false">
                    <asp:Label ID="lblAAA" runat="server" Text="aaa" /><br />
                    <asp:Label ID="lblBBB" runat="server" Text="bbb" /><br />
                    <asp:Label ID="lblCCC" runat="server" Text="ccc" /><br />
                    <asp:Label ID="lblDDD" runat="server" Text="ddd" /><br />
                </asp:Panel>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Role_Name" HeaderText="Name">
            <HeaderStyle Width="100px" />
            <ItemStyle CssClass="myGridItemMaxWidth" HorizontalAlign="Left" Wrap="false" />
        </asp:BoundField>
        <asp:BoundField DataField="Role_Description" HeaderText="Description">
            <HeaderStyle Width="150px" />
            <ItemStyle CssClass="myGridItemMaxWidth" HorizontalAlign="Left" Wrap="false" />
        </asp:BoundField>
    </Columns>
    <HeaderStyle CssClass="myGridHeader" />
    <RowStyle ForeColor="#000066" />
</asp:GridView>

I'd appreciate any help/idea/solution.

EDIT :
To better explain my problem, here's another image :

(never mind what's in the panel. What I show here is just to demo my needs...)

Answer 1

Here is what I came up with -
On the left is the GridView when all rows are 'closed'. On the right, after 'opening' 2 rows:

Markup:

<form id="form1" runat="server" style="">
    <asp:ScriptManager runat="server"></asp:ScriptManager>
    <table runat="server" style="font-weight: bold; margin: 0 auto; font-family: Arial;">
        <tr>
            <td style="text-align: center; width: 500px; overflow: hidden">
                <asp:GridView ID="grv_Four_Rows" runat="server"
                    AutoGenerateColumns="False" BackColor="black" GridLines="None"
                    CellPadding="3" CssClass="myGrid" DataKeyNames="Test1_First_Name">
                    <HeaderStyle CssClass="myGridHeader" />
                    <RowStyle BackColor="#b5c7de" />
                    <AlternatingRowStyle BackColor="#d1e0e0" />
                    <Columns>
                        <asp:TemplateField>
                            <ItemStyle HorizontalAlign="Left" />
                            <HeaderTemplate>
                                <table>
                                    <tr>
                                        <td style="width: 150px;">First</td>
                                        <td style="width: 150px;">Last</td>
                                    </tr>
                                </table>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <table>
                                    <td>
                                        <asp:UpdatePanel ID="upp_Main_Row" runat="server">
                                            <ContentTemplate>
                                                <asp:Panel runat="server">
                                                    <td>
                                                        <asp:ImageButton ID="imgShow" runat="server" OnClick="Show_Hide_details"
                                                            ImageUrl="~/Content/Images/Arrow_Down.png" CommandArgument="Show" />&nbsp;
                                                    </td>
                                                    <td style="width: 150px"><%# Eval("Test1_First_Name")%></td>
                                                    <td style="width: 150px"><%# Eval("Test1_Last_Name")%></td>
                                                </asp:Panel>
                                            </ContentTemplate>
                                        </asp:UpdatePanel>
                                    </td>
                                </table>

                                <table style="border-style: solid; border-width: thin; width: 100%">
                                    <asp:UpdatePanel ID="upp_2nd_row" runat="server" Visible="false">
                                        <ContentTemplate>
                                            <tr>
                                                <td>
                                                    <a style="color: red">Address: </a><%# Eval("Test1_Address")%>
                                                </td>
                                            </tr>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                    <asp:UpdatePanel ID="upp_3rd_row" runat="server" Visible="false">
                                        <ContentTemplate>
                                            <tr>
                                                <td>
                                                    <a style="color: red;">Description: </a><%#Eval("Test1_Description")%>
                                                </td>
                                            </tr>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                    <asp:UpdatePanel ID="upp_4th_row" runat="server" Visible="false">
                                        <ContentTemplate>
                                            <tr style="float: left">
                                                <td>
                                                    <a style="color: red">Note1: </a><%#Eval("Test1_Note_1")%>&nbsp;&nbsp;
                                                    <a style="color: red">Note2: </a><%#Eval("Test1_Note_2")%>
                                                </td>
                                            </tr>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                </table>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </td>
        </tr>
    </table>
</form>
<style type="text/css">
    .myGrid {
        border: 1px solid black;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        overflow: hidden;
        background-color: white;
        text-align: center;
        margin: 0 auto;
    }

    .myGridHeader > th {
        text-align: center;
        border: solid 1px;
        font-family: Arial;
        background-color: #DDFFD6;
        font-weight: bold;
        color: #000066;
    }
</style>  

C# code-behind:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            load_grv_Four_Rows();
        }
    }
    //================================================================================================
    protected void Show_Hide_details(object sender, EventArgs e)
    {
        ImageButton imgShowHide = sender as ImageButton;
        GridViewRow row = imgShowHide.NamingContainer as GridViewRow;
        if (imgShowHide.CommandArgument == "Show")
        {
            row.FindControl("upp_2nd_Row").Visible = true;
            row.FindControl("upp_3rd_Row").Visible = true;
            row.FindControl("upp_4th_Row").Visible = true;
            imgShowHide.CommandArgument = "Hide";
            imgShowHide.ImageUrl = "~/Content/Images/Arrow_Up.png";
        }
        else
        {
            row.FindControl("upp_2nd_Row").Visible = false;
            row.FindControl("upp_3rd_Row").Visible = false;
            row.FindControl("upp_4th_Row").Visible = false;
            imgShowHide.CommandArgument = "Show";
            imgShowHide.ImageUrl = "~/Content/Images/Arrow_Down.png";
        }
    }
    //================================================================================================
    private void load_grv_Four_Rows()
    {
        try
        {
            SqlConnection con;
            DataSet ds;
            con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["BETSEFER_DB"].ConnectionString);
            string CmdString = "SELECT * FROM tbl_Test1 ORDER BY Test1_First_Name";
            ds = new DataSet();
            using (SqlDataAdapter sda = new SqlDataAdapter(CmdString, con))
            {
                sda.Fill(ds);
                if (ds.Tables.Count > 0)
                {
                    DataView dv = ds.Tables[0].DefaultView;
                    grv_Four_Rows.DataSource = dv;
                    grv_Four_Rows.DataBind();
                }
            }
        }
        catch (SqlException ex)
        {
            Session["mySQL_Error_Msg"] = ex.Message;
            Server.ClearError();
            Response.Redirect("~/Errors.aspx");
        }
    }
    //================================================================================================

The table:

I still have lots of formatting and cosmetic issues but for those I'll open a new post.
Hope it helps someone.