ITFunda.Com
Your details are safeBuyer's Satisfaction
Contact Us
Welcome Guest | Register | Login Why online training? | Buyers FAQs | Testimonials | Contact us

Subscribe


Subscribe to Tutorials feed

Our Quality Professors


Our professors includes
Contact us for training ...

Timing availability

Timing in IST
8.00 AMJob SupportFull
9.00 AM-Available
10.30 AM-Available
1.00 PM-Available
3.30 PMASP.NETJust started
4.30 PMJob supportFull
5.30 PM-Available
9.00 PMAdvance C#Full
10.00 PM--
Contact us for more slots

Technology Tags


ADO.NET AdRotator ASP.NET ASP.NET-AJAX Authentication-and-Authorization---LoginView BulletedList Button Caching Calendar Chart CheckBoxList Cookies CSharp CSS Cusotm-Control Debugging-and-Tracing DetailsView DropDownList-and-ListBox DropDownList-and--ListBox Error-handling FileUpload Forms-Authentication GridView HiddenField HTML HyperLink Image ImageButton ImageMap Javascript jQuery jQuery-Ajax jQuery-Attributes jQuery-effects jQuery-Effects jQuery-Events jQuery-How-to-Solution jQuery-Manipulations jQuery-Selectors jQuery-Traversing Label-and-Literal LinkButton ListView Localization-and-Globalization Login LoginName LoginStatus LoginStatus-and-LoginName-and-other-controls LoginView MasterPage Menu Meta-tags Panel PlaceHolder RadioButtonList Repeater Security Session-Management TextBox Themes-and-Skins Url-Routing User-Control Validations visual-studio Webconfig Working-with-Files-and-Folders

Search Tutorials

Keyword
eg. asp.net

Announcements

More ...


 

How to display mouseover effect on GridView rows using CSS?


by: Itfunda Product Type: Tips and Tricks (Books) Technologies: ASP.NET  GridView 

To display mouseover effect on the GridView rows we can follow this approach.

ASPX Page
        <style type="text/css">
            #GridView1 tr.rowHover:hover
            {
                background-color: Yellow;
                font-family: Arial;
            }
        </style>
        <asp:GridView ID="GridView1" runat="server" EnableViewState="false" RowStyle-CssClass="rowHover" />
Code Behind
string _connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        GetData();
    }
}
private void GetData()
{
    DataTable table = new DataTable();
    // get the connection
    using (SqlConnection conn = new SqlConnection(_connStr))
    {
        // write the sql statement to execute
        string sql = "SELECT AutoId, FirstName, LastName, Age, Active FROM PersonalDetail ORDER By AutoId";
        // instantiate the command object to fire
        using (SqlCommand cmd = new SqlCommand(sql, conn))
        {
            // get the adapter object and attach the command object to it
            using (SqlDataAdapter ad = new SqlDataAdapter(cmd))
            {
                // fire Fill method to fetch the data and fill into DataTable
                ad.Fill(table);
            }
        }
    }
    // specify the data source for the GridView
    GridView1.DataSource = table;
    // bind the data now
    GridView1.DataBind();
}
In the above code snippet, the code behind code is just to populate records from the database to the GridView. On the .aspx page in the GridView RowStyle-CssClass, we have specified ”rowHover” css class. In this CSS class we have changed the background color to “Yellow” and font family to “Arial”.

The “rowHover” CSS class style will only gets applied when we hover the rows of the GridView (notice the CSS rowHover class declaration in the .aspx page and you should understand how this filteration is working).

OUTPUT



This post is the part of following product

.NET Tips and Tricks

.NET Tips and Tricks This ".NET How to Tips and Tricks" contains solutions of hundreds of technical problems that help you to develop real time .NET projects easily. It has following features
  • Video tutorials
  • Demo projects source code
  • eBook with to-the point explanations & output
prepared by Sheo Narayan (Microsoft MVP).

 Latest tutorials

 Posts from Itfunda

  • ASP.NET Online Training - Complete Web Development Training
    ASP.NET 4.0 using Visual C# - A comprehensive web development online training. This training gives you real time scenario based knowledge on HTML, JavaScript, CSS, C#, ASP.NET and ASP.NET AJAX that help you to work on any kind of web development projects in .NET technologies. This training is delivered by Sheo Narayan (Microsoft MVP). Suitable for Windows developer or a complete freshers in the IT Industry.
    List Price: $399.00 Discount: 12.50% | Final Price: Rs 17499.13/$349.13
    More details ...

  • CSS3 Online training
    In this training, you learn different types of Selectors, visual effects, web fonts, animation and working with Font service APIs. This is instructor led training and it is delivered by Sheo Narayan (Microsoft MVP).
    List Price: $100.00 Discount: 25.00% | Final Price: Rs 3750.00/$75.00
    More details ...


Share this to:




About Us | Contact Us | Partners | Privacy Policy | Terms and Conditions | Buyer's FAQs | Seller's FAQs | Currency Converter | Go Top

Notice: If you found someone plagiarising our content/materials, kinldy let us know.

© IT Funda Corporation. Site design and layout is copyright to IT Funda Corporation.
Copying or duplicating or mimicking the site design and layout is prohibited and will be treated as a legal offence and will be prosecuted.
Logos, company, product, service or other names used here if any are only for reference purposes and they may be respective owner's right or trademarks.