SiteMap  | About    

Image between GridView rows

The GridView control is the successor to the DataGrid and extends it in a number of ways. In GridView control, you can place images between your gridview rows data. In the previous lesson you already saw how to place blank row between gridview rows.

Blank row inside GridView Rows

images in gridview


In this article I have used Microsoft's Pubs database for sample data. You can download it free from the following link.


The program adding some functionality to GridView Control to display an image inside the blank row. The program select data from sales table in Pubs database. While retrieving, it grouped the data in stor_id wise for finding the row data change in the gridview. Here we place an image when a stor_id is change, so each new stor_id we make a blank row and place an image inside the row.

From the following program you can understand how to place an image between GridView rows.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="400px"
        onrowdatabound="GridView1_RowDataBound"  onrowcreated="GridView1_RowCreated">
                  <asp:BoundField DataField="stor_id" HeaderText="Store ID" />
                  <asp:BoundField DataField="ord_num" HeaderText="Order No." />
                  <asp:BoundField DataField="title_id" HeaderText="Title ID" />
                  <asp:BoundField DataField="qty" HeaderText="Quantity" ItemStyle-HorizontalAlign="Right"/>

C# Source Code


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
public partial class _Default : System.Web.UI.Page
    int storid = 0;
    int rowIndex = 1;
    protected void Page_Load(object sender, EventArgs e)
        SqlDataAdapter adapter = new SqlDataAdapter();
        DataSet ds = new DataSet();
        int i = 0;
        string sql = null;
        string connetionString = "Data Source=.;Initial Catalog=pubs;User ID=sa;Password=zen412";
        sql = "select  distinct top 14 stor_id,ord_num,title_id,qty from sales group by stor_id,ord_num,title_id,qty";
        SqlConnection connection = new SqlConnection(connetionString);
        SqlCommand command = new SqlCommand(sql, connection);
        adapter.SelectCommand = command;
        GridView1.DataSource = ds.Tables[0];
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        if (e.Row.RowType == DataControlRowType.DataRow)
            storid = Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, "stor_id").ToString());
    protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
        bool newRow = false;
        if ((storid > 0) && (DataBinder.Eval(e.Row.DataItem, "stor_id") != null))
            if (storid != Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, "stor_id").ToString()))
                newRow = true;
        if ((storid > 0) && (DataBinder.Eval(e.Row.DataItem, "stor_id") == null))
            newRow = true;
            rowIndex = 0;
        if (newRow)
            AddNewRow(sender, e);
    public void AddNewRow(object sender, GridViewRowEventArgs e)
        GridView GridView1 = (GridView)sender;
        GridViewRow NewTotalRow = new GridViewRow(0, 0, DataControlRowType.DataRow, DataControlRowState.Insert);
        NewTotalRow.Font.Bold = true;
        NewTotalRow.BackColor = System.Drawing.Color.Aqua;
        TableCell HeaderCell = new TableCell();
        HeaderCell.Height = 10;
        HeaderCell.HorizontalAlign = HorizontalAlign.Center ;
        HeaderCell.ColumnSpan = 4;
        System.Web.UI.WebControls.Image img = new System.Web.UI.WebControls.Image();
        string imageUrl = "bubble.png";
        img.ImageUrl = imageUrl;
        HeaderCell.Wrap = false;
        GridView1.Controls[0].Controls.AddAt(e.Row.RowIndex + rowIndex, NewTotalRow);

VB.Net Source Code


Imports System.Drawing
Imports System.Data.SqlClient
Imports System.Data
Partial Class _Default
    Inherits System.Web.UI.Page
    Dim storid As Integer = 0
    Dim rowIndex As Integer = 1
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim adapter As New SqlDataAdapter()
        Dim ds As New DataSet()
        Dim i As Integer = 0
        Dim sql As String = Nothing
        Dim connetionString As String = "Data Source=.;Initial Catalog=pubs;User ID=sa;Password=zen412"
        sql = "select  distinct top 14 stor_id,ord_num,title_id,qty from sales group by stor_id,ord_num,title_id,qty"
        Dim connection As New SqlConnection(connetionString)
        Dim command As New SqlCommand(sql, connection)
        adapter.SelectCommand = command
        GridView1.DataSource = ds.Tables(0)
    End Sub
    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
        If e.Row.RowType = DataControlRowType.DataRow Then
            storid = Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, "stor_id").ToString())
        End If
    End Sub
    Protected Sub GridView1_RowCreated(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
        Dim newRow As Boolean = False
        If (storid > 0) AndAlso (DataBinder.Eval(e.Row.DataItem, "stor_id") IsNot Nothing) Then
            If storid <> Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, "stor_id").ToString()) Then
                newRow = True
            End If
        End If
        If (storid > 0) AndAlso (DataBinder.Eval(e.Row.DataItem, "stor_id") Is Nothing) Then
            newRow = True
            rowIndex = 0
        End If
        If newRow Then
            AddNewRow(sender, e)
        End If
    End Sub
    Public Sub AddNewRow(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
        Dim GridView1 As GridView = DirectCast(sender, GridView)
        Dim NewTotalRow As New GridViewRow(0, 0, DataControlRowType.DataRow, DataControlRowState.Insert)
        NewTotalRow.Font.Bold = True
        NewTotalRow.BackColor = System.Drawing.Color.Aqua
        Dim HeaderCell As New TableCell()
        HeaderCell.Height = 10
        HeaderCell.HorizontalAlign = HorizontalAlign.Center
        HeaderCell.ColumnSpan = 4
        Dim img As New System.Web.UI.WebControls.Image()
        Dim imageUrl As String = "bubble.png"
        img.ImageUrl = imageUrl
        HeaderCell.Wrap = False
        GridView1.Controls(0).Controls.AddAt(e.Row.RowIndex + rowIndex, NewTotalRow)
        rowIndex += 1
    End Sub
End Class (C) 2018    Founded by raps mk
All Rights Reserved. All other trademarks are property of their respective owners.