display image in gridview c# asp.net

Question

I'm trying to display an image in a gridview, I saw other answers and tried them but they don't seem to work for my method. i fill the gridview using this method i found on aspsnippets. my code was modified to fill the gridview from my mongoDB database, which it does, but only with text, this is just a snippet of my code, sorry if it wasn't enough to understand what I'm doing. anywhere it says "text" is unimportant, just a column that already fills properly.

<asp:GridView ID="GridMultiD" runat="server"
    AutoGenerateColumns = "false" Font-Names = "Arial"
    Font-Size = "11pt" AlternatingRowStyle-BackColor = "#C2D69B" 
    HeaderStyle-BackColor = "green" AllowPaging ="true"  
    PageSize = "10" Caption = "Multi-Dimensional Array" >
  <Columns>
    <asp:BoundField ItemStyle-Width = "150px"
    DataField = "Name" HeaderText = "Name" />
    <asp:BoundField ItemStyle-Width = "150px"
    DataField = "Age" HeaderText = "Age" />
    <asp:BoundField ItemStyle-Width = "150px"
     DataField = "City" HeaderText = "City" />
    <asp:BoundField ItemStyle-Width = "150px"
    DataField = "Country" HeaderText = "Country" />
  </Columns>
</asp:GridView>

C# code

string[,] arrMultiD = {
                    { "John", "21", "Berlin", "Germany" },
                    { "Smith", "33" ,"London", "UK"},
                    { "Ryder", "15" ,"Sydney", "Australia"},
                    { "Jake", "18", "Tokyo", "Japan"},
                    { "Tom","34" , "Mumbai", "India"}
                 };
DataTable dt = new DataTable();
dt.Columns.Add("Name", Type.GetType("System.String"));
dt.Columns.Add("Age", Type.GetType("System.String"));
dt.Columns.Add("City", Type.GetType("System.String"));
dt.Columns.Add("Country", Type.GetType("System.String"));    
for (int i = 0; i < 5; i++)
{
    dt.Rows.Add();
    dt.Rows[dt.Rows.Count - 1]["Name"] = arrMultiD[i, 0];
    dt.Rows[dt.Rows.Count - 1]["Age"] = arrMultiD[i, 1];
    dt.Rows[dt.Rows.Count - 1]["City"] = arrMultiD[i, 2];
    dt.Rows[dt.Rows.Count - 1]["Country"] = arrMultiD[i, 3];  
}
GridMultiD.DataSource = dt;
GridMultiD.DataBind(); 

which i modified to fill text in some columns, and what i would have hoped was an image in others. something like this

         DataTable dt = new DataTable();
            dt.Columns.Add("text");
            dt.Columns.Add("text");
            dt.Columns.Add("text");
            dt.Columns.Add("text");
            dt.Columns.Add("text");
            dt.Columns.Add("text");
            dt.Columns.Add("Trend1");
            dt.Columns.Add("text");
            dt.Columns.Add("Trend2");
            dt.Columns.Add("text");
            dt.Columns.Add("Trend3");
            dt.Columns.Add("text");
            dt.Columns.Add("text");
            dt.Columns.Add("Trend4");
            dt.Columns.Add("text");
            dt.Columns.Add("Trend5");
            dt.Columns.Add("text");
            dt.Columns.Add("Trend6");
            dt.Columns.Add("text");
            dt.Columns.Add("text");


            int counter = 0;
            foreach (string[] arr in verList)
            {
                dt.Rows.Add();
                if (arr[counter] == "↑")
                {
                    dt.Rows[dt.Rows.Count - 1]["Trend1"] = "<IMG SRC=\"up.jpg\" ALT=\"Up\">";
                }
                else if (arr[counter] == "↓")
                {
                    dt.Rows[dt.Rows.Count - 1]["Trend1"] = "<IMG SRC=\"down.jpg\" ALT=\"Down\">";
                }
                else
                    dt.Rows[dt.Rows.Count - 1]["Trend1"] = "<img src=\"NoChange.jpg\" alt=\"NoChange\" style=\"width:36px;height:36px;\">";
                counter++;
                if (arr[counter] == "↑")
                {
                    dt.Rows[dt.Rows.Count - 1]["Trend2"] = "<img src=\"up.jpg\" alt=\"Up\" style=\"width:36px;height:36px;\">";
                }
                else if (arr[counter] == "↓")
                {
                    dt.Rows[dt.Rows.Count - 1]["Trend2"] = "<img src=\"down.jpg\" alt=\"Down\" style=\"width:36px;height:36px;\">";
                }
                else
                    dt.Rows[dt.Rows.Count - 1]["Trend2"] = "<img src=\"NoChange.jpg\" alt=\"NoChange\" style=\"width:36px;height:36px;\">";
                counter++;
                counter = 0;
            }

            GridMultiD.PageSize = dt.Rows.Count;
            GridMultiD.DataSource = dt;
            GridMultiD.DataBind();

but I just get the HTML code as text in the gridview cell, though I've made sure the image is there so path is correct. I've tried other methods I found that solved some problems for others, but haven't for me. Any suggestions would be appreciated!

Answer 1

You can try to add a template field column to the gridview and add an Image control to this template, then Assign the path of your image to the Image controls property. I can't access the code right now but just google how to add template field column to gridview