Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

GridView custom CSS style and text alignment example in ASP.NET

07:37:00  , ,  No comments

GridView custom CSS style


Gridview display the database values on GridView Row but we want to custom style add the css for Gridview row,header,paging like below example using asp.net.

                                    DEMO

                     
                           
   CSS 
.SGrid {
    width:auto;
    background-color: #fff;
    margin: 5px 0 10px 0;
    border: solid 1px #ff006e;
    border-collapse:collapse;
}

.SGrid th {
    padding: 4px 2px;
    color: #fff;
    background:#f17c7c;
    border-left: solid 1px #ff006e;
    font-size: 0.9em;
    text-align:center !important;
}
.SGrid td {
    padding: 2px;
    border: solid 1px #ff006e;
    color: #717171;
    text-align:center !important;
}
.SGrid .alt { background: #cec4c4 ; }
.SGrid .pgr { background: #424242 ; }
.SGrid .pgr table { margin: 5px 0; }
.SGrid .pgr td {
    border-width: 0;
    padding: 0 6px;
    border-left: solid 1px #f17c7c;
    font-weight: bold;
    color: #f17c7c;
    line-height: 12px;
    background:#fff;
     text-align:center !important;
 }  
.SGrid .pgr a { color:#424242; text-decoration: none; }
.SGrid .pgr a:hover { color:#ff006e; text-decoration: none; }


  HTML CODING


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">

     /*GRIDVIEW STYLISH*/ 

        .SGrid {
    width:auto;
    background-color: #fff;
    margin: 5px 0 10px 0;
    border: solid 1px #ff006e;
    border-collapse:collapse;
}

.SGrid th {
    padding: 4px 2px;
    color: #fff;
    background:#f17c7c;
    border-left: solid 1px #ff006e;
    font-size: 0.9em;
    text-align:center !important;
}
.SGrid td {
    padding: 2px;
    border: solid 1px #ff006e;
    color: #717171;
    text-align:center !important;
}
.SGrid .alt { background: #cec4c4 ; }
.SGrid .pgr { background: #424242 ; }
.SGrid .pgr table { margin: 5px 0; }
.SGrid .pgr td {
    border-width: 0;
    padding: 0 6px;
    border-left: solid 1px #f17c7c;
    font-weight: bold;
    color: #f17c7c;
    line-height: 12px;
    background:#fff;
     text-align:center !important;
 }  
.SGrid .pgr a { color:#424242; text-decoration: none; }
.SGrid .pgr a:hover { color:#ff006e; text-decoration: none; }

 /*GRIDVIEW STYLISH*/
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div align="center">
        <asp:GridView ID="GridView1" AlternatingRowStyle-CssClass="alt" PagerStyle-CssClass="pgr" CssClass="SGrid"

            runat="server" AllowPaging="True" AutoGenerateColumns="False" DataKeyNames="Id" DataSourceID="SqlDataSource1" PageSize="3">
<AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" SortExpression="Id" />
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                <asp:BoundField DataField="Username" HeaderText="Username" SortExpression="Username" />
                <asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:dbcon %>" SelectCommand="SELECT * FROM [register]"></asp:SqlDataSource>
    </div>
    </form>
</body>

</html>



Add - New Webform - Write Css Styles  for Gridview Row,Header,Pager 





Next - Add pager Custom Css and call the CSS Class for Gridview alt,SGrid,pgr





Below Like After Added Custom css Show the Gridview Text Align Center



Read More

Show Image Hover Effect Using CSS Style in Asp.Net

04:01:00  , , ,  No comments

Show Image Hover Effect Using CSS Style 

Cursor Move To Display Image  Show Some Effects on MouseHover in Using CSS Style in Asp.Net.

                                Download Coding
                                                 Download

                                     DEMO

                        HTML CODING
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Show Image Hover Effect Using CSS Style in Asp.Net </title>
     <style>
        .ShowEffect:hover
        {
              box-shadow: 0 0 95px yellow;           
             width: 250px;
             height :250px;  
             -moz-box-shadow: 0 0 95px yellow;
              -webkit-box-shadow: 0 0 95px yellow;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div align="center">
            <br />
            <br />
<div class="ShowEffect" >  
         <asp:Image ID="Image1"  runat="server" ImageUrl="~/Koala.jpg" Height ="250px" Width="250px" />
    </div></div>
    </form>
</body>
</html>



First Create New WebForm - Add Image Control From ToolBox - Property[F4] - ImageURL - Add Iamge





Next - Add Style for Hover Add Class To Image Div









Read More

Highlight GridView Row Values on MouseHover Using JQuery in Asp.Net C#

04:07:00  , , , , , ,  No comments

Highlight GridView Row Values on MouseHover

Display Gridview Details Want To Highlight GridView Row on Mousehover Using JQuery in Asp.Net C#.

                     Download Coding
                        
                       Download

                             DEMO
                    

HTML CODING

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">
    <title>HighLight GridView Row on MouseHover Using JQuery</title>
       <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" lang="javascript">
        $(document).ready(function ()
        {            $("#<%=GridView1.ClientID%> tr").hover(
            function ()
            {
                $(this).css("background-color", "pink");
            },
            function ()
            {
                $(this).css("background-color", "white");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div align="center">
    <br /><br />
        <asp:GridView ID="GridView1" runat="server" ShowHeader="true" AutoGenerateColumns="False">
            <AlternatingRowStyle BackColor="Silver" />
            <Columns>
                <asp:BoundField ShowHeader="true" DataField="filename" HeaderText="File Name" />
                <asp:BoundField ShowHeader="true" DataField="filepath" HeaderText="File Path" />
            </Columns>
            <HeaderStyle BackColor="#CC3300" />
        </asp:GridView>
        <br />
    </div>
    </form>
</body>
</html>


C# CODING

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
{
    protected void Page_Load(object sender, EventArgs e)
    {
         SqlConnection con = new        SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["dbcon"].ToString());
        con.Open();
        SqlCommand cmd = new SqlCommand("select * from reg", con);
        SqlDataAdapter adp = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        adp.Fill(ds);
        GridView1.DataSource = ds;
        GridView1.DataBind();
    }
}


First Create - New Web Form - Add Gridview From 

ToolBox - Edit Column - Add BoundField - Add 





Next - Change Header Text For BoundField - Add Database Field Name






Next - Add - Script File Call JQuery Plugin - Assign Gridview if Mouse







Read More