In this article I will explain how to make the Headers fixed and Rows scrollable in ASP.Net Repeater control.
The Repeater’s header will be fixed and rows will be made scrollable using jQuery Scrollable Table plugin.
 
Database
Here I am making use of Microsoft’s Northwind Database. The download and install instructions are provided in the following article.
Download and install Northwind Database
 
 
Scrollable Table jQuery Plugin
This article makes use of the Scrollable Table jQuery Plugin which can be downloaded using the link below.
Download Scrollable Table jQuery Plugin
 
 
HTML Markup
The following HTML Markup consists of an ASP.Net Repeater control, which will be rendered as HTML Table in order to implement Fixed Header with scrolling functionality.
Note: In order to learn more about rendering Repeater control as HTML Table, please refer my article Display and render Repeater control as HTML Table Layout in ASP.Net.
 
<asp:Repeater ID="rptCustomers" runat="server">
    <HeaderTemplate>
        <table id="Table1" cellspacing="0" rules="all" border="1">
            <tr>
                <th scope="col">
                    Contact Name
                </th>
                <th scope="col">
                    City
                </th>
                <th scope="col">
                    Country
                </th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <asp:Label ID="lblContactName" runat="server" Text='<%# Eval("ContactName") %>' />
            </td>
            <td>
                <asp:Label ID="lblCity" runat="server" Text='<%# Eval("City") %>' />
            </td>
            <td>
               <asp:Label ID="lblCountry" runat="server" Text='<%# Eval("Country") %>' />
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
 
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
 
 
 
Binding the Repeater control using records form database
Inside the Page load event handler, the Repeater is populated with the records from the Customers table of the Northwind database.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindRepeater();
    }
}
 
private void BindRepeater()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT TOP 10 * FROM Customers", con))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                DataTable dt = new DataTable();
                sda.Fill(dt);
                rptCustomers.DataSource = dt;
                rptCustomers.DataBind();
            }
        }
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.BindRepeater()
    End If
End Sub
 
Private Sub BindRepeater()
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As New SqlConnection(constr)
        Using cmd As New SqlCommand("SELECT TOP 10 * FROM Customers", con)
            Using sda As New SqlDataAdapter(cmd)
                Dim dt As New DataTable()
                sda.Fill(dt)
                rptCustomers.DataSource = dt
                rptCustomers.DataBind()
            End Using
        End Using
    End Using
End Sub
 
 
Making the Header Fixed and Rows Scrollable in Repeater
The Repeater’s Header will be fixed and rows will be made Scrollable using jQuery Scrollable Table plugin.
The plugin will be applied to the Table element.
Note: For more information on the Scrollable Table Plugin, please refer my article Make Scrollable Table in HTML with Fixed Header using jQuery.
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="Scripts/ScrollableTablePlugin_1.0_min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#Table1').Scrollable({
            ScrollHeight: 100
        });
    });
</script>
 
 
Screenshots
Scrollable Repeater with Fixed Header in ASP.Net
 
 
Demo
View Demo
 
 
Downloads
Download Code