Saturday, 1 December 2012

Gridview with images in asp.net using DataTable

Gridview with images in asp.net using DataTable/
GridView Databinding to Datatable

Step 1)Add GridView


          <asp:GridView Caption="<h3>DataBinding in GridView with Datatable</h3>" ID="GridView1" runat="server" 
            GridLines="Both" EmptyDataText="Nodatafound" Width="440px" 
            AutoGenerateColumns="false" 
             
            >
            <Columns>
                <asp:BoundField HeaderText="Serialno" DataField="SerialNo" />
                <asp:BoundField HeaderText="Brand" DataField="Brand" />
                <asp:TemplateField HeaderText="LOGO">
                    <ItemTemplate>
                        <asp:Image runat="server" AlternateText="no image found" ImageUrl='<%# Eval("BrandImage")%>' />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

Step 2) Add DataTable/Programatically construct Datatable.

        void AddDataTableColumns()
        {
            DataColumn ID = new DataColumn("SerialNo", typeof(System.Int32));
            ID.AutoIncrement = true;
            ID.AutoIncrementSeed = 1000;
            ID.AutoIncrementStep = 16;

            DataColumn BrandName = new DataColumn("Brand", typeof(System.String));
            BrandName.MaxLength = 10;

            DataColumn BrandImage = new DataColumn("BrandImage");
            BrandImage.DataType = typeof(String);
            //typeof(System.Web.UI.WebControls.Image);

            //DataColumn BrandNewImage = new DataColumn("BrandNewImage");
            //BrandImage.DataType = typeof(String);


            brandsTable.Columns.Add(ID); brandsTable.Columns.Add(BrandName); brandsTable.Columns.Add(BrandImage);
           // brandsTable.Columns.Add(BrandNewImage);
        }
        void AddDataTableRows()
        {
            DataRow row1 = brandsTable.NewRow();
            row1[1] = "Bata";
            row1[2] = convertImage("images/Bata_brand.jpg").ToString(); //"<img src='" + convertImage("images/Bata_brand.jpg")+"' alt='no image found'/>";
            //convertimagetobinary("images/Bata_brand.jpg");
            DataRow row2 = brandsTable.NewRow();
            row2[1] = "Ambassador";
            row2[2] = convertImage("~/images/Ambassador_brand.jpg"); ;


            DataRow row3 = brandsTable.NewRow();
            row3[1] = "FootIn";
            row3[2] = convertImage("~/images/footin_brand.jpg"); ;


            DataRow row4 = brandsTable.NewRow();
            row4[1] = "North Star";
            row4[2] = convertImage("~/images/North-Star_brand.jpg"); ;

            //GridView1.Columns.Add(new ImageField());


            DataRow row5 = brandsTable.NewRow();
            row5[1] = "Power";
            row5[2] = convertImage("~/images/power_brand.jpg"); ;
            brandsTable.Rows.Add(row1);
            brandsTable.Rows.Add(row2); brandsTable.Rows.Add(row3); brandsTable.Rows.Add(row4);
            brandsTable.Rows.Add(row5);

        }



Step3)  Convert  Images to  Base 64 Strings/Inline Images in ASP.NET 4.5

        string convertImage(string imagefile)
        {
            return "data:image/jpeg;base64," + System.Convert.ToBase64String(convertimagetobinary(imagefile));
        }
        byte[] convertimagetobinary(String imagefile)
        {
            System.IO.StreamReader reader = new System.IO.StreamReader(MapPath(imagefile));
            System.IO.Stream stream = reader.BaseStream;

            //System.IO.FileStream fileStream = new System.IO.FileStream(MapPath(imagefile), System.IO.FileMode.Open);
            byte[] fileContent = new byte[stream.Length];

            stream.Read(fileContent, 0, (int)stream.Length);

            return fileContent;
        }


Step 4) Bind in Page_Load event


 protected void Page_Load(object sender, EventArgs e)
        {
            AddDataTableColumns();
            AddDataTableRows();
            BindtoGridView();
        }


Here is the output