All geek questions in one place

ASP.NET ListView - Scrolls with Fixed Headers Using CSS

I am using an ASP.NET ListView control, and currently I have a scrollable grid:

(the example below is simplified and contains inline styling for the question)

<asp:ListView ID="ListView" runat="server" DataKeyNames="Id"> <LayoutTemplate> <div style="height:225px; overflow:auto;"> <table runat="server"> <tr> <th> <span>Column1</span> </th> <th> <span>Column2</span> </th> <th> <span>Column3</span> </th> </tr> <tr id="itemPlaceholder" runat="server" /> </table> </div> </LayoutTemplate> <ItemTemplate> <tr id="items" runat="server"> <td class="first"> <%#Eval("Column1")%> </td> <td> <%#Eval("Column2")%> </td> <td> <%#Eval("Column3")%> </td> </tr> </ItemTemplate> </asp:ListView>

I would like to apply CSS so that my headers are fixed.

What style can I add to make it work?

+4
source share
2 answers

I just came up with: you do not need to use CSS, just define the title bar in the layout template as a separate table. then wrap the new table in a div with overflow=scroll and return your content holder.

Note that there is an additional column in the header to make room for the scroll bar. Then set the width of the columns in the same way as the headers, and you're done.

You will need to add JavaScript to maintain the scroll position after the postback, but this is a different thread. Here is an example of how I did it.

 <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1"> <EmptyDataTemplate> <table id="Table1" runat="server" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;"> <tr> <td> No data was returned.</td> </tr> </table> </EmptyDataTemplate> <ItemTemplate> <tr style="background-color: #E0FFFF;color: #333333;"> <td style="width:100px;"> <asp:LinkButton ID="Butpullacct" OnClick="Butpullacct_Click" runat="server">Reaccess</asp:LinkButton> </td> <td style="display:none"> <asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' /> </td> <td style="width:100px;"> <asp:Label ID="BTNRSLabel" runat="server" Text='<%# Eval("BTNRS") %>' /> </td> <td style="width:100px;"> <asp:Label ID="NoticeDueLabel" runat="server" Text='<%# Eval("NoticeDue")%>' /> </td> <td style="width:75px;"> <asp:Label ID="NoticeTypeLabel" runat="server" Text='<%# Eval("NoticeType") %>' /> </td> <td style="width:200px;"> <asp:Label ID="DispDescLabel" runat="server" Text='<%# Eval("DispDesc") %>' /> </td> <td style="width:175px;"> <asp:Label ID="AccessTimeLabel" runat="server" Text='<%# Eval("AccessTime") %>' /> </td> <td style="width:175px;"> <asp:Label ID="ExitTimeLabel" runat="server" Text='<%# Eval("ExitTime") %>' /> </td> </tr> </ItemTemplate> <LayoutTemplate> <table id="Table2" runat="server"> <tr id="Tr1" runat="server"> <td id="Td1" runat="server"> <table ID="itemPlaceholderContainer" runat="server" border="1" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;"> <tr id="Tr2" runat="server" style="background-color: #E0FFFF;color: #333333;"> <th id="Th1" runat="server" style="width:100px;"></th> <th id="Th2" runat="server" style="display:none"> id</th> <th id="Th3" runat="server" style="width:100px;"> BTNRS</th> <th id="Th4" runat="server" style="width:100px;"> Notice Due Date</th> <th id="Th5" runat="server" style="width:75px;"> Notice Type</th> <th id="Th6" runat="server" style="width:200px;"> Action</th> <th id="Th7" runat="server" style="width:175px;"> Access Time</th> <th id="Th8" runat="server" style="width:175px;"> Exit Time</th> <th id="Th9" style="width:13px;" runat="server"> </th> </tr> </table> <div style="overflow:scroll; height:500px;"> <table border="1" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;"> <tr ID="itemPlaceholder" runat="server"> </tr> </table> </div> </td> </tr> <tr id="Tr3" runat="server"> <td id="Td2" runat="server" style="text-align: center;background-color: #5D7B9D;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF"> </td> </tr> </table> </LayoutTemplate> </asp:ListView>
+1
source

Source: https://habr.com/ru/post/1310414/

More articles:


All Articles