In this article I’m
going to explain how to highlight DataList itemon mouseover using ASP.NET with
C#.
What is DataList .?
The DataList Web server control displays data in a
format that you can define using templates and styles. The DataList control is useful for data in any
repeating structure, such as a table. The DataList control can display rows in different
layouts, such as ordering them in columns or rows.
Template property and
Description:
ItemTemplate: Contains the HTML elements and
controls to render once for each row in the data source.
AlternatingItemTemplate: Contains the HTML elements and
controls to render once for every other row in the data source. Typically, you
use this template to create a different look for the alternating rows, such as
a different background color than the color that is specified in the ItemTemplate property.
SelectedItemTemplate: Contains the elements to render
when the user selects an item in the DataList control. Typically, you use this
template to visually distinguish the selected row with a different background
or font color. You can also expand the item by displaying additional fields
from the data source.
EditItemTemplate: Specifies the layout of an item
when it is in edit mode. This template typically contains editing controls,
such as TextBoxcontrols.
HeaderTemplate and FooterTemplate: Contains the text and controls
to render at the beginning and end of the list, respectively.
SeparatorTemplate: Contains the elements to render
between each item. A typical example might be a line (using an HR element).
Here I’ll show you how to highlight
DataList item on mouseover. First we’ve to bind DataList.
I have used Northwind database to
display employee details. Here
you can download Northwind database
http://northwinddatabase.codeplex.com/releases/view/71634
Table design:
|
Column
Name
|
Data
type
|
|
FirstName
|
varchar(100)
|
|
Title
|
varchar(100)
|
|
City
|
varchar(50)
|
|
Country
|
varchar(50)
|
|
PhotoPath
|
varchar(50)
|
Here
we’ve to use custom css stylesheet to highlight DataList item on mouseover.
<link href="css/style.css"
rel="stylesheet"
type="text/css"
/>
Designer source 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></title>
<link href="css/style.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="DataList1"
runat="server"
Font-Names="Verdana"
Font-Size="Small"
RepeatColumns="3"
RepeatDirection="Horizontal"
Width="600px">
<ItemStyle ForeColor="Black"/>
<ItemTemplate>
<div id="pricePlans">
<ul
id="plans">
<li
class="plan">
<ul class="planContainer">
<li class="title">
<h2>
<asp:Label ID="Label1" runat="server"
Text='<%# Bind("FirstName") %>'></asp:Label></h2>
</li>
<li class="title">
<asp:Image ID="imgPhoto"
runat="server"
Width="100px"
Height="100px"
ImageUrl='<%# Bind("PhotoPath","~/photo/{0}")
%>' />
</li>
<li>
<ul class="options">
<li><span>
<asp:Label ID="lblCName"
runat="server"
Text='<%# Bind("FirstName") %>'></asp:Label></span></li>
<li><span>
<asp:Label ID="lblName"
runat="server"
Text='<%# Bind("Title") %>'></asp:Label></span></li>
<li><span>
<asp:Label ID="lblCity"
runat="server"
Text=' <%# Bind("City") %>'></asp:Label></span></li>
<li><span>
<asp:Label ID="lblCountry"
runat="server"
Text='<%# Bind("Country") %>'></asp:Label></span></li>
</ul>
</li>
<li class="button"><a href="#">Details</a></li>
</ul>
</li>
</ul>
</div>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
Code behind:
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using System.Data;
using
System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
SqlConnection
conn = new SqlConnection("Data Source=SPIDER;Initial
Catalog=Northwind;Integrated Security=True");
protected
void Page_Load(object
sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
protected
void BindData()
{
DataSet ds = new DataSet();
DataTable FromTable = new DataTable();
conn.Open();
string cmdstr = "Select top 6 *
from Employees";
SqlCommand cmd = new SqlCommand(cmdstr, conn);
SqlDataAdapter adp = new SqlDataAdapter(cmd);
adp.Fill(ds);
DataList1.DataSource =
ds.Tables[0];
DataList1.DataBind();
}
}