ASP.NET ListView full row select

Question

So I am playing around with using a ListView instead of a GridView to accomplish a complicated goal. The ListView is helping in a lot of ways, but there is one particular bit of code I am used to using with GridView's that won't doesn't work with ListView's.

If I have to have a nice mouse hover action on my rows in a GridView, and if I want to let a user click anywhere in a row to select it, I use the OnRowDataBound event and do something like this

e.Row.Attributes["onmouseover"] = "this.oldClass=this.className;this.className='hover';";
e.Row.Attributes["onmouseout"] = "this.className=this.oldClass;";
e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(gdvBuildings, "Select$" + e.Row.RowIndex.ToString());

It works great with GridViews. With the ListView I can use the OnItemDataBound event, but there doesn't seem to be any control that has an Attributes array to add to.

Does anyone know of an equivalent solution to allow for mouse hover and full row click with a ListView?

Answer 1

On a ListView you are creating the row yourself so you can add this functionality directly on the row, something like this.

<asp:ListView ID="ListView3" runat="server">
<ItemTemplate>
  <tr onmouseover="this.oldClass=this.className;this.className='hover';" onmouseout="this.className=this.oldClass;" onclick='<%# Page.ClientScript.GetPostBackClientHyperlink(gdvBuildings, "Select$" + Container.DataItemIndex.ToString()) %>' >
    <td>
      <asp:Label ID="Label7" runat="server" Text='<%# Eval("ClientNumber") %>' />
    </td>
    <td>
      <asp:Label ID="CityNameLabel" runat="server" Text='<%# Eval("FullName") %>' />
    </td>
  </tr>
</ItemTemplate>
<LayoutTemplate>
  <table id="itemPlaceholderContainer" runat="server" border="0" style="">
    <tr id="itemPlaceholder" runat="server">
    </tr>
  </table>
</LayoutTemplate>
</asp:ListView>

Answer 2

From : http://www.codegod.de/WebAppCodeGod/Mouseover-Effect-Hover-for-ASP-NET-GridView-with-CSS-AID476.aspx

We add a CSS-file to our project with a single CSS-class called MyGridView which only contains the font-settings:

.MyGridView { font-family: Arial; font-size: 12px; }

The next thng we have to define is a CSS-class for a GridView-row. Such a row is internally represented by an HTML TR-tag. So we have to define the class like that for the normal row and the row when hovered:

.MyGridView tr.row { color: #000000; background-color: #FFFFFF; } .MyGridView tr.row:hover { background-image: url('../img/GridViewBG.jpg'); background-repeat: repeat-x; color: #333333; }

For the hovering-effect we created a small image named GridViewBG.jpg which has a size of 2px x 30px. It is the green gradient you can see when the mousepoiner is over a row.

After that, we a add the CSS-file to the ASP.NET-form. Here is the form's full markup-code:

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

As you can see, we defined two columns to display data for persons. The CSS-class for the GridView is assigned by the property CssClass="MyGridView". But assigning this is not enough because the class for a GridView's row has also to be assigned. We use the GridView's event RowCreated for this task:

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { // Set the CSS-class "row" for normal grid-rows if (e.Row.RowType == DataControlRowType.DataRow) e.Row.CssClass = "row"; }

(3) Display data

Now the only thing left to do is to fill the GridView with some sample data so that we can see the mouseover-effect in action. Here is our DataSourceProvider-class that generates some data for us:

public class DataSourceProvider { public static DataTable GetPersons() { DataTable result = new DataTable(); result.Columns.Add("Name"); result.Columns.Add("Firstname"); AddPerson(result, "Matthias", "Pieroth"); AddPerson(result, "Mark", "Twain"); AddPerson(result, "Charles", "Bukowski"); AddPerson(result, "Francois", "Villon"); return result; } private static void AddPerson(DataTable table, string firstName, string name) { DataRow row = table.NewRow(); row["Name"] = name; row["Firstname"] = firstName; table.Rows.Add(row); } }

The binding of these data is done in the form's Page_Load-event

protected void Page_Load(object sender, EventArgs e) { GridView1.DataSource = DataSourceProvider.GetPersons(); GridView1.DataBind(); }