1

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; 
    }
}
Improve this question

4 Answers 4

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

example? I am not familiar with a repeater. I understand what you are saying but don't exactly know how to implement it?
How are you storing your images? binary or just by there locations?
1

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.

Improve this answer

2 Comments

Possible example, I mean I am not familiar with the attributes of most of these controls...kind of a noob.
Excellent thank you! I am going to try and get this going right away. I too like to binding and such in the code behind as well...just makes more sense to me. It is also easier to understand what is going on.
1

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.

Improve this answer

Comments

0

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.

Improve this answer

1 Comment

This would be so very, very good if there were a tiny bit of code showing me how to do this. If my grid were a DataGrid control called GridView1 and I wanted to display the image located at ~/images/image1.png in Column 1, for example.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.