Highlight the datalist row

[Lubomir]

Hi,

I have a datalist with 3 columns. First one contains an image. All of them
are hyperlinks. Datalist is generated by using ExtractTemplateRows="True".

My question is how to highlight the entire row by dragging mouse cursor over
the row.

I would like to use a script for onMouseOver, but the asp:TableRow doesn’t
support this event.
If I use the style for an Item, just the tab-cell with a mouse cursor will
be highlighted, and not the entire row.

Any suggestions?

Thank you for help.

Lubomir

 

[AlanM]

I have no knowledge of non-IE browsers, so maybe this helps, maybe it
doesn't:

Although you can't solve this with an onMouseOver in the row, you can
change the style of the row that contains the cell from the onMouseOver
of the cell, like so:

Use Page.RegisterClientScriptBlock to squirt something like this into
the page:
<script language="javascript">
function SetRowYellow(td)
{
var tr = td.parentElement;
tr.style.backgroundColor = "yellow";
}
function SetRowWhite(td)
{
var tr = td.parentElement;
tr.style.backgroundColor = "white";
}
</script>

Then, for each asp:TableCell, you'll need to add onmouseover and
onmouseout event handlers that calls those functions. I find it easiest
to do for all cells in the DataGrid in the ItemCreateed event:

private void DataGrid1_ItemCreated(object sender,
System.Web.UI.WebControls.DataGridItemEventArgs e)
{
switch (e.Item.ItemType)
{
case ListItemType.Item:
case ListItemType.AlternatingItem:
case ListItemType.SelectedItem:
foreach (TableCell cell in e.Item.Cells)
{
cell.Attributes.Add("onmouseover", "SetRowYellow(this);");
cell.Attributes.Add("onmouseout", "SetRowWhite(this);");
}
break;
}
}

This adds a little bit of bloat to the page, but it does work.

->AlanM

 

[AlanM]

BTW - I know this isn't exactly the same as a DataList with
ExtractTemplateRows=True, but the basic idea should still work.
->AlanM

 

[AlanM]

turns out it needs a lot more for ExtractTemplateRows. Here's a new
ItemCreated event handler:

private void DataList1_ItemCreated(object sender,
System.Web.UI.WebControls.DataListItemEventArgs e)
{
switch (e.Item.ItemType)
{
case ListItemType.Item:
case ListItemType.AlternatingItem:
case ListItemType.SelectedItem:
foreach (Control c in e.Item.Controls)
{
if (c is Table)
{
Table table = (Table)c;
foreach (TableRow row in table.Rows)
{
foreach (TableCell cell in row.Cells)
{
cell.Attributes.Add("onmouseover",
"SetRowYellow(this);");
cell.Attributes.Add("onmouseout",
"SetRowWhite(this);");
}
}
}
}
break;
}
}

 

[Lubomir]

Hi Alan,

Thank you

Lubomir