Learn ASP.NET MVC How to's for free here.
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 ...

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 How to Tips and Tricks (700+)

.NET How to Tips and Tricks (700+) This ".NET How to Tips and Tricks" contains solutions of hundreds of technical problems related with ASP.NET, ASP.NET MVC, SQL Serer, jQuery etc. 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 (Ex Microsoft MVP).

 Latest tutorials

 Posts from Itfunda

  • 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: $75.00 Discount: 25.00% | Final Price: Rs 3375.00/$56.25
    More details ...

  • ASP.NET AJAX Online Training
    Learn ASP.NET AJAX in just 3 days. Comes with a complete course materials e-book + demo application with source code and 3 months online priority support.
    | Final Price: Rs 1999.00/$39.00
    More details ...


Share this to:

Facebook Twitter LinkedIn Google+ Pinterest Email Addthis


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.

© SN ITFunda Services LLP. Site design and layout is copyright to SN ITFunda Services LLP.
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. | 16102020 | 12/14/2024 8:13:07 AM