Call javascript functions from DataGrid <TR> tags 2

[dpdoug]

I need to be able to call javascript functions from row tags in the DataGrid. So that when the Grid is rendered the row tag <TR> would look something like this:

.......

<tr onmouseover="bgOn(this)" onmouseout="bgOff(this)" onclick="displayData('every good boy does fine')">
		<td align="Center" style="border-width:1px;border-style:solid;width:38px;">
			<input id="Grid1__ctl6_chkSelect" type="checkbox" name="Grid1:_ctl6:chkSelect" /> 
			</td><td align="Left" style="border-width:1px;border-style:solid;width:70px;">

......

I'm certain you would code this in the ItemDataBound Sub, but how to reference the DataGrid's row (not cell), I haven't been able to discover.

Thanks for all the help.

 

[Veep]

Here's an example that will get you on your way. I don't remember where I got the colorRow function but my thanks go out because I use the sh** out of the concept.
I have this in my ItemDataBound event for the grid (eliminating header, footer seperator ListItemTypes) for a CheckBox CheckBox cb = (CheckBox)e.Item.Cells[11].FindControl("chkComplete");:

cb.Attributes.Add("OnClick","colorRow(event);return CheckProcess('" + cb.ClientID.ToString() + "','" + process + "','" + job + "','" + who + "');");

I could eliminate the CheckProcess function for the example but then I couldn't just copy and paste (I'd have to edit).
The javascript on my .aspx page is:

<SCRIPT language="javascript">
function CheckProcess(ctrl,proc,jb,who)
{
	
	if(confirm("Are you closing out\nEmployee: " + who + "\nJob: " + jb + "\nProcess:" + proc + "?"))
		{
		return true;		
		}
		else
		{
		document.getElementById(ctrl).checked = false;
		return false;
		}
}
// *** This example has the original comments!		
function colorRow(e)
{
// Annoying code to get the desired event handler from the browser.
  if (!e) e = window.event; 
  var srcEl = e.target || e.srcElement;
  
  var curElement = srcEl;
  while (curElement && !(curElement.tagName == "TR"))
  {
    // Keep going until we reach the parent table row
    curElement = curElement.parentNode;
  }
  if (curElement != srcEl)
  {
    if (srcEl.checked)
    {
    // Modify your colors here for a selected object
      curElement.style.foregroundColor = "Black";
      curElement.style.backgroundColor = "Yellow";
    }
    else
    {
    // Modify your colors for a deselected object (read: Normal)
      curElement.style.foregroundColor = "Black";
      curElement.style.backgroundColor = "White";
    }
  }
}
</SCRIPT>

The key to accessing the row will be the event(s) that you apply and to what elements you apply them. If you're looking to do a mouseover on a certain cell(element) you'll need to cast it first.

 

[checkai]

here's an example of what I would do...

Private Sub dgAging_ItemCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles dgAging.ItemCreated
  Dim gi As DataGridItem
  gi = e.Item

  If gi.ItemType <> ListItemType.Header And gi.ItemType <> ListItemType.Footer Then
    Try
      gi.Attributes.Add("onmouseover", "this.style.cursor='hand'; this.style.backgroundColor=""#c2b9a2""")
      gi.Attributes.Add("onmouseout", "this.style.backgroundColor=""#ece9d8""")
      gi.Attributes.Add("onclick", "javascript:displayData('every good boy does fine'); return false;")
    Catch ee As Exception
      'This produces an error if not here.
    End Try
  End If
End Sub

if you're trying to do row hovers this will work...also, you could replace it with a javascript function...i've just never done it like that...

replace this...

gi.Attributes.Add("onmouseover", "this.style.cursor='hand'; this.style.backgroundColor=""#c2b9a2""")

with this...

gi.Attributes.Add("onmouseover", "bgOn(this)")

"...we both know I'm training to become a cagefighter...see what happens if you try 'n hit me..."