Show Floating DIV on each GridView Row MouseOver in Asp.net

Show Floating DIV on each GridView Row MouseOver in Asp.net

9:32:00 AM
Description:-
In this blog I am going to explain how to show GridView row details in tool tip on mouse over with JavaScript in asp.net.

We all know how important an Asp.Net GridView control is, with respect to its usefulness. In a previous article, I have I have written on How to highlight a Row of a GridView control. In this article, (taking cue from the previous example) I’ll show you how to display a Floating DIV next to each Row of the GridView, while hovering the mouse over the rows. This Blog is useful for show GridView row details in tool tip on mouse over with JavaScript using Asp.net.

Create Table in SQL

CREATE TABLE [dbo].[Main_Master](
      [Main_ID] [bigint] IDENTITY(1,1) NOT NULL,
      [Main_Bill_ID] [varchar](50) NULL,
      [Main_Order_ID] [varchar](50) NULL,
      [Main_OrderDate] [date] NULL,
      [Main_PartyName] [varchar](50) NULL,
      [Main_Grant_Total] [bigint] NULL,
      [Main_Discount] [bigint] NULL,
      [Main_Net_Total] [bigint] NULL,
      [Main_Projects] [varchar](max) NULL,
      [Main_Gender] [varchar](50) NULL,
 CONSTRAINT [PK_Main_Master] PRIMARY KEY CLUSTERED
(
      [Main_ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

First of all in the design page (.aspx) write place Gridview as following

Now Drag Gridview Control in Webpage and Set Auto Generated Columns to False and Create your Column Whatever you Want.

HTML Code:

<div id="divGrid" style="width: auto; float: left">
   <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound"
      CssClass="grid" GridLines="None">
      <HeaderStyle BackColor="#989898" ForeColor="white" />
      <Columns>
         <asp:TemplateField HeaderText="Index">
            <ItemTemplate>
               <%# Container.DataItemIndex+1 %>
            </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Main ID">
            <ItemTemplate>
               <asp:Label ID="lblmainid" runat="server" Text='<%#Eval("Main_ID") %>'></asp:Label>
            </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Bill No">
            <ItemTemplate>
               <asp:Label ID="lblbillib" runat="server" Text='<%#Eval("Main_Bill_ID") %>'></asp:Label>
            </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Order No">
            <ItemTemplate>
               <asp:Label ID="lblorderid" runat="server" Text='<%#Eval("Main_Order_ID") %>'></asp:Label>
            </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Order Date">
            <ItemTemplate>
               <asp:Label ID="lblorderdate" runat="server" Text='<%#Eval("Main_OrderDate") %>'></asp:Label>
            </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Party Name">
            <ItemTemplate>
               <asp:Label ID="lblpartyname" runat="server" Text='<%#Eval("Main_PartyName") %>'></asp:Label>
            </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Main Projects">
            <ItemTemplate>
               <asp:Label ID="lblprojectname" runat="server" Text='<%#Eval("Main_Projects") %>'></asp:Label>
            </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Main Grant Total">
            <ItemTemplate>
               <asp:Label ID="lblmaingranttotal" runat="server" Text='<%#Eval("Main_Grant_Total") %>'></asp:Label>
            </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Main Discount">
            <ItemTemplate>
               <asp:Label ID="lbldiscount" runat="server" Text='<%#Eval("Main_Discount") %>'></asp:Label>
            </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Main Net Total">
            <ItemTemplate>
               <asp:Label ID="lblnettotal" runat="server" Text='<%#Eval("Main_Net_Total") %>'></asp:Label>
            </ItemTemplate>
         </asp:TemplateField>
      </Columns>
   </asp:GridView>
</div>
<div runat="server" id="divDetail" onmouseover="highlight(this, event)" onmouseout="highlight(this, event)">
</div>
<div>
</div>

Using JavaScript through we will get Column Id and Change row colour and we will Display Floating Div if mouse over on each row.

JavaScript Code:

<script>
    var iRowIndex

    function MouseEvents(objRef, evt, desc) {
        if (evt.type == "mouseover") {
            objRef.style.cursor = 'pointer'
            objRef.style.backgroundColor = "#EEE";
            ShowDiv(desc, evt.pageY);
        }
        else {
            objRef.style.backgroundColor = "#FFF";
            iRowIndex = objRef.rowIndex;
            HideDiv();
        }
    }
    
    function ShowDiv(desc, pos) {
        // SHOW THE DIV WITH DESCRIPTIONS NEXT TO THE SELECTED GRIDVIEW ROW.
        document.getElementById('divDetail').style.display = 'block';
        document.getElementById('divDetail').innerHTML = desc;
        document.getElementById('divDetail').style.marginTop = pos - 25 + 'px';
    }
    
    function HideDiv() { document.getElementById('divDetail').style.display = 'none'; }

    function highlight(objRef, evt) {
        if (evt.type == "mouseover") {
            objRef.style.display = 'block';
            document.getElementById('divGrid').rows[iRowIndex].style.backgroundColor = "#EEE";
        }
        else {
            if (evt.type == "mouseout") {
                document.getElementById('divGrid').rows[iRowIndex].style.backgroundColor = "#FFF";
                objRef.style.display = 'none';
            }
        }
    }
</script>

CSS Code:

<style type="text/css">
   body
   {
   font-family: Arial, Tahoma;
   font-size: 15px;
   }
   .grid
   {
   width: 100%;
   font: inherit;
   background-color: #FFF;
   border: solid 1px #525252;
   }
   .grid td
   {
   font: inherit;
   padding: 3px 5px;
   border: solid 1px #C1C1C1;
   color: #333;
   text-align: left;
   }
   .grid th
   {
   padding: 3px;
   color: #FFF;
   background: #424242;
   border-left: solid 1px #525252;
   font: inherit;
   text-align: center;
   text-transform: uppercase;
   }
   h3
   {
   color: #000;
   text-decoration: underline;
   }
   #divDetail
   {
   float: left;
   font: inherit;
   font-size: 13px;
   padding: 2px 5px;
   width: auto;
   border: solid 2px #CCC;
   -moz-border-radius: 0 7px 7px 0;
   -webkit-border-radius: 0 7px 7px 0;
   border-radius: 0 7px 7px 0;
   display: none;
   color: #333;
   }
   #divDetail p
   {
   font: inherit;
   }
   #divDetail a
   {
   font: inherit;
   float: right;
   background-color: #357AE8;
   color: #FFF;
   text-decoration: none;
   border: solid 1px #2F5BB7;
   border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   padding: 3px;
   }
</style>

Code behind:

string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
SqlConnection con;
SqlCommand cmd;
SqlDataAdapter da;
DataTable dt;
protected void Page_Load(object sender, EventArgs e)
{
    con = new SqlConnection(CS);
    cmd = new SqlCommand();
    cmd.CommandText = "select * from Main_Master ";
    cmd.Connection = con;
    //  cmd.CommandType = CommandType.StoredProcedure;
    da = new SqlDataAdapter(cmd);
    dt = new DataTable();
    da.Fill(dt);
    GridView1.DataSource = dt;
    GridView1.DataBind();
}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    //if (e.Row.RowType == DataControlRowType.DataRow)
    //{
    //  e.Row.Attributes.Add("onmouseover", "MouseEvents(this, event)");
    //  e.Row.Attributes.Add("onmouseout", "MouseEvents(this, event)");
    //}
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        String sDetails = System.String.Empty;
        sDetails = "<span><h3>ROW DETAILS</h3></span>";
        using (con = new SqlConnection(CS))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT Main_ID, Main_Bill_ID, Main_Order_ID,Main_OrderDate,Main_PartyName,Main_Projects,Main_Grant_Total,Main_Discount,Main_Net_Total " +
                "FROM dbo.Main_Master WHERE Main_ID = " +
                    DataBinder.Eval(e.Row.DataItem, "Main_ID").ToString()))
            {
                SqlDataAdapter sda = new SqlDataAdapter();
                try
                {
                    cmd.Connection = con;
                    con.Open();
                    sda.SelectCommand = cmd;

                    DataTable dt = new DataTable();
                    sda.Fill(dt);

                    if (dt.Rows.Count > 0)
                    {
                        sDetails = sDetails + "<p><strong>Main ID: </strong>" + DataBinder.Eval(e.Row.DataItem, "Main_ID").ToString() + "</p>";
                        sDetails = sDetails + "<p><strong>Bill ID: </strong>" + dt.Rows[0]["Main_Bill_ID"] + "</p>";
                        sDetails = sDetails + "<p><strong>Order ID: </strong>" + dt.Rows[0]["Main_Order_ID"] + "</p>";
                        sDetails = sDetails + "<p><strong>Order Date: </strong>" + dt.Rows[0]["Main_OrderDate"] + "</p>";
                        sDetails = sDetails + "<p><strong>Party Name: </strong>" + dt.Rows[0]["Main_PartyName"] + "</p>";
                        sDetails = sDetails + "<p><strong>Projects: </strong>" + dt.Rows[0]["Main_Projects"] + "</p>";
                        sDetails = sDetails + "<p><strong>Grant Total: </strong>" + dt.Rows[0]["Main_Grant_Total"] + "</p>";
                        sDetails = sDetails + "<p><strong>Discount: </strong>" + dt.Rows[0]["Main_Discount"] + "</p>";
                        sDetails = sDetails + "<p><strong>Net Amount: </strong>" + dt.Rows[0]["Main_Net_Total"] + "</p>";
                        e.Row.Attributes.Add("onmouseover", "MouseEvents(this, event, '" + sDetails + "')");
                        e.Row.Attributes.Add("onmouseout", "MouseEvents(this, event, '" +
                            DataBinder.Eval(e.Row.DataItem, "Main_ID").ToString() + "')");
                    }
                }
                catch (Exception ex)
                {
                }
            }
        }
    }
}

Using Configuration Manager we will get Connection String from Web.config File and get Data from SQL and bind Main_Master table in Gridview and in Gridview Row Bound event we will Check if we got Id of each row then Details of that row will be on another Div using JavaScript we will generate and check for each row in Row bound event and Store that Details in String Builder to Generate HTML in Floating div. on mouse over we will change color of that row and mouse out also we will change color.

Run your Webpage mouse over on Gridview rows to Show Floating DIV.

Umesh Patel

Related Posts

Next
« Prev Post
Previous
Next Post »

Thanks for comments.....