Display image gallery in ASP.NET GridView Control

In this article I will try to explain you how you can display images as a gallery view using GridView control of ASP.NET.

I face problem of paging when I had tried it with DataList control. In DataList we can de$ne repeat column direction to display images as

gallery. But main problem is paging, and you have to use third party control to apply paging in DataList and it is di'cult to manage with

third party control.

But here I have taken GridView control to display image gallery. With use of internal paging. So we can done all operation very simply on

GridView control.

Lets Start.

1. Code for ASPX page is as follow

<HeaderStyle CssClass="dispnone" />

<ItemTemplate>

<table width="100%">

<tr>

<td class="bdr-grey">

<table width="100%" border="0" cellspacing="0" cellpadding="0" Class="griditem" >

<tr>

<td width="60px" height="60px" Class="griditem" >

<%#Container.DataItem("Column1")%>

</td>

<td width="60px" height="60px" Class="griditem" >

<%#Container.DataItem("Column4")%>

</td>

</tr>

</table>

</td>

</tr>

</table>

</ItemTemplate>

</asp:TemplateField>

paging in this gallery view. This GridView will display 40 records on each page. Here I have set pageSize=10 so it has $x page size to

display records only 40*10=400. You can change it as per your requirement.

Paging mode is numeric and page number will display on Top and Bottom of the GridView.

First column is 4 static column noted with bold face.

Now look at <%#Container.DataItem("Column1")%>, <%#Container.DataItem("Column2")%>, <

%#Container.DataItem("Column3")%>, <%#Container.DataItem("Column4")%>.

These columns I have de$ne are not related to Database Table columns. The data will $llup in this column from code behind.

Because I face problem to display images as repeat column manner. This is possible in DataList only to display record in repeat column

direction. But here in GridView Control it is not possible. And same in DataList control internal paging is not possible.

2.Code behind operations.

If Not IsPostBack Then

'To set page nuber after redirecting back from detail page

If Request.QueryString("iPn") <> Nothing Or IsNumeric(Request.QueryString("iPn")) Then

gvListProperty.PageIndex = CInt(Request.QueryString("iPn"))

End If

' Call function that retrieve records from database

Call BindPropertyGallery()

End If

dsProperty = .Galleryview_PropertyList()

If dsProperty.Tables(0).Rows.Count > 0 Then

'Integrate this record with DataTable and then bind it with GridView

Call DataTableBind(dsProperty)

End If

End With

End Sub

Galleryview_PropertyList() function is written in class $le propertyforSale.vb. This function will retrive records and return DataSet.

Function DataTableBind will bind this records with gridview columns.