ASP.Net GridView With Fixed Header

Introduction

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

Output