I am developing ASP.NET application. I have been using gridview for adding/editing/deleting records for most of the forms. some of the gridview will have more than 1000 rows. for temporary, i have used CSS overflow to freeze the records. But, it will scroll the entire gridview (including header and rows.) I want to freeze the gridview header column and then rows like excel freeze. How to do this..? Is there any way to freeze gridview header except css overflow..?

See this thread https://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-table-only-fixed-table-header-scrolling but a 1000 rows is too many. You should use a JavaScript table with virtual scrolling. See the popular datatables https://datatables.net

I tried below, and it worked for me. Please try out https://asp-blogs.azurewebsites.net/dwahlin/freeze-asp-net-gridview-headers-by-creating-client-side-extenders

How to Freeze Header in ASP.NET Gridview using C#

Accepted answer

Lan Huang-MSFT 29,911 Microsoft Vendor

Hi @BeUnique,

You can use jQuery DataTable plugin to fix the header.

Demo:

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/4.1.0/js/dataTables.fixedColumns.min.js"></script>
<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/fixedcolumns/4.1.0/css/fixedColumns.dataTables.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    .auto-style1 { width: 600px; border-style: solid; border-width: 2px; }
    .dataTables_scrollHead { width: 600px !important; }
    .dataTables_scrollHeadInner { width: 600px !important; }
    .dataTables_scrollBody { width: 600px !important; }
</style>
<script type="text/javascript">
    $(function () {
        $('#gvCustomers tfoot tr').appendTo('#gvCustomers thead');
        $('#gvCustomers').removeAttr('width').DataTable({
            bFilter: true,
            bSort: true,
            scrollY: "150px",           
            scrollCollapse: true,
            paging: false,
            fixedColumns: false,
            orderCellsTop: true
        });
    });
</script>

Or use Responsive used with the DataTables FixedHeader extension.

https://datatables.net/extensions/responsive/examples/column-control/fixedHeader.html

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread

BeUnique 2,212 Reputation points

2024-08-13T07:38:36.91+00:00

Hi @Lan Huang-MSFT ,

Thanks for your reply.

I am using "checbox" option in one column in the gridview.

Does the above jQuery DataTable plugin work to fix the header issue (including checkbox option)...?
BeUnique 2,212 Reputation points

2024-08-13T07:39:33.41+00:00

Hi @Lan Huang-MSFT ,

Thanks for your reply.

I am also using "checkbox" option in one column in the gridview.

Does the above jQuery DataTable plugin work to fix the header issue (including checkbox option)...?
Lan Huang-MSFT 29,911 Reputation points Microsoft Vendor

2024-08-13T08:23:25.1333333+00:00

Hi @BeUnique,

Including the checkbox option might work too. You can try that (avoid post back). If you encounter problems, you can provide your code so we can help you.

BeUnique 2,212

Hi @Lan Huang-MSFT ,

I tried below code. But, i am not getting freeze header in the Gridview.

<%@ Page Title="" Language="C#" AutoEventWireup="true"
    CodeBehind="Test_GridFreeze.aspx.cs"
    Inherits="Customer.Test_GridFreeze" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxTool" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test - Grid Freeze</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/4.1.0/js/dataTables.fixedColumns.min.js"></script>
    <link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/fixedcolumns/4.1.0/css/fixedColumns.dataTables.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .auto-style1 {
            width: 600px;
            border-style: solid;
            border-width: 2px;
        }
        .dataTables_scrollHead {
            width: 600px !important;
        }
        .dataTables_scrollHeadInner {
            width: 600px !important;
        }
        .dataTables_scrollBody {
            width: 600px !important;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('#gvCustomer tfoot tr').appendTo('#gvCustomer thead');
            $('#gvCustomer').removeAttr('width').DataTable({
                bFilter: true,
                bSort: true,
                scrollY: "150px",
                scrollCollapse: true,
                paging: false,
                fixedColumns: false,
                orderCellsTop: true
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <asp:GridView ID="gvCustomer" Width="100%" AutoGenerateColumns="False" runat="server" 
            Font-Size="12px" 
            OnRowDataBound="OnRowDataBound"
            DataKeyNames="Cust_Id">
            <AlternatingRowStyle BackColor="white" />
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:CheckBox ID="chkAll" runat="server" onclick="SelectAll(this)" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="chk" runat="server" onclick="SelectOne(this)" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="ID">
                    <ItemTemplate>
                        <asp:Label ID="Id" runat="server" Text='<%# Eval("Cust_Id") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <label style="text-align: center; display: block;">Sl No.</label>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <%# Container.DataItemIndex + 1 %>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Center" />
                </asp:TemplateField>
                <asp:TemplateField ItemStyle-HorizontalAlign="left">
                    <HeaderTemplate>
                        <label style="text-align: center; display: block;">Cust No.</label>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lblCustNo" Style="text-align: left; line-height: 28px;"
                            runat="server" Text='<%# Eval("CustNo")%>'></asp:Label>
                       
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField ItemStyle-HorizontalAlign="left">
                    <HeaderTemplate>
                        <label style="text-align: center; display: block;">Cust Name.</label>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lblCustName" Style="line-height: 28px;"
                            runat="server" Text='<%# Eval("CustName")%>'></asp:Label>
                       
                    </ItemTemplate>
                </asp:TemplateField>
         </Columns>
            <HeaderStyle BackColor="#2F6370" Font-Names="Arial" Font-Size="12px" ForeColor="White" />
            <SelectedRowStyle BackColor="#007D8C" Font-Bold="True" ForeColor="White" />
        </asp:GridView>

pls. tell us, where is the problem in the design..

Lan Huang-MSFT 29,911 Microsoft Vendor

Hi @BeUnique,

I made some adjustments based on your code, the code is as follows:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test - Grid Freeze</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/4.1.0/js/dataTables.fixedColumns.min.js"></script>
    <link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/fixedcolumns/4.1.0/css/fixedColumns.dataTables.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .auto-style1 {
            width: 600px;
            border-style: solid;
            border-width: 2px;
        }
        .dataTables_scrollHead {
            width: 600px !important;
        }
        .dataTables_scrollHeadInner {
            width: 600px !important;
        }
        .dataTables_scrollBody {
            width: 600px !important;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('#gvCustomer tfoot tr').appendTo('#gvCustomer thead');
            $('#gvCustomer').removeAttr('width').DataTable({
                bFilter: true,
                bSort: true,
                scrollY: "150px",
                scrollCollapse: true,
                paging: false,
                fixedColumns: false,
                orderCellsTop: true
            });
        });
    </script>
    <script>
        window.onload = function () {
            var grid = document.getElementById('<%= gvCustomer.ClientID %>');
            var tbody = grid.getElementsByTagName("tbody")[0]; //gets the first and only tbody
            var firstTr = tbody.getElementsByTagName("tr")[0]; //gets the first tr, hopefully contains the th's
            tbody.removeChild(firstTr); //remove tr's from table
            var newTh = document.createElement('thead'); //creates thead
            newTh.appendChild(firstTr); //puts ths in thead
            grid.insertBefore(newTh, tbody); //puts thead behore tbody
        }
    </script>
    <script type="text/javascript">
        function SelectAll(headerCheckBox) {
            //Get the reference of GridView.
            var GridView = document.getElementById("gvCustomer");
            //Loop through all GridView Rows except first row.
            for (var i = 1; i < GridView.rows.length; i++) {
                //Reference the CheckBox.
                var checkBox = GridView.rows[i].cells[0].getElementsByTagName("input")[0];
                checkBox.checked = headerCheckBox.checked;
            }
        }
    </script>
    <script type="text/javascript">
        function SelectOne(chk) {
            //Get the reference of GridView.
            var GridView = chk.parentNode.parentNode.parentNode.parentNode;
            //Reference the Header CheckBox.
            var headerCheckBox = GridView.rows[0].cells[0].getElementsByTagName("input")[0];;
            var checked = true;
            //Loop through all GridView Rows.
            for (var i = 1; i < GridView.rows.length; i++) {
                //Reference the CheckBox.
                var checkBox = GridView.rows[i].cells[0].getElementsByTagName("input")[0];
                if (!checkBox.checked) {
                    checked = false;
                    break;
                }
            }
            headerCheckBox.checked = checked;
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="gvCustomer" Width="100%" AutoGenerateColumns="False" runat="server" 
            Font-Size="12px"            
            DataKeyNames="Cust_Id">
            <AlternatingRowStyle BackColor="white" />
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:CheckBox ID="chkAll" runat="server" onclick="SelectAll(this)" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="chk" runat="server" onclick="SelectOne(this)" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="ID">
                    <ItemTemplate>
                        <asp:Label ID="Id" runat="server" Text='<%# Eval("Cust_Id") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <label style="text-align: center; display: block;">Sl No.</label>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <%# Container.DataItemIndex + 1 %>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Center" />
                </asp:TemplateField>
                <asp:TemplateField ItemStyle-HorizontalAlign="left">
                    <HeaderTemplate>
                        <label style="text-align: center; display: block;">Cust No.</label>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lblCustNo" Style="text-align: left; line-height: 28px;"
                            runat="server" Text='<%# Eval("CustNo")%>'></asp:Label>
                       
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField ItemStyle-HorizontalAlign="left">
                    <HeaderTemplate>
                        <label style="text-align: center; display: block;">Cust Name.</label>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lblCustName" Style="line-height: 28px;"
                            runat="server" Text='<%# Eval("CustName")%>'></asp:Label>
                       
                    </ItemTemplate>
                </asp:TemplateField>
         </Columns>
            <HeaderStyle BackColor="#2F6370" Font-Names="Arial" Font-Size="12px" ForeColor="White" />
            <SelectedRowStyle BackColor="#007D8C" Font-Bold="True" ForeColor="White" />
        </asp:GridView>
    </form>
</body>
</html>

User's image

BeUnique 2,212 Reputation points

2024-11-13T09:45:25.3166667+00:00

Hi @Lan Huang-MSFT ,

Sorry for the late response.

still i have been facing the issue for freezing header in gridview.

I have mentioned the complete code as mentioned below URL (below has created for other issue, but code is same).

URL ==> https://learn.microsoft.com/en-us/answers/questions/2117788/model-popup-showing-as-blank-when-click-view-butto

pls. let me know if you need anymore details...

Share via

How to Freeze Header in ASP.NET Gridview using C#

2 additional answers

Your answer