ASP.NET: dynamically adding a matrix of images to each row of a Gridview

Question

Hi,

I'd like to dynamically add a matrix of images to each row of a GridView. Suppose I wanted a 5 x 5 matrix of the same image per row, and the path is:

public static string PASS = "./Images/pass.png";

Also suppose that it's a Gridview within a Gridview (I'm not sure if the inner Gridview is the right control to use):

<asp:GridView ID="GridView1" runat="server">
        <Columns>
            <asp:TemplateField>
                <asp:ItemTemplate>
                    <asp:GridView ID="GridView2" runat="server">
                    </asp:GridView>
                </asp:ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

How can I dynamically add each matrix to each row?

EDIT:

Ok, here's a first attempt using Steve's answer, and loosely following http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.datalist.items.aspx as a model. I'm confused about how to dynamically add a DataList inside a GridView, as well as how (and when) to do the data binding.

protected void Page_Load(object sender, EventArgs e)
    {
        DataTable table = new DataTable();
        table.Columns.Add("DataList", typeof(DataList));

        for (int i = 0; i < 4; i++)
        {
            DataRow dr = table.NewRow();
            DataList1.DataSource = CreateDataSource();
            DataList1.DataBind();
            table.Rows.Add(dr);
        }
        GridView1.DataSource = table;
        GridView1.DataBind();

    }

    ICollection CreateDataSource()
    {
        string imageLocation = "./Images/311.jpg";
        DataTable dt = new DataTable();
        DataRow dr;

        dt.Columns.Add(new DataColumn("ImageURL", typeof(string)));

        for (int i = 0; i < 25; i++)
        {
            dr = dt.NewRow();
            dr[0] = imageLocation;
            dt.Rows.Add(dr);
        }

        DataView dv = new DataView(dt);
        return dv;
    }

<form id="form1" runat="server">
<div>
    <asp:GridView ID="GridView1" runat="server">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:DataList ID="DataList1" RepeatColumns="5" runat="server">
                        <ItemTemplate>     
                           <img src="<%# DataBinder.Eval(Container.DataItem, "ImageURL") %> />    
                        </ItemTemplate>
                    </asp:DataList>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

</div>
</form>

The particular exception I get is:

The data source for GridView with id 'GridView1' did not have any properties or attributes from which to generate columns. Ensure that your data source has content.

Where am I going wrong?

Answer 1

How about using a datalist instead? Create a generic collection list of string, add 25 "./Images/pass.png" and bind it to the datalist.

In the item template, you have this:

Edit (changed eval to container)

<asp:DataList ID="DataList1" RepeatColumns="5" runat="server">
    <ItemTemplate>
        <img src="<%# Container.DataItem %>" />
    </ItemTemplate>
</asp:DataList>

There's probably a faster way to get 25 instances of the string into the collection or better way to represent it, but I can't think of one now.

Answer 2

Does it have to be a gridview. Why can't it be an asp:table?