Binding Images to GridView from a Folder where Image should shown in Horizontal layout

This post is a continuation of a series. Please look at the end of this post for more information

In this post, I am going to blog How to bind images from folder where the images should be shown in the page with Horizontal layout. Here I am taking a Text file which contains the list of file name of the Image with path (or http/https url of the Image). To understand how to bind from Text file, have a look at this link.

Below is the Text file contains list of the name with path:

D:\Blog\FolderImage\ImageGridHorizontal\ImageGridHorizontal\Images\220px-Mamallapuram1a.jpg
http://farm5.static.flickr.com/4073/4790347242_1108fc076d_m.jpg
D:\Blog\FolderImage\ImageGridHorizontal\ImageGridHorizontal\Images\229106_ed3b12ba0e_m.jpg
D:\Blog\FolderImage\ImageGridHorizontal\ImageGridHorizontal\Images\280px-Kailasanathar_temple.jpg
http://farm5.static.flickr.com/4106/5020712476_5cf2997f38_m.jpg
D:\Blog\FolderImage\ImageGridHorizontal\ImageGridHorizontal\Images\280px-Kanchi_Kamakshi_temple22.jpg
D:\Blog\FolderImage\ImageGridHorizontal\ImageGridHorizontal\Images\280px-Kapaleeswarar1.jpg
D:\Blog\FolderImage\ImageGridHorizontal\ImageGridHorizontal\Images\280px-Temple_Tangore_1.jpg
D:\Blog\FolderImage\ImageGridHorizontal\ImageGridHorizontal\Images\2862151368_663d1af74d_m.jpg
D:\Blog\FolderImage\ImageGridHorizontal\ImageGridHorizontal\Images\3622179267_69fea7ef95_m.bmp
D:\Blog\FolderImage\ImageGridHorizontal\ImageGridHorizontal\Images\4131887507_7c11155e59_m.png
D:\Blog\FolderImage\ImageGridHorizontal\ImageGridHorizontal\Images\4435962715_99f6ac0332_m.gif
D:\Blog\FolderImage\ImageGridHorizontal\ImageGridHorizontal\Images\4436467516_9ca99b4d24_m.png
D:\Blog\FolderImage\ImageGridHorizontal\ImageGridHorizontal\Images\4785868505_636c34bcd2_m.tif
D:\Blog\FolderImage\ImageGridHorizontal\ImageGridHorizontal\Images\4785869969_e66764603a_m.jpg
D:\Blog\FolderImage\ImageGridHorizontal\ImageGridHorizontal\Images\4785873427_8d791da8d2_m.bmp

GridView Script

<%--The div is used to show the horizontal row with in the screen width. 
If the image goes more then the size, there will be a horizontal scroll bar.--%>
<div style="width:100%;height:181px;overflow:auto;">
    <asp:GridView ID="grdImages" runat="server" BorderStyle="None"
        ShowHeader="false" AutoGenerateColumns="True"
        onrowdatabound="grdImages_RowDataBound">
    </asp:GridView>
</div>

Style Sheet

.imageStyle
{
    width:240px;
    height:160px;
}

Note: As I have assigned True to AutoGenerateColumns, the column of the GridView will be depend of the record set that is assigned to it. It means how many columns the DataTable contains that many columns GridView will have. If the GridView contains only one row, it will look like Horizontal layout.

So the code behind required to create a DataTable or an XML file which contains no of columns equal to the list of images defined in the Text file. Here in this implementation I am creating an XML file dynamically and assigning to the GridViw.

C# Code Behind

protected void Page_Load(object sender, EventArgs e)
{
    // Creating XMl document
    XmlDocument xmlDoc = new XmlDocument();
    XmlDeclaration xmlDeclaration = xmlDoc.CreateXmlDeclaration("1.0", "utf-8", null);

    // Creating Root Node
    XmlElement xmlRoot = xmlDoc.CreateElement("Root");
    xmlDoc.InsertBefore(xmlDeclaration, xmlDoc.DocumentElement);
    xmlDoc.AppendChild(xmlRoot);

    string[] fileContent = System.IO.File.ReadAllLines(HttpContext.Current.Request.PhysicalApplicationPath + @"Data/Temple.txt");

    // There will be only one record "Record" in XML
    XmlElement xmlElement = xmlDoc.CreateElement("Record");
    int intIndex = 1;
    foreach (string strFileInfo in fileContent.ToList<string>())
    {
        // The Attribute names will be ImageIndex1, ImageIndex2
        if (strFileInfo.StartsWith("http"))
        {
            xmlElement.SetAttribute("ImageIndex" + intIndex.ToString(), strFileInfo);
        }
        else
        {
            xmlElement.SetAttribute("ImageIndex" + intIndex.ToString(), ResolveUrl(strFileInfo.Replace(Server.MapPath("/"), "~/")));
        }
        intIndex++;
    }
    xmlDoc.DocumentElement.PrependChild(xmlElement);

    //Table the document Bind to the dataSet to GridView
    DataSet dataSet = new DataSet();
    dataSet.ReadXml(new StringReader(xmlDoc.InnerXml));

    grdImages.DataSource = dataSet;
    grdImages.AutoGenerateColumns = true;
    grdImages.DataBind();
}
/// <summary>
/// This event is used to add image control to the cell with the image url as the image path already bounded
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void grdImages_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        foreach (TableCell cell in e.Row.Cells)
        {
            Image image = new Image();
            image.ImageUrl = cell.Text;
            image.CssClass = "imageStyle";
            cell.Controls.Add(image);
        }
    }
}

This code has been tested with IE 6.0/9.0, Firefox 3.6, Opera 11.01

Below is the output of the screen,