locked
How to Freeze Listview Table Header in asp.net RRS feed

  • Question

  • User-712926555 posted

    Hi,

    I am binding  Customer details from database using listview. I have large number of customer data.

      <asp:ListView ID="lstuser" runat="server">
                    <LayoutTemplate>
                        <table>
                            <thead>
                                <tr>
                                    <th>
                                        S.No
                                    </th>
                                    <th>
                                        Name
                                    </th>
                                    <th>
                                        Mobile  
                                    </th>
                                    <th>
                                        Email
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <asp:PlaceHolder ID="ItemPlaceHolder" runat="server"></asp:PlaceHolder>
                            </tbody>
                        </table>
                    </LayoutTemplate>
                    <EmptyDataTemplate>
                        <asp:Label ID="Label" runat="server" Text="No Records Found" ForeColor="Red" Font-Bold="true"></asp:Label>
                    </EmptyDataTemplate>
                    <ItemTemplate>
                        <tr>
                            <td align="center" width="30px">
                                <asp:Label ID="lblIndex" runat="server" Text='<%# Container.DataItemIndex + 1 %>' />
                            </td>
                            <td>
                                <asp:Label ID="lblName" runat="server" Text='<%#Eval("Name") %>' />
                            </td>
                            <td>
                                <asp:Label ID="Label3" runat="server" Text='<%#Eval("Mobile") %>' />
                            </td>
                            <td>
                                <asp:Label ID="Label2" runat="server" Text='<%#Eval("Email") %>' />
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:ListView>

    I need to create fixed header and scrollable body (Like as Excel Freeze Pane option) . How to achieve this

    Monday, October 1, 2018 12:15 PM

All replies

  • Monday, October 1, 2018 12:35 PM
  • User61956409 posted

    Hi Hisanth,

    need to create fixed header and scrollable body

    As mudassarkhan shared, the Scrollable Table jQuery Plugin can help achieve the requirement of implementing freezed ListView Header Row and adding a vertical Scrollbar for scrolling the Data rows. The following sample code is for your reference.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://www.aspsnippets.com/demos/Scripts/ScrollableTablePlugin_1.0_min.js"></script>
        <style>
            body {
                font-family: Arial;
                font-size: 10pt;
            }
    
            table {
                border: 1px solid #ccc;
            }
    
                table th {
                    background-color: #F7F7F7;
                    color: #333;
                    font-weight: bold;
                }
    
                table th, table td {
                    padding: 5px;
                    border-color: #ccc;
                }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ListView ID="lstuser" runat="server">
                    <LayoutTemplate>
                        <table id="lstuser_table">
                            <thead>
                                <tr>
                                    <th>S.No
                                    </th>
                                    <th>Name
                                    </th>
                                    <th>Mobile  
                                    </th>
                                    <th>Email
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <asp:PlaceHolder ID="ItemPlaceHolder" runat="server"></asp:PlaceHolder>
                            </tbody>
                        </table>
                    </LayoutTemplate>
                    <EmptyDataTemplate>
                        <asp:Label ID="Label" runat="server" Text="No Records Found" ForeColor="Red" Font-Bold="true"></asp:Label>
                    </EmptyDataTemplate>
                    <ItemTemplate>
                        <tr>
                            <td align="center" width="30px">
                                <asp:Label ID="lblIndex" runat="server" Text='<%# Container.DataItemIndex + 1 %>' />
                            </td>
                            <td>
                                <asp:Label ID="lblName" runat="server" Text='<%#Eval("Name") %>' />
                            </td>
                            <td>
                                <asp:Label ID="Label3" runat="server" Text='<%#Eval("Mobile") %>' />
                            </td>
                            <td>
                                <asp:Label ID="Label2" runat="server" Text='<%#Eval("Email") %>' />
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:ListView>
            </div>
        </form>
    </body>
    </html>
    <script type="text/javascript">
        $(function () {
            $('#lstuser_table').Scrollable({
                ScrollHeight: 200
            });
        });
    </script>

    Test Result:

    Note:

    You can also get detailed information and example from this article: ASP.Net Scrollable ListView: Freeze (Fixed) Header of ListView in ASP.Net.

    With Regards,

    Fei Han

    Tuesday, October 2, 2018 3:31 AM
  • Wednesday, October 3, 2018 12:55 PM