ASP.Net Display Images in a GridView span across columns and rows? Using C#

Question

I have some thumbnails I want to display in a Gridview. I am not familiar with all the customization that is offered. Basically I want to store the images in a Gridview, maybe spanning 5 columns wide...and then however many rows it takes to complete the rest. I don't want any column or row titles, and really don't want to see evidence of the actual grid. I also want to make the images clickable.

I will be pulling the images from an Sql database in Asp.net. I do not want to bind the grid to an sqldatasource, but rather stick the images in the grid with some sort of loop in the code behind the page. This is where it gets confusing to me. I know you can create a datatable and add columns and rows. However, it seems like the rows/columns do not span. How would you store the images so that it worked like a grid. I provided some (very)sudo code below to give you an idea of what I am trying to do.

sudo code:

colcount = 0;  
rowcount = 0;  
imagecount = 0;  
while(images.length > imagecount){  
    if(colcount < 5){  
        grid[rowcount][colcount] = images[imagecount];  
        colcount++;  
        imagecount++;  
    }  
    else{  
        rowcount++;
        colcount = 0; 
    }
}

Answer 1

Why don't you manually generate your grid?

Create a method in your codebehind that outputs the necessary HTML using Response.Write statements. In the .aspx page, use <% RenderGrid(); %> to call your method and display the appropriate grid.

Answer 2

For everything you've described here, your best bet would be to use the DataList control. You can specify how many columns wide you want things to be by using the RepeatColumns property and you an even eliminate any sense of "tableness" by setting the RepeatLayout property to "Flow."

This will also allow you to not worry about column counting and you could even bind a collection of images for binding.

EDIT: Since you requested an example, it would be as simple as this. First create your grid and make sure to have a placeholder for the image:

<asp:DataList ID="dlImages" runat="server" 
              RepeatColumns="5" 
              RepeatDirection="Horizontal" 
              RepeatLayout="Flow">

   <ItemTemplate>
      <asp:Image ID="imgPrettyPic" runat="server" />
   </ItemTemplate>

</asp:DataList>

Then in your code behind, all you would have to do is a simple data binding. I'm not sure how your images are stored, but for the sake of argument, let's say you had a database query that gave you the URLs to each image you wanted to display. Your page load would look something like this:

if (!Page.IsPostBack())
{

    dtImageURLs = GetImageUrlsFromDB();
    dlImages.DataSource = dtImageURLs;

    dlImages.DataBind();
}

Now this is where folks will differ on things. I prefer to do all my RowBinding type methods in code behind, as opposed to inline, so I then consume the RowDataBound event of my DataList and simply bind the URL property accordingly.

    protected void dlImages_ItemDataBound(object sender, System.Web.UI.WebControls.DataListItemEventArgs e)
   {

       Image TargetImage = default(Image);
       DataRow DataSourceRow = default(DataRow);

       DataSourceRow = ((System.Data.DataRowView)e.Item.DataItem).Row;
       TargetImage = (Image)e.Item.FindControl("imgPrettyPicture");

       TargetImage.ImageUrl = DataSourceRow.Item("ImageURL").ToString;
   }

...and that should get you up and running. Note you would need to change your DataSourceRow object to whatever type of item you were databinding from. I was using a DataRow since that is the most common scenario I usually encounter.

Answer 3

You could use a repeater... That would allow you to really define what each "Row" or "Column" looked like and whether they get repeated horizontally or vertically

Answer 4

If you want specific HTML, then you'll end up fighting the GridView in the entire time. Use a ListView or Repeater instead.

<asp:ListView runat="server">
   <LayoutTemplate>
      <table>
         <asp:PlaceHolder id="itemPlaceHolder" runat="server" />
       </table>
   </LayoutTemplate>
   <ItemTemplate>
          <tr>
             <td colspan="5"><asp:Image runat="server" src='<%# Eval("ImageUrl")' %></td>
             <td><%# Eval("Column1") %></td>
          </tr>
   </ItemTemplate>
 </asp:ListView>

I know you can create a datatable and add columns and rows. However, it seems like the rows/columns do not span.

It sounds like you're creating a System.Data.DataTable - which is a data structure - not a layout control. If you wanted to create the <table> programatically, you could use either System.Web.UI.WebControls.Table a System.Web.UI.HtmlControls.HtmlTable. You can set colspan and rowspan on the associated TableRow or HtmlTableRow on those.