locked
Asp.net Listview or Gridview Freeze Header RRS feed

  • Question

  • User-1738518687 posted

    I have a Listview that I would like to freeze the header on.  I've looked at various examples but nothing is working for me. Some of the links with suggested answers are so old that they no longer work. I tried to use a Gridview instead, but no luck there either.  The <div> that I keep seeing referenced as a solution does not play well with the listview or gridview.  Any ideas?

    Thursday, June 21, 2018 7:18 PM

Answers

  • User-330142929 posted

    Hi Jmanci,

    According to your description, you want to freeze the header column when there are too many records.

    As far as I know, Listview and Gridview have no native function to implement freeze headers.

    I have made a workaround to achieve what you want according to the solution you mentioned. Wish it is useful to you.

    Aspx.

            <div>
                <table style="background-color: #ff0000; width: 600px;">
                    <tr>
                        <td style="font-weight: bold; width: 80px; border: 1px solid black">ID
                        </td>
                        <td style="font-weight: bold; width: 130px; border: 1px solid black">Name
                        </td>
                        <td style="font-weight: bold; width: 130px; border: 1px solid black">Price
                        </td>
                        <td style="font-weight: bold; width: 260px; border: 1px solid black">Action
                        </td>
                    </tr>
                </table>
                <div style="overflow-y: scroll; overflow-x: hidden; height: 200px; width: 600px;">
                    <asp:ListView ID="ListView1" runat="server" OnItemCommand="ListView1_ItemCommand" OnItemEditing="ListView1_ItemEditing" OnItemCanceling="ListView1_ItemCanceling">
     
                        <EditItemTemplate>
                            <tr>
                                <td>
                                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("Id")%>'></asp:Label></td>
                                <td>
                                    <asp:Label ID="Label2" runat="server" Text='<%# Eval("Name") %>'></asp:Label></td>
                                <td>
                                    <asp:Label ID="Label3" runat="server" Text='<%# Eval("Price") %>'></asp:Label></td>
                                <td>
                                    <asp:Button ID="Button3" runat="server" Text="Update" CommandName="Update" />
                                    <asp:Button ID="Button2" runat="server" Text="Cancel" CommandName="Cancel" />
                                </td>
                            </tr>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <tr>
                                <td style="width: 80px;">
                                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("Id")%>'></asp:Label></td>
                                <td style="width: 130px;">
                                    <asp:Label ID="Label2" runat="server" Text='<%# Eval("Name") %>'></asp:Label></td>
                                <td style="width: 130px;">
                                    <asp:Label ID="Label3" runat="server" Text='<%# Eval("Price") %>'></asp:Label></td>
                                <td style="width: 260px;">
                                    <asp:Button ID="Button1" runat="server" Text="Edit" CommandName="Edit" />
                                </td>
                            </tr>
                        </ItemTemplate>
                        <LayoutTemplate>
                            <table id="groupPlaceholder" border="1" runat="server">
                                <tr id="itemPlaceholder" runat="server"></tr>
                            </table>
                        </LayoutTemplate>
                    </asp:ListView>
                </div>
            </div>

    How it works.

    The link here may be useful.

    https://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-in-ASP.Net.aspx

    Please feel free to let me know, if you have any question.

    Best Regards,

    Abraham 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 22, 2018 6:32 AM

All replies

  • User-330142929 posted

    Hi Jmanci,

    According to your description, you want to freeze the header column when there are too many records.

    As far as I know, Listview and Gridview have no native function to implement freeze headers.

    I have made a workaround to achieve what you want according to the solution you mentioned. Wish it is useful to you.

    Aspx.

            <div>
                <table style="background-color: #ff0000; width: 600px;">
                    <tr>
                        <td style="font-weight: bold; width: 80px; border: 1px solid black">ID
                        </td>
                        <td style="font-weight: bold; width: 130px; border: 1px solid black">Name
                        </td>
                        <td style="font-weight: bold; width: 130px; border: 1px solid black">Price
                        </td>
                        <td style="font-weight: bold; width: 260px; border: 1px solid black">Action
                        </td>
                    </tr>
                </table>
                <div style="overflow-y: scroll; overflow-x: hidden; height: 200px; width: 600px;">
                    <asp:ListView ID="ListView1" runat="server" OnItemCommand="ListView1_ItemCommand" OnItemEditing="ListView1_ItemEditing" OnItemCanceling="ListView1_ItemCanceling">
     
                        <EditItemTemplate>
                            <tr>
                                <td>
                                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("Id")%>'></asp:Label></td>
                                <td>
                                    <asp:Label ID="Label2" runat="server" Text='<%# Eval("Name") %>'></asp:Label></td>
                                <td>
                                    <asp:Label ID="Label3" runat="server" Text='<%# Eval("Price") %>'></asp:Label></td>
                                <td>
                                    <asp:Button ID="Button3" runat="server" Text="Update" CommandName="Update" />
                                    <asp:Button ID="Button2" runat="server" Text="Cancel" CommandName="Cancel" />
                                </td>
                            </tr>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <tr>
                                <td style="width: 80px;">
                                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("Id")%>'></asp:Label></td>
                                <td style="width: 130px;">
                                    <asp:Label ID="Label2" runat="server" Text='<%# Eval("Name") %>'></asp:Label></td>
                                <td style="width: 130px;">
                                    <asp:Label ID="Label3" runat="server" Text='<%# Eval("Price") %>'></asp:Label></td>
                                <td style="width: 260px;">
                                    <asp:Button ID="Button1" runat="server" Text="Edit" CommandName="Edit" />
                                </td>
                            </tr>
                        </ItemTemplate>
                        <LayoutTemplate>
                            <table id="groupPlaceholder" border="1" runat="server">
                                <tr id="itemPlaceholder" runat="server"></tr>
                            </table>
                        </LayoutTemplate>
                    </asp:ListView>
                </div>
            </div>

    How it works.

    The link here may be useful.

    https://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-in-ASP.Net.aspx

    Please feel free to let me know, if you have any question.

    Best Regards,

    Abraham 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 22, 2018 6:32 AM
  • Saturday, June 23, 2018 1:38 PM
  • User-1738518687 posted

    This solution mostly works for me. The header does freeze, and I can scroll the Listview while still seeing the header, but the alignment with the Listview columns is not perfect. I found it impossible to get line them up correctly - increasing 1 column's width and decreasing another doesn't re-align everything properly. They are just slightly off so I can live with it. Also, when I scroll/page down to the very bottom of the ListView, the header disappears. Can live with this too.

    Other issue is when I edit a row in the ListView, the sizes of the individual columns expand/contract and throw off the alignment to the header. Think this has to do with the controls(textboxes/checkboxlists/dropdownlist) I'm using in the ListView, but I should be able to figure this out. Thanks.

    Thursday, June 28, 2018 1:53 PM