GridView is one of the most used data bound controls in Visual Studio by any developer if the web application is interacting with database. Sometimes, we need to display a large amount of data in a
GridView and that too in a small space or portion of web form. We will make a scrollable
GridView here. And later, we will add a must have feature, i.e., Fixed Headers in
GridView. Even we scroll
GridView, headers will remain at the top and visible always.
- Visual Web Developer or Visual Studio or similar tool.
- A data source, SQL Server, XML file or other source. We will work here with SQL Server Database.
- Some C# or VB for binding data to
GridView and also writing some simple code. I am using C# here. Convert your code to VB from online tools if you are using Visual Basic.
- Basic understanding of HTML.
- Basic understanding of CSS.
Create a GridView
We will create a
GridView, instead of using Drag and Drop concept, we will manually write code to generate
GridView. Directly code for
GridView in ASPX page.
<asp:TemplateField HeaderText="District ID"
<asp:Label ID="lblDistID" runat="server"
<asp:TemplateField HeaderText="District Name"
<asp:Label ID="lblDistName" runat="server"
Notable Points in the above code:
AutoGenerateColumns = "false": This will not generate columns itself according to data source columns.
HeaderStyle-Width="80px" ItemStyle-Width="80px": We have set the Value for
width of Header and Item exactly same. If we do not apply this explicitly here, the Header will not appear properly while applied Fixed Header style.
- Other is simple
GridView code, having 3 Columns, getting value from Backend using
Now the next step is to Bind Data to
GridView. Let's move to back-end and write some code to perform Data-binding. We have nothing more to do here, so I am going to write code inside
protected void Page_Load(object sender, EventArgs e)
string ConStr = "Data Source=localhost;Initial Catalog=ShikshaNet;Integrated Security=True";
string Query = "SELECT * FROM Districts";
SqlConnection con = new SqlConnection(ConStr);
SqlDataAdapter adp = new SqlDataAdapter(Query, con);
DataTable dt = new DataTable();
gvDistricts.DataSource = dt.DefaultView;
This code will simply get the data from default SQL Server Instance, database named
ShikshaNet with Windows Authentication.
Till now, we have designed a
GridView with 3 columns, bind data to
gridview. Let's move ahead and make it scrollable. Just go inside the code of
GridView and add a
style tag with below properties.
.... style="height:400px; overflow:auto" ......
You can change
overflow:scroll but that will show both
Scrollbar and always. Above will show Vertical Scroll-bar only when the
GridView exceeds the assigned height.
We have done most of the task. Let's see its output in browser.
Let's scroll page to down.
Now, data has been loaded,
Gridview is showing perfect, it is scrolling in page also. Now it's time to remove its other drawback. Headers are not showing here while scrolling down. Let's apply this code so that header can be sticky or frozen at the top of
gridview. Now write a CSS property using class selector method and apply for header in
CSS Selector will be as:
Now apply this class in
gridview as header style.
GridView code will be like this:
<asp:GridView ID="gvDistricts" runat="server" style="height:400px; overflow:auto"
Output of the above practice.
Oh! The first row of the
gridview is overlapped with the header. While scrolling it will work fine but, we have to work on it to show the first row to user. Write the below code in
protected void gvDistricts_RowDataBound(object sender, GridViewRowEventArgs e)
if (e.Row.RowType == DataControlRowType.DataRow)
if (e.Row.RowIndex == 0)
Let's see the final output.
Thanks for reading.