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 :