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

Question

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

BeUnique 2,332

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..?

Manish Kumar 0 Reputation points

2024-08-14T01:14:24.21+00:00

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
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2024-08-19T02:27:51.3266667+00:00

Hi @BeUnique,

May I know if you have got any chance to check my reply? It will be great if you can share more detailed information for us to better investigate this issue. Thanks for your cooperation.
Albert Kallal 5,586 Reputation points

2024-11-13T19:05:45.7033333+00:00

1000 rows are far too many rows here. I would introduce a data pager, and that would thus limit the page rows to say 20 rows, and thus the requirement to freeze the heading will be eliminated. And you find performance vast superior. Loading 1000 rows are far too many rows to load into a HTML page. Such a setup going to cause performance issues even if you get the heading to freeze. So, I would considering introducing a data pager.

Accepted answer

2 additional answers

Your answer

Manish Kumar 0 Reputation points

2024-08-14T01:14:24.21+00:00

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
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2024-08-19T02:27:51.3266667+00:00

Hi @BeUnique,

May I know if you have got any chance to check my reply? It will be great if you can share more detailed information for us to better investigate this issue. Thanks for your cooperation.
Albert Kallal 5,586 Reputation points

2024-11-13T19:05:45.7033333+00:00

1000 rows are far too many rows here. I would introduce a data pager, and that would thus limit the page rows to say 20 rows, and thus the requirement to freeze the heading will be eliminated. And you find performance vast superior. Loading 1000 rows are far too many rows to load into a HTML page. Such a setup going to cause performance issues even if you get the heading to freeze. So, I would considering introducing a data pager.

Answer 1

Lan Huang-MSFT 30,186 Microsoft External Staff

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,332 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,332 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 30,186 Reputation points Microsoft External Staff

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,332

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 30,186 Microsoft External Staff

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,332 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...

Answer 2

Bruce (SqlWork.com) 77,686 Volunteer Moderator

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

Answer 3

Manish Kumar 0

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

Share via

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

2 additional answers

Your answer