In this article I will explain with an example, how to make Repeater responsive so that it fits and adjusts itself to look good in Mobile Phone, Tablet and Desktop displays in ASP.Net using jQuery.
The ASP.Net Repeater will be rendered as HTML Table and hence in order to make the Repeater responsive, the Footable jQuery plugin (which is also compatible with Bootstrap design) will be used.
 
 
Downloading the Responsive Table jQuery Plugin
You can download the Footable responsive table jQuery plugin using the following download link.
Download Footable Plugin
 
 
HTML Markup
The HTML Markup consists of an ASP.Net Repeater which is rendered as HTML Table.
Note: You can read more about rendering ASP.Net Repeater control as HTML Table in my article, Display and render Repeater control as HTML Table Layout in ASP.Net.
The footable CSS class is applied to the HTML Table. The following attributes are added to each Header Column of HTML Table in the Repeater control depending on its significance in different displays.
1. data-class = “expand” – You need to specify this attribute to the first column so that it shows the expand collapse button which will be used to show or hide the hidden column fields in Mobile Phone or Tablet.
2. data-hide = “phone” – You need to specify this attribute for all the columns that you want to hide in smaller displays like Mobile Phone or Tablet. The below table displays the possible values.
Value
Hidden in Mobile Phone
Hidden in Tablet
Hidden in Desktop
phone
Yes
No
No
phone,tablet
Yes
Yes
No
all
Yes
Yes
Yes
 
<asp:Repeater ID="rptCustomers" runat="server">
    <HeaderTemplate>
        <table id="tblCustomers" class="footable" border="0" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th data-class="expand">
                        Customer Id
                    </th>
                    <th scope="col">
                        Customer Name
                    </th>
                    <th style="display: table-cell;" data-hide="phone">
                        Country
                    </th>
                    <th style="display: table-cell;" data-hide="phone">
                        Salary
                    </th>
                </tr>
            </thead>
    </HeaderTemplate>
    <ItemTemplate>
        <tbody>
            <tr>
                <td>
                    <%#Eval("Id")%>
                </td>
                <td>
                    <%#Eval("Name")%>
                </td>
                <td>
                    <%#Eval("Country")%>
                </td>
                <td>
                    <%#Eval("Salary")%>
                </td>
            </tr>
        </tbody>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
 
VB.Net
Imports System.Data
 
 
Binding the Repeater
The Repeater control is populated using some dummy records using DataTable, you can populate it from database too.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country"), new DataColumn("Salary") });
        dt.Rows.Add(1, "John Hammond", "United States", 70000);
        dt.Rows.Add(2, "Mudassar Khan", "India", 40000);
        dt.Rows.Add(3, "Suzanne Mathews", "France", 30000);
        dt.Rows.Add(4, "Robert Schidner", "Russia", 50000);
        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
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(3) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country"), New DataColumn("Salary")})
        dt.Rows.Add(1, "John Hammond", "United States", 70000)
        dt.Rows.Add(2, "Mudassar Khan", "India", 40000)
        dt.Rows.Add(3, "Suzanne Mathews", "France", 30000)
        dt.Rows.Add(4, "Robert Schidner", "Russia", 50000)
        rptCustomers.DataSource = dt
        rptCustomers.DataBind()
    End If
End Sub
 
 
Applying the FooTable responsive Table jQuery Plugin
You just need to inherit, jQuery, Footable jQuery Plugin and Footable CSS files and inside the jQuery document ready event handler, apply the plugin to the HTML Table using its ID.
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#tblCustomers').footable();
    });
</script>
 
 
Screenshots
Repeater displayed in desktop
Bootstrap Responsive Repeater for Mobile Phone, Tablet and Desktop display in ASP.Net using jQuery
 
Repeater displayed in when browser width set to Mobile Phone width
Bootstrap Responsive Repeater for Mobile Phone, Tablet and Desktop display in ASP.Net using jQuery
 
 
Demo
View Demo
 
 
Downloads
Download Code