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

BeUnique 2,112

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 29,166 Reputation points Microsoft Vendor

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.

3 answers

Bruce (SqlWork.com) 63,746 Reputation points

2024-08-09T19:18:02.5133333+00:00

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
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Lan Huang-MSFT 29,166 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,112 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,112 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,166 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,112

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

Manish Kumar 0 Reputation points

2024-08-14T01:15:23.02+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
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

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

3 answers

Your answer