How to display icon images in Gridview or Datagrid rows?

Do you ever worked for any file management system? Where you have word files, excel file or it can be an image file like jpeg or png? In .NET Gridview is a popular Control to present tabular data. In this demo app I implemented various icons in each row of the Gridview dynamically by checking the file type.

Logic is so simple, Using FindControl in side the Gridview RowDataBound event I am locating the imgPreview tag from aspx. Then storing its value to a variable. I have icon images are in IMAGES/type_icons folder. By checking file extension I updating the image URL.

Gridview.aspx

<asp:GridView AllowSorting="true" DataKeyNames="CodeID" ID="grdFileList" runat="server" AutoGenerateColumns="False" CellPadding="0" CellSpacing="0" ForeColor="#333333" GridLines="None" Width="100%" AllowPaging="true" PageSize="20">

<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />

<Columns>

<asp:TemplateField>

<HeaderTemplate>
<input type="checkbox" onmouseover=if(t1)t1.Show(event,l1) onmouseout=if(t1)t1.Hide(event) style="width:20px;" name="chkAll" id="chkAll" onclick="javascript:checkAll(this);" />
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" style="width:20px;" value='<%# Container.DataItem("CodeID") %>' id="chkSelect" name="chkSelect" />
</ItemTemplate>
<HeaderStyle Width="35px" />
</asp:TemplateField>

<asp:TemplateField HeaderText="File Name" SortExpression="CodeFileName">
<ItemTemplate>
<a style="cursor:hand;" href='AddCode.aspx?SourceCode=1&CodeID=<%#Container.DataItem("CodeID")%>&AttachFile=1' class="GridLink"><%# Container.DataItem("CodeFileName") %></a>&nbsp;&nbsp;
</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="Description" SortExpression="CodeDescription">
<ItemTemplate>
<a style="cursor:default;"><%# Container.DataItem("CodeDescription") %></a>&nbsp;&nbsp;
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>

<asp:TemplateField HeaderText="SearchKey" SortExpression="SearchKey">
<ItemTemplate>
<a style="cursor:hand;"><%#Container.DataItem("SearchKey")%>&nbsp;&nbsp;
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>

<asp:TemplateField HeaderText="File Name" SortExpression="AttachFileName">
<ItemTemplate>
<a style="cursor:hand;"><%#Container.DataItem("AttachFileName")%>&nbsp;&nbsp;
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>

<asp:TemplateField HeaderText="File Size" SortExpression="AttachFileSize">
<ItemTemplate>
<a style="cursor:hand;"><%#Container.DataItem("AttachFileSize")%>&nbsp;&nbsp;
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>

<asp:TemplateField HeaderText="File Type" SortExpression="AttachFileType" Visible="False">
<ItemTemplate>
<asp:Label ID="lblAttachmentType" Text='<%#Container.DataItem("AttachFileName")%>' runat="server"></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>

<asp:TemplateField HeaderText="File Type" SortExpression="AttachFileType">
<ItemTemplate>
<asp:Image ID="imgPreview" runat="server" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>

<asp:TemplateField HeaderText="Is Shared" SortExpression="IsShareable">
<ItemTemplate>
<a style="cursor:hand;"><%#Container.DataItem("IsShareable")%></a>&nbsp;&nbsp;
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>

<asp:TemplateField HeaderText="Status" SortExpression="IsShareable">
<ItemTemplate>
<a style="cursor:hand;"><%# Container.DataItem("Status") %></a>&nbsp;&nbsp;
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#E3EAEB" />
<EditRowStyle BackColor="#7C6F57" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#D7F6FA" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle Height="22px" BackColor="#005B90" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:connectionString %>">
</asp:SqlDataSource>

Gridview RowDataBound Subroutine

Protected Sub grdFileList_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles grdFileList.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then
Dim lblAttachmentTypeID As Label = CType(e.Row.FindControl("lblAttachmentType"), Label)

Dim objImg As Image = CType(e.Row.FindControl("imgPreview"), Image)

Dim AT As String = lblAttachmentTypeID.Text

Dim splitDot As Array = AT.Split(".")

Dim Ext As String = splitDot(1)
Ext = Trim(Ext)

'Response.Write(ds.Tables(0).Rows(0).Item(20))

If (Ext = "doc") Then
objImg.ImageUrl = "../IMAGES/type_icons/doc.gif"
ElseIf (Ext = "docx") Then
objImg.ImageUrl = "../IMAGES/type_icons/doc.gif"
ElseIf (Ext = "xls") Then
objImg.ImageUrl = "../IMAGES/type_icons/xls.gif"
ElseIf (Ext = "zip") Then 'ALLOW USER TO UPLOAD ZIP FILES
objImg.ImageUrl = "../IMAGES/type_icons/zip.gif"
ElseIf (Ext = "sql") Then
objImg.ImageUrl = "../IMAGES/type_icons/sql.gif"
ElseIf (Ext = "ppt") Then
objImg.ImageUrl = "../IMAGES/type_icons/ppt.gif"
'ElseIf (Ext = "odt") Then
'objImg.ImageUrl = "../IMAGES/type_icons/create.gif"
ElseIf (Ext = "txt") Then
objImg.ImageUrl = "../IMAGES/type_icons/txt.gif"
ElseIf (Ext = "gif") Then
objImg.ImageUrl = "../IMAGES/type_icons/gif.gif"
ElseIf (Ext = "bmp") Then
objImg.ImageUrl = "../IMAGES/type_icons/bmp.gif"
ElseIf (Ext = "exe") Then
objImg.ImageUrl = "../IMAGES/type_icons/exe.gif"
ElseIf (Ext = "dll") Then
objImg.ImageUrl = "../IMAGES/type_icons/ddl.gif"
ElseIf (Ext = "cs") Then
objImg.ImageUrl = "../IMAGES/type_icons/cs.gif"
ElseIf (Ext = "fla") Then
objImg.ImageUrl = "../IMAGES/type_icons/fla.gif"
ElseIf (Ext = "htm") Then
objImg.ImageUrl = "../IMAGES/type_icons/htm.gif"
ElseIf (Ext = "html") Then
objImg.ImageUrl = "../IMAGES/type_icons/htm.gif"
ElseIf (Ext = "jpeg") Then
objImg.ImageUrl = "../IMAGES/type_icons/jpg.gif"
ElseIf (Ext = "jpg") Then
objImg.ImageUrl = "../IMAGES/type_icons/jpg.gif"
ElseIf (Ext = "image/pjpe") Then
objImg.ImageUrl = "../IMAGES/type_icons/jpg.gif"
ElseIf (Ext = "png") Then
objImg.ImageUrl = "../IMAGES/type_icons/png.gif"
ElseIf (Ext = "js") Then
objImg.ImageUrl = "../IMAGES/type_icons/js.gif"
ElseIf (Ext = "pdf") Then
objImg.ImageUrl = "../IMAGES/type_icons/pdf.gif"
ElseIf (Ext = "mdb") Then
objImg.ImageUrl = "../IMAGES/type_icons/mdb.gif"
ElseIf (Ext = "swf") Then
objImg.ImageUrl = "../IMAGES/type_icons/swf.gif"
ElseIf (Ext = "vsd") Then
objImg.ImageUrl = "../IMAGES/type_icons/vsd.gif"
ElseIf (Ext = "xml") Then
objImg.ImageUrl = "../IMAGES/type_icons/xml.gif"
Else
'THIS IS THE GENERAL FILE ICON WHICH NEED TO SHOW ON OVER THE ICON EXTENTION NOT FOUND FROM DB
objImg.ImageUrl = "../IMAGES/type_icons/txt.gif"
End If
End If
'imgSrc.ImageUrl = "IMAGES/AloneLogo.png"
End Sub

The post How to display icon images in Gridview or Datagrid rows? appeared first on JHARAPHULA.