Change Repeater row background color on mouse hover in Asp .net

 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: 


                
                    
<%#Eval("Name") %>

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:

Repeater-Mouseover-effect-codingfusion

 
We are nothing without our users ! You can help us offer even more high quality content. Please share our page !
Best quality Asp .Net Ajax Control Toolkit tutorials.

Give your valuable comments.

Name
Email
Comment
6 + 4 =
 
About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2017 CodingFusion