Displaying gridview with 3 columns

Question

I have a gallery which holds a large number of thumbnail images and I want to show 6 at a time.

I have this working using the code below, but I can not get the images to display as 2 rows of 3 - it shows as 6 rows of 1.

I can get the desired result by using a datalist but that stops the pageindex function from working.

I'm sure there's an easy solution but I can't figure it out.

<asp:GridView id="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="True" PageSize="6" onpageindexchanging="PageIndexChanged" PagerSettings-Mode="NextPrevious" PagerSettings-NextPageText="Next"  PagerSettings-PreviousPageText="Previous">
    <Columns>
        <asp:TemplateField>
            <itemtemplate>
                <asp:Image ID="Image2" runat="server" ImageUrl='<%# Eval("userID", "/imageUpload/Handler.ashx?userID={0}&image=2")%>' ></asp:Image>
            </itemtemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

score 1 · Accepted Answer · answered Sep 01 '11 at 16:33

1

You want to use a ListView.. Look at MSDN here: http://msdn.microsoft.com/en-us/library/bb398790.aspx Most particularly the GROUPING option.

answered Sep 01 '11 at 16:33

cgcarter1

327
1
8

score 0 · Answer 2 · answered Sep 01 '11 at 17:07

You might want to consider using a simple asp.net repeater control, and render your items as DIVs. You can use CSS "float" directive to cause your DIVs to automatically "wrap" within their container, to efficiently fit the space (very similar to the way text "wraps" within a text box when it reaches the end of the line).

Because they wrap dynamically, float'd DIVs can be a little more user-friendly: if your user has a wide high-resolution screen, maybe the images render as a 1x6 row. If your user shrinks their browser window, the DIVs will automatically re-arrange themselves into a 3x2 grid.

You wouldn't get data-paging behavior for free, but it's not difficult to implement on its own.

score 0 · Answer 3 · answered Sep 01 '11 at 17:24

You'd probably be happier with a different control (repeater, etc.)... Gridviews are limited in that they match your datasource row-for-row.

If you have to do this in a gridview for some reason, one option would be to modify the SELECT in your data source so that it put your images into 3 columns. You might be able to do that with a pivot and rownumber() function, or other ways. Once you did that, you'd modify your grideview (copy your template column two more times).

Displaying gridview with 3 columns

3 Answers3