Introduction

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 define 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 difficult 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.

Here we have taken Gridview control named by “gvListProperty”. In this GridView control I have taken one template column. So in that we can apply some formatting as we want to display.

You can also apply some CSS to table inside this template column. Here we have set AllowPaging=True. Because we need to use paging in this gallery view. This GridView will display 40 records on each page. Here I have set pageSize=10 so it has fix 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.

These columns I have define are not related to Database Table columns. The data will fillup 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.

Declaring object variable

Here you can simplify code by writing it in a region section. Declare object variable first in a code behind file. (before page load)

In a page load event I am calling function that will retrieve records form table.

Here is code for this function.

PublicSub BindPropertyGallery()
Dim dsProperty As DataSet
With objPropertyForSale
dsProperty = .Galleryview_PropertyList()
If dsProperty.Tables(0).Rows.Count > 0Then'Integrate this record with DataTable and then bind it with GridViewCall DataTableBind(dsProperty)
EndIfEndWithEndSub

Galleryview_PropertyList function is written in class file propertyforSale.vb. This function will retrive records and return DataSet.

Function DataTableBind will bind this records with gridview columns.Look below code that is written in propertyforSale.vb class file.

This is a sample code written in class file. I have created my own DBManager file, that is used for performing all DB operation. You can use DataAdepter or DataReader to do same in code behind file.

Classfile function Gallaryview_PropertyList() is returning value as DataSet. sSql is representing procedure name that used to retrive records. retVal dataset will return records back to codebehind file from where this function is called.

Now come back to code behind file operation.

Integrate this record with DataTable and then bind it with GridView

Read this code very carefully because all display and paging logic is dependent on this code. I face too much problem when writing code first time. It has taken too much time to write this simple code.

This is lengthy but very simple code.

Here I have used DataTable to insert each image in its 4 columns one by one. After 4 columns have data it will generate new row with new 4 columns and same way it rotating up to last record of the Dataset.

In a function DataTableBind I have passed a dataset with records. Here I have taken variable dtTable of type DataTable. As explain early. dtTable has 4 columns DataColumn("Column1") to DataColumn("Column4"). If you can’t getting why I have taken this then again look at column description of GridView control explain early on.

For <place w:st="on">Loop with iCount will run up to last record of the dataset.

Variable iCountIncre will get increment of value 40 at every 40 records so we can manage page number consistency. This is why because we have to pass current page number of browsed image gallery page to its detail page. And when returning back from detail page to gallery view at that time we have to maintain this page number.

Variable iColumn is used to maintain column consistency from column no.1 to 4. Because here we have to display 4 images at each row.

In this logic dtRow(“Column” & iColumn) will be like this dtRow(“Column1”) and upto dtRow(“Column4”).

So this dtRow has Column and that column value will display image in gallery because it call that image from path with image name from database table dsProperty.Tables(0).Rows(iCount).Item("sImageName").

And link on that image represent the link page name with iPn (page number), iPropertyID (because image is related to that property. It represent unique id of property).

ds.Tables.Add(dtTable)

And after that bind this table with dataset “ds”. And bind this dataset “ds” to GridView.

When user click on any page number it will call this event and code written inside this event will change the current page index and assign new page number to GridView and bind this GridView again with record. After binding GridView the page which you see it is of new assign page number.

One more thing I want to share with you that is I also got suggestion to bind this GridView in RowDataBound Event of the GridView. To bind this GridView in RowDataBound we have to take Record Dataset
either Public Variable or in a ViewState and then need to do some extra
operation then as I wrote in function DataTableBind(). So Dataset with
records in Public Variable or with ViewState will occupy more memory
compare to existing code memory usage. That's why I had let go that
concept.

I would like to say about your suggestion for RowDataBound. To bind this GridView in RowDataBound we have to take Record Dataset either Public Variable or in a ViewState and then need to same operation as I wrote in function DataTableBind(). So Dataset with records in Public Variable or with ViewState will occupy more memory compare to existing code memory usage. That's why I had let go that concept.