How to make Scrollable GridView with a Fixed Header (freeze row) in .NET


Introduction

In this post, I am implementing How to make Scrollable GridView with a Fixed Header (freeze row) in .NET
GridView doesn’t have the ability to scroll. Here in this post I have explained How to do this with keeping same style and without changing anything in the gridview.

Steps :

Step - 1 : Create New Project.

Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create table for fetch data.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.
In this example, I have used one tables as below

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Add a Webpage and Design for Show Data in Fixed header Gridview.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select web form/ web form using master page under Web > Enter page name > Add.

HTML Code
                <h3>Scrollable Gridview with fixed header in ASP.NET</h3>
                <br />
                <div style="width:550px;">
                    <div id="GHead"></div> 
                    <%-- This GHead is added for Store Gridview Header  --%>
                    <div style="height:300px; overflow:auto">
                        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" 
                            CellPadding="5" HeaderStyle-BackColor="#f3f3f3">
                            <Columns>
                                <asp:BoundField HeaderText="ID" DataField="StateID" />
                                <asp:BoundField HeaderText="Country" DataField="Country" />
                                <asp:BoundField HeaderText="StateName" DataField="StateName" />
                            </Columns>
                        </asp:GridView>
                    </div>
                </div>
        
JS Code
             <script src="Scripts/jquery-1.7.1.js"></script>
            <script language="javascript" >
                $(document).ready(function () {
                    var gridHeader = $('#<%=GridView1.ClientID%>').clone(true); // Here Clone Copy of Gridview with style
                    $(gridHeader).find("tr:gt(0)").remove(); // Here remove all rows except first row (header row)
                    $('#<%=GridView1.ClientID%> tr th').each(function (i) {
                        // Here Set Width of each th from gridview to new table(clone table) th 
                        $("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
                    });
                    $("#GHead").append(gridHeader);
                    $('#GHead').css('position', 'absolute');
                    $('#GHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);
            
                });
            </script>
        

Step-6: Write below code in page_load event for fetch data from database and show in Gridview.


            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    PopulateData();
                }
            }
        
and here is the function...
            private void PopulateData()
            {
                using (MyDatabaseEntities dc = new MyDatabaseEntities())
                {
                    GridView1.DataSource = dc.StateDatas.ToList();
                    GridView1.DataBind();
                }
            }
        

And this function is also required to add. This is required to solve this problem --> Control 'MainContent_GridView1' of type 'GridView' must be placed inside a form tag with runat=server.

             public override void VerifyRenderingInServerForm(Control control)
            {
                // this is required for avoid error (control must be placed inside form tag)
            }
        

Step-7: Run Application.



Related Post : 
  1. How to group columns in gridview header row in ASP.NET (programmer friendly way)
  2. How to Marge Gridview adjacent cells depending on cells value in ASP.NET
  3. How to load gridview rows on demand from database through scrolling in ASP.NET
  4. How to apply Databar formatting on Gridview div like Excel conditional formatting options.
  5. How to apply formatting on Gridview based on condition div like Excel conditional formatting options.
  6. How to export gridview to excel & Word file in asp.net


Hello ! My name is Sourav Mondal. I am a software developer working in Microsoft .NET technologies since 2010.

I like to share my working experience, research and knowledge through my site.

I love developing applications in Microsoft Technologies including Asp.Net webforms, mvc, winforms, c#.net, sql server, entity framework, Ajax, Jquery, web api, web service and more.