Remove image when exporting gridview to excel

Question

I have a parent grid-view that has plus/minus image to enable to expand parent grid-view to see nested grid-view.

The issue i have is when i export grid-view to excel the image of plus/minus shows as blank image in excel file

is there any way to clear or remove plus/minus image from excel file

Exporting Code

protected void btnExportExcel_Click(object sender, ImageClickEventArgs e)
{

    GridSales.DataSource = q.Salesdetails();
    GridSales.DataBind();
    System.Web.HttpContext curContext = System.Web.HttpContext.Current;
    System.IO.StringWriter strWriter = null;
    System.Web.UI.HtmlTextWriter htmlWriter = null;
    curContext.Response.Clear();
    curContext.Response.Buffer = true;
    curContext.Response.AddHeader("content-disposition", "attachment; filename=" + System.Web.HttpUtility.UrlEncode("SalesReport", System.Text.Encoding.UTF8) + ".xls");
    curContext.Response.ContentType = "application/vnd.ms-excel";
    curContext.Response.Write("<meta http-equiv=Content-Type content=text/html;charset=UTF-8>");
    strWriter = new System.IO.StringWriter();
    htmlWriter = new System.Web.UI.HtmlTextWriter(strWriter);
    this.ClearControls(GridSales);
    GridSales.RenderControl(htmlWriter);
    curContext.Response.Write(strWriter.ToString());
    curContext.Response.End();
}

Aspx Code

<asp:GridView ID="GridSales" runat="server" CssClass="table table-bordered">
            <Columns>
                <asp:TemplateField HeaderText="Preview">
                    <ItemTemplate>
                        <img alt="" style="cursor: pointer" src="../Images/plus.png" />
                        <asp:Panel ID="pnlproducts" runat="server" Style="display: none">
                            <asp:GridView ID="gvProducts" runat="server"  CssClass="table table-bordered">
                                <Columns>
                                </Columns>
                            </asp:GridView>
                        </asp:Panel>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
</asp:GridView>

JavaScript Code

<script type="text/javascript">
$("[src*=plus]").live("click", function () {
    $(this).closest("tr").after("<tr><td></td><td colspan = '9'>" + $(this).next().html() + "</td></tr>")
    $(this).attr("src", "../Images/minus.png");
});
$("[src*=minus]").live("click", function () {
    $(this).attr("src", "../Images/plus.png");
    $(this).closest("tr").next().remove();
});

Answer 1

If you replace the img element by an Image WebControl:

<ItemTemplate>
    <asp:Image ID="imgPlus" runat="server" AlternateText="" ImageUrl="../Images/plus.png" style="cursor: pointer" />
    <asp:Panel ID="pnlproducts" runat="server" Style="display: none">
        <asp:GridView ID="gvProducts" runat="server"  CssClass="table table-bordered">
            <Columns>
            </Columns>
        </asp:GridView>
    </asp:Panel>
</ItemTemplate>

It can be done this way:

foreach (GridViewRow row in GridSales.Rows)
{
    foreach (TableCell cell in row.Cells)
    {
        for (int i = cell.Controls.Count - 1; i >= 0; i--)
        {
            if (cell.Controls[i] is Image)
            {
                Image img = cell.Controls[i] as Image;

                // In case you have other images that you want to keep
                if (img.ID == "imgPlus") 
                {
                    cell.Controls.RemoveAt(i);
                }
            }
        }
    }
}