In today's tutorial, we'll delve into a common challenge faced by web developers when dealing with large datasets in ASP.NET GridView. The issue arises when there is limited space to display the gridview data on a webpage. The solution? Implementing a fixed header that remains visible while scrolling through the gridview data. Follow along as we guide you through the process and witness the magic in the GIF above.
Database Setup:
To demonstrate this technique, we'll be using a database from a previous project, the Create Book Inventory Project.
Implementation Steps:
1. Gridview Properties:
- Set ShowHeader property of GridView1 to "false."
2. Create HTML Design:
- Utilize an HTML table to manually create the gridview header.
- Style the header table with CSS for a visually appealing look.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridviewFixedHeader.aspx.cs" Inherits="GridviewFixedHeader" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.grd_header_table
{
background:#ffffff;
color:#fafafa;
font-weight:bold;
border:1px solid #FF0040;
width:580px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="grd_header_table">
<table bgcolor="#FF0040" rules="all" >
<tr>
<td style ="width:55px;">BookID</td>
<td style ="width:260px;">Book Name</td>
<td style ="width:114px;">Author</td>
<td style ="width:206px;">Pub. Name</td>
<td style ="width:100px;">Pub. Date</td>
</tr>
</table>
</div>
<div style ="height:130px; width:600px; overflow:auto;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
ShowHeader = "False" Width ="580px" >
<Columns>
<asp:BoundField DataField="Book_Id" />
<asp:BoundField DataField="Book_name" />
<asp:BoundField DataField="Book_author" />
<asp:BoundField DataField="Book_Publisher_name" />
<asp:BoundField DataField="Book_Published_date" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
3. C# Coding:
- In the code-behind (GridviewFixedHeader.aspx.cs), establish a connection to the database and load the gridview data during the initial page load.
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;
using System.Configuration;
public partial class GridviewFixedHeader : System.Web.UI.Page
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbCon"].ToString());
string query;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
FillGridData();
}
}
private void FillGridData()
{
query = "select * from Book";
SqlDataAdapter da = new SqlDataAdapter(query, con);
DataSet ds = new DataSet();
da.Fill(ds, "book");
GridView1.DataSource = ds;
GridView1.DataBind();
}
}
With these steps, you've successfully implemented a fixed header for your ASP.NET GridView. This technique enhances user experience by providing a seamless way to scroll through extensive datasets while keeping the column headers in view. Feel free to adapt this solution to your projects and enjoy a more user-friendly data presentation.
0 Comments