In this article we will see how to create Repeater mouse over effect to change row background color of repeater rows when we scroll mouse over the rows.
My other posts related to repeater controls:
1) Dynamic ordered list using repeater
2) Repeater edit, update, delete using ADO .Net
Step1: Lets create some data to bind with repeater control. For this we will use datatable to bind with repeater this method will create datatable with some sample data and returns datatable:
public DataTable createDataTable()
{
DataTable dt = new DataTable();
DataColumn dc = new DataColumn();
dc.ColumnName = "Name";
dc.DataType = typeof(string);
dt.Columns.Add(dc);
dt.Rows.Add(new object[] { "Asp .Net Examples" });
dt.Rows.Add(new object[] { "Repeater Examples" });
dt.Rows.Add(new object[] { "GridView Examples" });
dt.Rows.Add(new object[] { "Validation Examples" });
dt.Rows.Add(new object[] { ".Net Interview Questions" });
dt.Rows.Add(new object[] { "Listview Examples" });
dt.Rows.Add(new object[] { "Validation Summary Examples" });
dt.Rows.Add(new object[] { "AjaxControlToolKit Examples" });
dt.Rows.Add(new object[] { "ModalPopup Examples" });
dt.Rows.Add(new object[] { ".Net Practice Questions" });
return dt;
}
Step2: Lets create our repeater control:
Step3: CSS to create mouse over effect:
Step4: Lets bind repeater with data:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
createUnorderedListUsingRepeater();
}
}
public void createUnorderedListUsingRepeater()
{
repHover.DataSource = createDataTable();
repHover.DataBind();
}
Final Output: