Display Image In GridView

Riddhi Valecha

6y896.NET

Dear Team,

I need help in displaying images from folder to gridview rows.

I am sharing my code -

ASPX Page -

"server" CssClass="mytable mytable2" ID="gvdetail" AutoGenerateColumns="false" GridLines="None">
"Question" ItemStyle-Wrap="true" >
<%#Eval("Question")%>
"Answer" HeaderText="Answer" />
"Remark" ItemStyle-Wrap="true" >
<%#Eval("Remark")%>
"imgForReqid" runat="server" />

Code -

Protected Sub grdmis_RowCommand(sender As Object, e As GridViewCommandEventArgs) Handles grdmis.RowCommand
Try
Dim reqid As String = ""
Dim rowIndex As Integer = Convert.ToInt32(e.CommandArgument)
reqid = grdmis.DataKeys(rowIndex).Values("REQID")
If e.CommandName = "Select" Then
Dim sqldata As String = String.Empty
sqldata = " select q.QUEST as Question,a.ANS_VAL as Answer,d.REMARKS as Remark , i.filename from HKC_REQ_DTL d "
sqldata &= " join HKC_QUEST_MAST q"
sqldata &= " on d.QID=q.QID inner join HKC_ANS_MAST a on d.aid=a.AID "
sqldata &= " join doclink i on d.reqid=lpad(i.docno,30,0)"
sqldata &= " where reqid='" & reqid.ToString().Trim() & "' and doctype='HKC'"
Dim clsobject As New clsbase
dtimages = clsobject.fnselect(sqldata)
If dtimages.Rows.Count > 0 Then
Dim ImagePaths() As String = Directory.GetFiles(Server.MapPath("~/TempFile/"))
Dim Imgs As List(Of ListItem) = New List(Of ListItem)
Dim ImgName As String
' Dim imgbtn As System.Web.UI.WebControls.Image = CType(e.CommandSource, System.Web.UI.WebControls.Image)
For Each dr In dtimages.Rows
For Each imgPath As String In ImagePaths
ImgName = Path.GetFileName(imgPath)
If ImgName.ToString().Trim() = dr("filename") Then
ImgName = Path.GetFileName(imgPath).Trim()
Imgs.Add(New ListItem(ImgName, ("~/TempFile/" + ImgName)))
imgForReqid.ImageUrl = imgPath
End If
'ImgName = Path.GetFileName(imgPath)
'Imgs.Add(New ListItem(ImgName, ("~/TempFile/" + ImgName)))
Next
Next
gvdetail.DataSource = dtimages
gvdetail.DataBind()
gvdetail.HeaderRow.TableSection = TableRowSection.TableHeader
mfn_Get_PopUp(popupdiv2, "90%", "90%", "Checklist detail")
End If
'gvdetail.DataSource = objcom.GetchkDetail(reqid)
'gvdetail.DataBind()
'gvdetail.HeaderRow.TableSection = TableRowSection.TableHeader
'mfn_Get_PopUp(popupdiv2, "90%", "90%", "Checklist detail")
End If
Catch ex As Exception
End Try
End Sub

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Riddhi Valecha6y ago

Hello Team,

I am sharing my database design (tables and columns) - I need to display multiple images on single row in gridview.

ANS_MAST
ID	Answer
1	Satisfactory
2	Not Satisfactory
3	N/A
4	OK
5	NOT OK

QUEST_MAST
ID	PID	Question
1	592	Appropriate signage placed while Work in Progress
2	592	Soft boards notices / displays should be aligned properly
3	592	Glass doors cleaned and free from stains or marks
4	592	Reprographic Room clean and all papers are arranged in pigeon hole
5	592	Overhead cupboards free of dust
6	592	No dust visible on edges and ledges
7	592	Staircases & Shaft rooms cleaned and free from debris
8	592	Dustbins clean and liner changed as per frequency
9	592	Water bottles cleaned and filled
10	592	Chairs cleaned and aligned
11	592	Workstations free from dust / stains
12	592	Floors free from dust / stains
13	592	Appropriate signage placed while Work in Progress
14	592	Soft boards notices / displays should be aligned properly
15	592	Glass doors cleaned and free from stains or marks
16	592	Reprographic Room clean and all papers are arranged in pigeon hole
17	592	Overhead cupboards free of dust
18	592	No dust visible on edges and ledges
19	592	Staircases & Shaft rooms cleaned and free from debris
20	592	Dustbins clean and liner changed as per frequency
21	592	Water bottles cleaned and filled
22	592	Chairs cleaned and aligned
23	592	Workstations free from dust / stains
24	592	Floors free from dust / stains

Doclink
ID	PID	File Name
1	592	29092020022246_592.jpg
2	592	29092020022401_592.jpg

Output required -

Question	Answer	Images Uploaded	QuestionID
Appropriate signage placed while Work in Progress	Satisfactory	29092020022401_592.jpg, 29092020022246_592.jpg	1

My Issue is -

How do I make a query so that I can get comma seprated values from table - doclink ?

From front-end, I have uploaded 2 images for Question ID - 1 (Appropriate..).

How do I display two images in grid view?

Or can I have a hyperlink saying "2" and when user clicks on it, 2 images are displayed ?

PLease help me in resolving this.

Riddhi Valecha6y ago
Hello Team,
In my scenario, there is no URL path in the database.
Images are stored in a project folder.

Folder Name - "ImagesUploaded".

Here, I am getting a list of records in a datatable, where one field name is "ImageFileName".

Then, I am running a "For Each" Loop and comparing the Image name in folder with Image File Name of database.

If the Image name are matching, then I am setting the image path in the datatable.

Path is - C:\Test\Iamges\image1.jpg

I want to display this image in the gridview.

Please guide, how do I do this ?
Sachin Singh6y ago
change grid like
                        "imgProfile" runat="server" CssClass="img-fluid" ImageUrl='<%# Eval("imageUrl") %>'  height="100" Width="100"
/>

your database must return imageUrl column value as ~/TempFile/" + ImgName;
so its better to save image path in database already in this format, this is the easiest way. Now when grid will be binded you will have nothing to do.
Mageshwaran R6y ago
Hi Riddhi,
please try this link:
https://www.youtube.com/watch?v=7XzdmYoISLk