Hiding a datagrid with Javascript, coding for onmouseover in a datagrid
Put very simply, the DataGridItem = <TR>
So a simple
foreach (DataGridItem Item in DataGrid1.Items)
{
Item.Attributes.Add(“onmouseover”, “alert(‘”+Item.Cells[0].Text+”’);”);
}
Will show an alert with the value in the first cell when you move your mouse over the row. A very simple example!
But the concept can be used for much more complicated requirements liking changing background colours or ‘binding’ textboxes outside the grid to values inside it.
The hiding involves nothing but wrapping the grid an <a> tag and setting it’s style.
Complete code
<%@ Page language=”c#” Codebehind=”WebForm1.aspx.cs” AutoEventWireup=”false” Inherits=”WebApplication2.WebForm1” %>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name=”GENERATOR” Content=”Microsoft Visual Studio .NET 7.1”>
<meta name=”CODE_LANGUAGE” Content=”C#”>
<meta name=”vs_defaultClientScript” content=”JavaScript”>
<meta name=”vs_targetSchema” content=”http://schemas.microsoft.com/intellisense/ie5”>
<script>
function HideTable(a)
{
a.previousSibling.style.display = ‘none’;
return false;
}
</script>
</HEAD>
<body>
<form name=”Form1” id=”Form1” method=”post” runat=”server”>
<a name=”TestDiv”>
<asp:DataGrid id=”DataGrid1” runat=”server”></asp:DataGrid>
</a><input type=”button” onclick=”return HideTable(this)” value=”hide”>
</form>
</body>
</HTML>
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace WebApplication2
{
/// <summary>
/// Summary description for WebForm1.
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid DataGrid1;
private void Page_Load(object sender, System.EventArgs e)
{
DataTable DtTest = new DataTable();
DtTest.Columns.Add(“a”);
DtTest.Columns.Add(“b”);
DtTest.Columns.Add(“c”);
DtTest.Columns.Add(“d”);
DtTest.Rows.Add(new object[] {”1”, “2”, “3”, “4”});
DtTest.Rows.Add(new object[] {”2”, “2”, “3”, “4”});
DtTest.Rows.Add(new object[] {”3”, “2”, “3”, “4”});
DtTest.Rows.Add(new object[] {”4”, “2”, “3”, “4”});
DataGrid1.DataSource = DtTest;
DataGrid1.DataBind();
foreach (DataGridItem Item in DataGrid1.Items)
{
Item.Attributes.Add(“onmouseover”, “alert(‘”+Item.Cells[0].Text+”’);”);
}
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
So a simple
foreach (DataGridItem Item in DataGrid1.Items)
{
Item.Attributes.Add(“onmouseover”, “alert(‘”+Item.Cells[0].Text+”’);”);
}
Will show an alert with the value in the first cell when you move your mouse over the row. A very simple example!
But the concept can be used for much more complicated requirements liking changing background colours or ‘binding’ textboxes outside the grid to values inside it.
The hiding involves nothing but wrapping the grid an <a> tag and setting it’s style.
Complete code
<%@ Page language=”c#” Codebehind=”WebForm1.aspx.cs” AutoEventWireup=”false” Inherits=”WebApplication2.WebForm1” %>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name=”GENERATOR” Content=”Microsoft Visual Studio .NET 7.1”>
<meta name=”CODE_LANGUAGE” Content=”C#”>
<meta name=”vs_defaultClientScript” content=”JavaScript”>
<meta name=”vs_targetSchema” content=”http://schemas.microsoft.com/intellisense/ie5”>
<script>
function HideTable(a)
{
a.previousSibling.style.display = ‘none’;
return false;
}
</script>
</HEAD>
<body>
<form name=”Form1” id=”Form1” method=”post” runat=”server”>
<a name=”TestDiv”>
<asp:DataGrid id=”DataGrid1” runat=”server”></asp:DataGrid>
</a><input type=”button” onclick=”return HideTable(this)” value=”hide”>
</form>
</body>
</HTML>
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace WebApplication2
{
/// <summary>
/// Summary description for WebForm1.
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid DataGrid1;
private void Page_Load(object sender, System.EventArgs e)
{
DataTable DtTest = new DataTable();
DtTest.Columns.Add(“a”);
DtTest.Columns.Add(“b”);
DtTest.Columns.Add(“c”);
DtTest.Columns.Add(“d”);
DtTest.Rows.Add(new object[] {”1”, “2”, “3”, “4”});
DtTest.Rows.Add(new object[] {”2”, “2”, “3”, “4”});
DtTest.Rows.Add(new object[] {”3”, “2”, “3”, “4”});
DtTest.Rows.Add(new object[] {”4”, “2”, “3”, “4”});
DataGrid1.DataSource = DtTest;
DataGrid1.DataBind();
foreach (DataGridItem Item in DataGrid1.Items)
{
Item.Attributes.Add(“onmouseover”, “alert(‘”+Item.Cells[0].Text+”’);”);
}
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
Comments
Post a Comment