Fix header row in repeater in ASP.NET

D B

i am trying to figure out how to fix the header row with in the repeater using asp.net. When trying to put position:fixed; in the tr tag. It seems to fix it but it becomes smaller in size and doesn't work with the rest of the table.

any hints or help in the right direction would help significantly!

thanks

<div class="form-panel" style="font-size: small; text-align: left;">
    <div class="header">
        <div class="contentRestriction" style="height: 22px">
            Action Bulletin Exception
            <asp:button id="addException" text="Add Exception" runat="server" style="float: right; margin-right: 20px" onclick="addExceptions" />
        </div>
    </div>
    <div class="commands">
        <div class="contentRestriction" style="overflow-y: scroll; width: 100%; height: 185px">
            <asp:repeater id="repException" runat="server" datasourceid="SP_AB_BULLETIN_EXCEPTION">
                        <HeaderTemplate>
                            <div class="form-panel" style="font-size: small;">
                                <table class="notepad-table" cellpadding="2" cellspacing="0" width="100%" >
                                    <tr style="background-color: #eeeeee; font-weight: bold; ">                                 
                                        <td>Date Time From</td>
                                        <td>Date Time To</td>
                                        <td>Status</td>
                                        <td>Last Modified</td>
                                        <td>Last Modified By</td>
                                        <td>Action</td>
                                    </tr>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <tr id="tr1" runat="server">
                                <td>
                                    <asp:Literal ID="Literal1" runat="server" Text='<%# Eval("EFTV_FROM") %>' />
                                </td>
                                <td>
                                    <asp:Literal ID="Literal2" runat="server" Text='<%# Eval("EFTV_TO") %>' />
                                </td>
                                <td>
                                    <asp:Literal ID="Literal3" runat="server" Text='<%# Eval("AB_STATUS1") %>' />
                                </td>
                                <td>
                                    <asp:Literal ID="Literal4" runat="server" Text='<%# Eval("LAST_MOD_DATE") %>' />
                                </td>
                                <td>
                                    <asp:Literal ID="Literal6" runat="server" Text='<%# Eval("UserName") %>' />
                                </td>
                                <td>
                                    <asp:Button ID="editException" Text="Edit" runat="server"  CommandName="EXID" CommandArgument='<%# Eval("EX_ID") %>' OnCommand="editException" />
                                    <asp:Button ID="deleteException" Text="Delete" runat="server" CommandName="EXID" CommandArgument='<%# Eval("EX_ID") %>' OnCommand="deleteException" />
                                </td>

                            </tr>
                        </ItemTemplate>
                        <FooterTemplate>
            </table> 
        </div>
        </FooterTemplate>
                    </asp:Repeater>      
    </div>
</div>
</div>   
Denys Wessels

To get the fixed header effect you can make two small changes to your code.

1) Paste the following style rules in the <head> section of your page:

<style type="text/css">
    table tbody, table thead {
        display: block;
    }

    table tbody {
        overflow: auto;
        height: 100px;
    }

    th, td {
        width: 150px;
    }
</style>

2) Replace your <div class="commands"> with the one below:

 <div class="commands">
                <asp:Repeater ID="repException" runat="server" DataSourceID="SP_AB_BULLETIN_EXCEPTION">
                    <HeaderTemplate>
                        <div class="form-panel" style="font-size: small;">
                            <table class="notepad-table" cellpadding="2" cellspacing="0">
                                <thead>
                                    <tr style="background-color: #eeeeee; font-weight: bold;">
                                        <th>Date Time From</th>
                                        <th>Date Time To</th>
                                        <th>Status</th>
                                        <th>Last Modified</th>
                                        <th>Last Modified By</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr id="tr1" runat="server">
                            <td>
                                <asp:Literal ID="Literal1" runat="server" Text='<%# Eval("EFTV_FROM") %>' />
                            </td>
                            <td>
                                <asp:Literal ID="Literal2" runat="server" Text='<%# Eval("EFTV_TO") %>' />
                            </td>
                            <td>
                                <asp:Literal ID="Literal3" runat="server" Text='<%# Eval("AB_STATUS1") %>' />
                            </td>
                            <td>
                                <asp:Literal ID="Literal4" runat="server" Text='<%# Eval("LAST_MOD_DATE") %>' />
                            </td>
                            <td>
                                <asp:Literal ID="Literal6" runat="server" Text='<%# Eval("UserName") %>' />
                            </td>
                            <td>
                                <asp:Button ID="editException" Text="Edit" runat="server" CommandName="EXID" CommandArgument='<%# Eval("EX_ID") %>' OnCommand="editException" />
                                <asp:Button ID="deleteException" Text="Delete" runat="server" CommandName="EXID" CommandArgument='<%# Eval("EX_ID") %>' OnCommand="deleteException" />
                            </td>

                        </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                        </tbody>
                            </table> 
                            </div>
                    </FooterTemplate>
                </asp:Repeater>
            </div>

Output:

HTML table with fixed headers

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Fix header row in repeater in ASP.NET

From Dev

Fix Header Row of ASP.NET GridView

From Dev

Adding Header to the repeater in asp.net

From Dev

asp.net repeater for each row

From Dev

ASP.NET Repeater Item add divider after each row

From Dev

Show/Hide Single Row in ASP.NET Repeater

From Dev

ASP.NET C# Continue row count in Gridview in Repeater

From Dev

NavigateUrl on Repeater ASP.net

From Dev

NavigateUrl on Repeater ASP.net

From Dev

Perform count based on value of repeater control for each row C# ASP.NET

From Dev

ASP.NET Repeater - Eval() for bool?

From Dev

Convert Bootstrap Carousel to ASP.Net Repeater

From Dev

ASP .NET Using a Repeater inside of UpdatePanel with UpdateProgress

From Dev

repeater item command in asp.net

From Dev

to disable a label of repeater on some condition in asp .net

From Dev

Using Bootstrap tabs with ASP NET repeater

From Dev

asp.net repeater use template in javascript

From Dev

To bind images in repeater using asp.net

From Dev

asp.net repeater merge columns dynamically

From Dev

ASP.NET Converting repeater item to the textbox

From Dev

Repeater asp.net tag not working

From Dev

asp.net repeater merge columns dynamically

From Dev

Convert Bootstrap Carousel to ASP.Net Repeater

From Dev

Conditional statement for Repeater Controll in ASP.NET

From Dev

trying Image Button in repeater Asp.net

From Dev

asp net dropdown selectedvalue/selectedindex not updating in repeater

From Dev

ASP.Net - Issues with Repeater / DataBinding

From Dev

Repeater in asp.net from DB with DropDownList

From Dev

Sort table on click of the table header: Issue with asp:repeater maybe?

Related Related

HotTag

Archive