how to call javascript function from gridview onmouseover,onmouseout


sometimes we need to call javascript function from gridview

this post will help to do that

First create database table as follows

Then design .aspx page as follows:

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head id="Head1" runat="server">
<title>Gridview onmouseover and onmouseout</title>
<script type="text/javascript">
    var oldgridcolor;
    function SetMouseOver(element) {
        alert("Welcome to onmouseover event.!");
    }
    function SetMouseOut(element) {
//        alert("welcome to onmouseout event");
    }
</script>
</head>
<body style="font-weight: 700">
<form id="form1" runat="server">
<div>
  <asp:GridView runat="server" ID="gvrecords"AutoGenerateColumns="False"
HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="White"
onrowdatabound="gvrecords_RowDataBound" BackColor="#DEBA84" BorderColor="#DEBA84"
        BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2">
<Columns>
<asp:BoundField DataField="UserName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="Location" HeaderText="Location" />
</Columns>
    <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
<HeaderStyle BackColor="#A55129" ForeColor="White" Font-Bold="True"></HeaderStyle>
    <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
    <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
    <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#FFF1D4" />
    <SortedAscendingHeaderStyle BackColor="#B95C30" />
    <SortedDescendingCellStyle BackColor="#F1E5CE" />
    <SortedDescendingHeaderStyle BackColor="#93451F" />
</asp:GridView>
</div>
</form>
</body>
</html>

Then Write Following Code in Code Behind:

 
protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGridview();
        }
    }
    protected void gvrecords_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        //here we are setting onmouseover events
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes["onmouseover"] = "javascript:SetMouseOver(this)";
            e.Row.Attributes["onmouseout"] = "javascript:SetMouseOut(this)";
        }
    }
    protected void BindGridview()
    {
        SqlConnection con = new SqlConnection("Data Source=server2;user id=sa;password=123;Initial Catalog=MySampleDB");
        con.Open();
        SqlCommand cmd = new SqlCommand("select * from UserDetails", con);
        cmd.ExecuteNonQuery();
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);
        gvrecords.DataSource = ds;
        gvrecords.DataBind();
    }

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s