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?

alejandrobog · Accepted Answer · 2010-06-03 21:25:39Z

3

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>

answered Jun 3, 2010 at 21:25

alejandrobog

2,1011 gold badge14 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Justin C Over a year ago

Thanks, the hover works great. I cannot get the click to work though. I did get it to compile after making a few dumb mistakes. Click does cause a post back, but it is not called the selection event of the ListView the way a button of CommandType of Select would. Any ideas?

Kirk · Accepted Answer · 2013-08-15 00:06:48Z

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" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
 <title>Untitled Page</title>
 <link href="css/GridViewStyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form id="form1" runat="server">
 <div>
  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BorderWidth="0px" CellPadding="8" CssClass="MyGridView" Width="400px" OnRowCreated="GridView1_RowCreated">
   <Columns>
    <asp:BoundField DataField="Name" HeaderText="Name">
     <HeaderStyle HorizontalAlign="Left" />
    </asp:BoundField>
    <asp:BoundField DataField="Firstname" HeaderText="Firstname">
     <HeaderStyle HorizontalAlign="Left" />
    </asp:BoundField>
   </Columns>
   <HeaderStyle BackColor="Green" Font-Bold="True" ForeColor="White" />
  </asp:GridView>
 </div>
 </form>
</body>
</html>

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();
}

Collectives™ on Stack Overflow

ASP.NET ListView full row select

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related