May 6, 2024
Headlines

ASP.NET GridView With Fixed Header

Craig Johnson09 mins

In this article, I will share with you a GridView using Bootstrap with fixed headers. Here, I am using Bootstrap and javascript to fix the header of  ASP.Net gridview.

I have created the database table.

Table Name : TEST_SAMPLE_TBL  Columns  EMPLOYEE_ID EMPLOYEE_NAME EMPLOYEE_ADD

Now, I will share the code which is used to fix the header along with the grid bind.

Styles

<style type="text/css">.watermark { opacity: 0.6; color: seagreen; } .pagination-ys { /*display: inline-block;*/ padding-left: 0; margin: 20px 0; border-radius: 4px; } .pagination-ys table>tbody>tr>td { display: inline; } .pagination-ys table>tbody>tr>td>a, .pagination-ys table>tbody>tr>td>span { position: relative; float: left; padding: 8px 12px; line-height: 1.42857143; text-decoration: none; color: #dd4814; background-color: #ffffff; border: 1px solid #dddddd; margin-left: -1px; } .pagination-ys table>tbody>tr>td>span { position: relative; float: left; padding: 8px 12px; line-height: 1.42857143; text-decoration: none; margin-left: -1px; z-index: 2; color: #aea79f; background-color: #f5f5f5; border-color: #dddddd; cursor: default; } .pagination-ys table>tbody>tr>td:first-child>a, .pagination-ys table>tbody>tr>td:first-child>span { margin-left: 0; border-bottom-left-radius: 4px; border-top-left-radius: 4px; } .pagination-ys table>tbody>tr>td:last-child>a, .pagination-ys table>tbody>tr>td:last-child>span { border-bottom-right-radius: 4px; border-top-right-radius: 4px; } .pagination-ys table>tbody>tr>td>a:hover, .pagination-ys table>tbody>tr>td>span:hover, .pagination-ys table>tbody>tr>td>a:focus, .pagination-ys table>tbody>tr>td>span:focus { color: #97310e; background-color: #eeeeee; border-color: #dddddd; } .container { border-radius: 5px; background-color: whitesmoke; padding: 20px; } .button-62 { /*background: linear-gradient(to bottom right, #19b259, #000000);*/ border: 0; border-radius: 7px; color: #FFFFFF; cursor: pointer; display: inline-block; font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 2.5; outline: transparent; padding: 0 1rem; text-align: center; text-decoration: none; transition: box-shadow .2s ease-in-out; user-select: none; -webkit-user-select: none; touch-action: manipulation; white-space: nowrap; } .button-62:not([disabled]):focus { box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(239, 71, 101, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5); } .button-62:not([disabled]):hover { box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(239, 71, 101, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5); } /* CSS */ .button-grid { background: linear-gradient(to bottom right, #fff, #e4dada); border: 1; border-radius: 12px; color: black; cursor: pointer; display: inline-block; font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 2.5; outline: transparent; padding: 0 1rem; text-align: center; text-decoration: none; transition: box-shadow .2s ease-in-out; user-select: none; -webkit-user-select: none; touch-action: manipulation; white-space: nowrap; } </style>

Javascript: This is the main line that fixed the gridview headers at the top when you scroll down.

<script src = "Scripts/jquery-1.4.1.min.js"
type = "text/javascript" > </script>
<script src = "Scripts/ScrollableGridViewPlugin_ASP.NetAJAXmin.js"
type = "text/javascript" > < /script>
<script type = "text/javascript" >
	$(document).ready(function() {
		$('#<%=GrdLoader.ClientID %>').Scrollable({
			ScrollHeight: 400,
			IsInUpdatePanel: true
		});
	});
</script>

ASP.NET Gridview: put inside the Div for display.

<div class="container" style="width: 1870px;"> <div class="panel panel-default"> <div class="panel-heading watermark"> <h3>EMPLOYEE DETAIL</h3> </div> <div class="panel-body"> <br /> <asp:UpdatePanel ID="up" runat="server"> <ContentTemplate> <div style="font-size: 12px; width: 38%; height: 500px;" runat="server" id="DivGrid" visible="false"> <asp:GridView ID="GrdLoader" EmptyDataText="No Record Found" runat="server" AutoGenerateColumns="false" AlternatingRowStyle-BackColor="WhiteSmoke" CssClass="grid table-condensed table-bordered button-grid" AlternatingRowStyle-CssClass="alt" GridLines="Both" Width="100%"> <HeaderStyle BackColor="DarkGreen" Font-Names="arial" ForeColor="White" Font-Size="12px" HorizontalAlign="Right" Width="1000px" /> <RowStyle Font-Names="arial" Font-Size="10px" /> <Columns> <asp:BoundField HeaderText="EMPLOYEE ID" DataField="EMPLOYEE_ID" ItemStyle-HorizontalAlign="Left" HeaderStyle-Width="100px" /> <asp:BoundField HeaderText="EMPLOYEE NAME" DataField="EMPLOYEE_NAME" ItemStyle-HorizontalAlign="Left" HeaderStyle-Width="300px" /> <asp:BoundField HeaderText="EMPLOYEE ADDRESS" DataField="EMPLOYEE_ADD" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="500px" /> </Columns> </asp:GridView> </div> </ContentTemplate> </asp:UpdatePanel> </div> </div> </div>

Code Behind for Grid Bind: I have called the gridview on page load.

DbContext dbContext = new DbContext();
string strQuery = string.Empty;
protected void Page_Load(object sender, EventArgs e) {

  BindGrid();
}

private void BindGrid() {

  strQuery = "SELECT EMPLOYEE_ID,EMPLOYEE_NAME,EMPLOYEE_ADD FROM TEST_SAMPLE_TBL";
  dbContext.FillGridView(GrdLoader, strQuery);
  DivGrid.Visible = true;
}

Best and Most Recommended ASP.NET Core 8 Hosting

Fortunately, there are a number of dependable and recommended web hosts available that can help you gain control of your website’s performance and improve your ASP.NET Core 8 web ranking. HostForLIFEASP.NET is highly recommended. In Europe, HostForLIFEASP.NET is the most popular option for first-time web hosts searching for an affordable plan.

Their standard price begins at only € 3.49 per month. Customers are permitted to choose quarterly and annual plans based on their preferences. HostForLIFEASP.NET guarantees “No Hidden Fees” and an industry-leading ’30 Days Cash Back’ policy. Customers who terminate their service within the first thirty days are eligible for a full refund.

By providing reseller hosting accounts, HostForLIFEASP.NET also gives its consumers the chance to generate income. You can purchase their reseller hosting account, host an unlimited number of websites on it, and even sell some of your hosting space to others. This is one of the most effective methods for making money online. They will take care of all your customers’ hosting needs, so you do not need to fret about hosting-related matters/

 

Related News