Beautiful GridView Design Using Custom CSS In Asp.Net

1958 views topfaida@admin February 17, 2022 ☆ ☆ ☆ ☆ ☆ 0 0

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.

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 websites, web applications, and web services.

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_

<%@ 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

Also Read: Which CSS property controls the text size?

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;
   }

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.

Also Read: How to create a website using HTML and CSS

[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;
    }

What is asp? and History of ASP.NET

Make A Gridview Design Code In Asp.Net

CSS Code For Attractive Gridview In Asp.Net

How to style Textbox In GridView Using CSS?

How To Style Drop Down List In GridView Using CSS?

Leave a Reply Cancel reply