Forum Moderators: open

Message Too Old, No Replies

how to display img within datagrid?

question about how to display images in datagrid using system.io

         

brettski

2:23 am on Apr 15, 2004 (gmt 0)

10+ Year Member



hey there guys, Im stumped on how to get around this problem ive got,

Ive set up an image edit page that allows the admin to upload .jpgs to a directory and then view the content of this directory in a datagrid, ive got the datagrid displaying the filenames.jpg but id like to show a small thumbnail of the image in each datarow, I cant figure it out though ive tried and tried. any help would be great.

here is the source:

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %>
<%@ Import Namespace="System.IO" %>

<script language="VB" runat="server">
Sub Page_Load(sender as Object, e as EventArgs)
If Not Page.IsPostBack then
Dim dirInfo as New DirectoryInfo(Server.MapPath("../photoImages"))

articleList.DataSource = dirInfo.GetFiles("*.jpg")
articleList.DataBind()
End If
End Sub

Sub articleList_ItemDataBound(sender as Object, e as DataGridItemEventArgs)
' First, make sure we're NOT dealing with a Header or Footer row
If e.Item.ItemType <> ListItemType.Header AND _
e.Item.ItemType <> ListItemType.Footer then
'Now, reference the Button control that the Delete ButtonColumn
'has been rendered to
Dim deleteButton as Button = e.Item.Cells(0).Controls(0)

'We can now add the onclick event handler
deleteButton.Attributes("onclick") = "javascript:return " & _
"confirm('Are you sure you want to delete the file " & _
DataBinder.Eval(e.Item.DataItem, "Name") & "?')"
End If
End Sub


Sub articleList_DeleteFile(sender as Object, e as DataGridCommandEventArgs)
'First, get the filename to delete
Dim fileName as String = articleList.DataKeys(e.Item.ItemIndex)
File.Delete(fileName)
response.Redirect("edit_gallery.aspx")


'You would want to rebind the Directory's files to the DataGrid after
'deleting the file...
End Sub

sub UploadFile_Clicked(src as object , e as eventargs )
dim FileName
dim uploadDirectory = (Server.MapPath("../photoImages/"))

FileName = uploadFile.PostedFile.FileName
FileName = Path.GetFileName(FileName)

uploadFile.PostedFile.SaveAs(uploadDirectory + FileName)

uploadFileName.Text = FileName
FileType.Text = uploadFile.PostedFile.ContentType
FileLength.Text = uploadFile.PostedFile.ContentLength
End sub

</script>

<html>

<form method="post" enctype="multipart/form-data" runat="server" id="UploadForm">
<div align="left">
<h1 align="center" class="template">EDIT IMAGE GALLERY</h1>
<p class="template">Select the file:
<br>
<input id="uploadFile" type="file" runat="server">
<br>
<input type="submit" value="Upload" OnServerClick="UploadFile_Clicked" runat="server">

The following file has been uploaded:
</p>
</div>
<span class="template">
<asp:Label ID="uploadFileName" runat="server" />
<br>
File Size:
<asp:Label ID="FileLength" runat="server" />
<br>
File Type:
<asp:Label ID="FileType" runat="server" />

<asp:label runat="server" id="lblMessage" Font-Italic="True" ForeColor="Red" />
</span>
<asp:DataGrid AlternatingItemStyle-BackColor="#eeeeee"
AutoGenerateColumns="false"
DataKeyField="FullName" Font-Name="Verdana"
HeaderStyle-BackColor="Navy" HeaderStyle-Font-Bold="True"
HeaderStyle-Font-Size="15pt" HeaderStyle-ForeColor="White" id="articleList" runat="server" Width="800"
OnDeleteCommand="articleList_DeleteFile"
OnItemDataBound="articleList_ItemDataBound">
<Columns>
<asp:ButtonColumn Text="Delete" ButtonType="PushButton" CommandName="Delete" />
<asp:HyperLinkColumn DataNavigateUrlField="Name" DataTextField="Name" HeaderText="File Name" />
<asp:BoundColumn DataField="LastWriteTime" HeaderText="Last Write Time"
ItemStyle-HorizontalAlign="Center" DataFormatString="{0:d}" />
<asp:BoundColumn DataField="Length" HeaderText="File Size"
ItemStyle-HorizontalAlign="Right" DataFormatString="{0:#,### bytes}" />
</Columns>
</asp:DataGrid>
</form>

</html>

duckhunter

4:14 am on Apr 15, 2004 (gmt 0)

10+ Year Member



Too cool! Use the DataList and DataBinder.Eval to bind the asp controls at runtime.

In the HTML:

<asp:DataList id="DataList1" runat="server" Width="464px">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "ProductNumber")%>
<asp:Image runat=server ImageUrl='<%#DataBinder.Eval(Container.DataItem, "Image")%>' ID="Image1"/>
</ItemTemplate>
</asp:DataList>

Then the code behind to set the values of the columns by binding to the Function GetData which returns a DataView:

DataList1.DataSource = GetData()
DataList1.DataBind()

Private Function GetData() As DataView
Dim dt As New DataTable
Dim dr As DataRow

dt.Columns.Add(New DataColumn("ProductNumber"))
dt.Columns.Add(New DataColumn("Image"))

dr = dt.NewRow()
dr(0) = "Product 1"
dr(1) = "yourimage.jpg"
dt.Rows.Add(dr)

dr = dt.NewRow()
dr(0) = "Product 2"
dr(1) = "yourimage.jpg"
dt.Rows.Add(dr)

Dim dv As New DataView(dt)
Return dv

End Function

There is a C# version of it here.
[msdn.microsoft.com ]
I converted it to VB.NET for my purposes. Think I might use this sometime.

brettski

5:15 pm on Apr 15, 2004 (gmt 0)

10+ Year Member



hey duckhunter, that info you gave me covers all i need and gave me a few more idea's to work with.

thanks very much.