1. Home
  2. /
  3. Uncategorized
  4. /
  5. Beautiful GridView Design Using Custom CSS In Asp.Net

Beautiful GridView Design Using Custom CSS In Asp.Net

The two web development technologies Web Forms and Web Services are jointly called ASP.NET by Microsoft. It is much easier than ever to create dynamic and data-driven web applications using ASP.NET. Web applications created using ASP.NET work with a wide variety of browsers and the developer does not have to do any custom coding to maintain compatibility.

Make A Gridview Design Code In Asp.Net

Paste the below code inside the aspx file.

Beautiful GridView Design Using Custom CSS In Asp.Net
Beautiful GridView Design Using Custom CSS In Asp.Net
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridviewDesign.aspx.cs" Inherits="GridviewDesign" %>

<!DOCTYPE html>

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

    
    <title></title>
    <link href="https://techworldinfo.com/beautiful-gridview-design-using-custom-css-in-asp-dot-net/StyleSheetForGrid.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div id="DVGridDesign">
            <asp:GridView ID="GridDesign" class="grdDesign" runat="server" AutoGenerateColumns="False"
                OnSelectedIndexChanged="GridView1_SelectedIndexChanged" AllowPaging="True" PagerStyle-CssClass="PagerStyle" HorizontalAlign="Right" PagerStyle-HorizontalAlign="Right">
                <Columns>
                    <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" />
                    <asp:BoundField DataField="CustomerName" HeaderText="CustomerName" />
                    <asp:BoundField DataField="ContactName" HeaderText="ContactName" />
                    <asp:BoundField DataField="Address" HeaderText="Address" />
                    <asp:BoundField DataField="City" HeaderText="City" />
                    <asp:BoundField DataField="Country" HeaderText="Country" />

                    <asp:TemplateField HeaderText="Account Number">
                        <ItemTemplate>
                           <asp:TextBox runat="server" ID="txtAccNumber"></asp:TextBox>
                        </ItemTemplate>                        
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Status">
                        <ItemTemplate>
                           <asp:DropDownList runat="server">
                               <asp:ListItem>Active</asp:ListItem>
                               <asp:ListItem>Inactive</asp:ListItem>
                           </asp:DropDownList>
                        </ItemTemplate>                        
                    </asp:TemplateField>

                </Columns>
            </asp:GridView>
        </div>
       
    </form>
</body>
</html>

Also read: How To Center In Css | How To Center A Div Inside A Div

CSS Code For Attractive Gridview In Asp.Net

#DVGridDesign {
    width: 85%;
    margin: auto;
    padding-top: 20px;
}

#GridDesign {
    width: 100%;
}


#GridDesign {
    margin: 0px;
    padding: 0px;
    margin: auto; /*to display div in center and add "justify-content: center;" in parent div*/
    border: 2px solid;
    border-color: #004d98;
    border-radius: 500px 45px 30px 15px/40px 30px 45px 60px;
    background-color: #004d98;
    overflow: hidden; /*This codes are for displaying heading in one line*/
    white-space: nowrap;
    font-family: poppins;
    font-size: 20px;
}

    #GridDesign th {
        height: 80px;
        background-color: #004d98;
        color: #ffffff;
        text-align: left;
        border: none;
        font-family: poppins;
        font-size: 24px;
        font-weight: 600;
    }

    #GridDesign tr {
        height: 40px;
    }

        #GridDesign tr:nth-child(odd) {
            background-color: #f1f1f1;
        }

        #GridDesign tr:nth-child(even) {
            background-color: white;
        }

    #GridDesign th:nth-child(1), td:nth-child(1) {
        text-align: center;
    }

    #GridDesign select {
        width: 95%;
        margin: 2px;
        font-family: poppins;
        font-size: 20px;
        height: 42px;
    }

    #GridDesign input[type="text"] {
        padding: 12px;
        width: 87%;
        margin: 2px;
    }

.PagerStyle {
    background-color: #e9ff00;
}

    .PagerStyle td {
        background-color: beige;
        width: 25px;
        height: 25px;
        border: 2px solid #004d98;
        margin:20px;
        padding:3px;
    }
     .PagerStyle table
      {
            float:right;
            display:block;
            margin-right:20px;
            


      }

How to style Textbox In GridView Using CSS?

#GridDesign input[type="text"] {
       padding: 12px;
       width: 87%;
       margin: 2px;
   }

Also read: Which Is The Correct CSS Syntax?

How To Style Drop Down List In GridView Using CSS?

#GridDesign select {
    width: 95%;
    margin: 2px;
    font-family: poppins;
    font-size: 20px;
    height: 42px;
}

If you want to define the Outer Border of GridView, then first you have to define the Border of GridView and set the background color of GridView.

After that, you have to change the color of the alternate tr (table row) of GridView. Whose code is given below?

#GridDesign {
   
    border: 2px solid;
    border-color: #004d98;
    border-radius: 500px 45px 30px 15px/40px 30px 45px 60px;
    background-color: #004d98;
    overflow: hidden; /*This codes are for displaying heading in one line*/
    white-space: nowrap;   
}
   #GridDesign tr:nth-child(odd) 
{
    background-color: #f1f1f1;
}
#GridDesign tr:nth-child(even)
{
   background-color: white;
}

With the help of CSS, if you want to change the Pager Style of GridView, first you have to enable the Pager Style Property. That is, with PagerStyle-CssClass, you have to add the name of the class and add its CSS to the CSS file.

[PagerStyle-CssClass=”PagerStyle”]

 <asp:GridView ID="GridDesign" PagerStyle-CssClass="PagerStyle">

CSS Code 
.PagerStyle {
    background-color: #e9ff00;
}
/*CSS Code*/
.PagerStyle td
 {
    background-color: beige;
    width: 25px;
    height: 25px;
    border: 2px solid #004d98;
    margin:20px;
    padding:3px;
}
.PagerStyle table
{
   float:right;
   display:block;
   margin-right:20px;
    }

Also read: How To Add CSS In HTML?

What is asp? and History of ASP.NET

ASP.NET is an open-source server-side web application framework designed to create dynamic web pages for web development. It was primarily developed by Microsoft to create dynamic web sites, web applications, and web services.

Leave a Reply

Your email address will not be published.