Highlight gridview row on mouseover using jquery

- on 4:31 PM - 1 comment

Whenever you hover your mouse pointer over any GridView row, that row gets highlighted. 

Add the following jquery library inside the <head></head> tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

 Add the following code next to the jquery library.

<script type="text/javascript">
           $(document).ready(function () {
               $("#GridView1 td").hover(function () {
                   $(this).parent().addClass("Highlight");
               }, function () {
                   $(this).parent().removeClass("Highlight");
               });

           });
    </script>

Add the following css code.

<style type="text/css">
.Highlight
{
background-color:Blue;
color:white;
}
</style>

Add Page HighlightRow.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HighlightRow.aspx.cs" Inherits="HighlightRow" %>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
       <script type="text/javascript">
           $(document).ready(function () {
               $("#GridView1 td").hover(function () {
                   $(this).parent().addClass("Highlight");
               }, function () {
                   $(this).parent().removeClass("Highlight");
               });

            });
    </script>
     <style type="text/css">
    .Highlight
     {
    background-color:Blue;
    color:white;
    }
    
 </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
    </div>
    </form>
</body>

</html>
Read more

Asp.net Create DataTable Dynamically and Bind to Gridview in C#

- on 2:54 PM - No comments

To implement this requirement we need to create one new datatable after that add columns and bind data to columns after that add those columns to datatable before that first create new website open Default.aspx page and write the following code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Dynamically create datatable and bind data to it in asp.net</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvDetails" runat="server">
</asp:GridView>
</div>
</form>
</body>
</html>

protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
BindGridviewData();
}
}
/// <summary>
/// Dynamically create & bind data to datatable and bind datatable to gridview
/// </summary>
protected void BindGridviewData()
{
DataTable dt = new DataTable();
dt.Columns.Add("UserId", typeof(Int32));
dt.Columns.Add("UserName", typeof (string));
dt.Columns.Add("Education", typeof (string));
dt.Columns.Add("Location",typeof(string));


DataRow dtrow = dt.NewRow(); // Create New Row
dtrow["UserId"] = 1; //Bind Data to Columns
dtrow["UserName"] = "Ashish Singh";
dtrow["Education"] = "B.Tech";
dtrow["Location"] = "Mumbai";
dt.Rows.Add(dtrow);


dtrow = dt.NewRow(); // Create New Row
dtrow["UserId"] = 2; //Bind Data to Columns
dtrow["UserName"] = "Rajesh Singh";
dtrow["Education"] = "MBA";
dtrow["Location"] = "Nagpur";
dt.Rows.Add(dtrow);


dtrow = dt.NewRow(); // Create New Row
dtrow["UserId"] = 3; //Bind Data to Columns
dtrow["UserName"] = "Ankur Srivastava";
dtrow["Education"] = "B.Tech";
dtrow["Location"] = "Nuzividu";
dt.Rows.Add(dtrow);


dtrow = dt.NewRow(); // Create New Row
dtrow["UserId"] = 4; //Bind Data to Columns
dtrow["UserName"] = "Neeraj";
dtrow["Education"] = "CA";
dtrow["Location"] = "Guntur";
dt.Rows.Add(dtrow);
gvDetails.DataSource = dt;
gvDetails.DataBind();
}
Read more

Bind Asp.net Gridview with DataTable in C# Dynamically

- on 2:37 PM - No comments

To bind gridview with datatable we need to write the code like as shown below

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Create temparory table in asp.net using c#</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvDetails" runat="server">
<HeaderStyle BackColor="#DC5807" Font-Bold="true" ForeColor="White" />
</asp:GridView>
</div>
</form>
</body>
</html>


protected void Page_Load(object sender, EventArgs e)
{
BindGridviewData();
}
/// <summary>
/// Dynamically create & bind data to gridview
/// </summary>
protected void BindGridviewData()
{
DataTable dt = new DataTable();
dt.Columns.Add("UserId", typeof(Int32));
dt.Columns.Add("UserName", typeof(string));
dt.Columns.Add("Education", typeof(string));
dt.Rows.Add(1, "Ashish Singh", "M.Tech");
dt.Rows.Add(2, "Ankur Srivatavai", "Msc");
dt.Rows.Add(3, "Madhav Sai", "MS");
dt.Rows.Add(4, "Praveen", "B.Tech");
dt.Rows.Add(6, "Sateesh", "MD");
dt.Rows.Add(7, "Raju Singh", "M.Tech");
dt.Rows.Add(8, "Rajesh", "MCA");
gvDetails.DataSource = dt;
gvDetails.DataBind();
}
Read more