CODEWITHSUNDEEP
asp.netgridview
David Hodgson
David Hodgson

Reputation: 10344

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

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?

Upvotes: 1

Views: 3662

Answers (3)

DhyanaRam
DhyanaRam

Reputation: 23

    Protected void Page_Load(object sender, EventArgs e)
    {
        DataTable table = new DataTable();
        table.Columns.Add("DataList", typeof(DataList));
        DataRow dr = table.NewRow();
        table.Rows.Add(dr);
       GridView1.DataSource = table;
        GridView1.DataBind();

    }

    ICollection CreateDataSource()
    {
        string imageLocation = "~/text.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;
    }

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            DataList dataList1 = e.Row.FindControl("DataList1") as DataList;
            dataList1.DataSource = CreateDataSource();
            dataList1.DataBind();
        }
    } 


    <asp:GridView ID="GridView1" runat="server" 
       onrowdatabound="GridView1_RowDataBound" AutoGenerateColumns="false"> 
      <Columns> 
        <asp:TemplateField> 
            <ItemTemplate> 
                <asp:DataList ID="DataList1" RepeatColumns="5" runat="server"> 
                    <ItemTemplate>      
                        <asp:Image ID="img" runat="server" 
                             ImageUrl='<%# DataBinder.Eval         
                               (Container.DataItem, "ImageURL") %>'  />
                    </ItemTemplate> 
                </asp:DataList> 
            </ItemTemplate> 
        </asp:TemplateField> 
    </Columns> 
</asp:GridView>

Upvotes: 1

Tigran
Tigran

Reputation: 882

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

Upvotes: 0

Steve
Steve

Reputation: 5952

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.

Upvotes: 1

Related Questions