In this article I will explain with an example, how to make GridView responsive so that it fits and adjusts itself to look good in Mobile Phone, Tablet and Desktop displays in ASP.Net using jQuery.
In order to make the GridView responsive, I am using Footable jQuery plugin which is compatible with Bootstrap design.
Downloading the Responsive Table jQuery Plugin
You can download the Footable responsive table jQuery plugin using the following download link.
HTML Markup
The HTML Markup consists of an ASP.Net GridView which has been applied CSS class footable.
<asp:GridView ID="GridView1" CssClass="footable" runat="server" AutoGenerateColumns="false"
Style="max-width: 500px">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Customer Name" />
<asp:BoundField DataField="Id" HeaderText="Customer Id" />
<asp:BoundField DataField="Country" HeaderText="Country" />
<asp:BoundField DataField="Salary" HeaderText="Salary" />
</Columns>
</asp:GridView>
Namespaces
You will need to import the following namespace.
C#
VB.Net
Binding the GridView
The GridView is populated using some dummy records using DataTable, you can populate it from database too.
After the GridView is populated with data you will need add the following attributes to each Header Column of GridView 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
|
Also you need to set the GridView Header Row TableSection property to TableHeader so that it renders the HTML Table with THEAD and TBODY tags as it is necessary to have these tags to make the plugin work.
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);
GridView1.DataSource = dt;
GridView1.DataBind();
//Attribute to show the Plus Minus Button.
GridView1.HeaderRow.Cells[0].Attributes["data-class"] = "expand";
//Attribute to hide column in Phone.
GridView1.HeaderRow.Cells[2].Attributes["data-hide"] = "phone";
GridView1.HeaderRow.Cells[3].Attributes["data-hide"] = "phone";
//Adds THEAD and TBODY to GridView.
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}
}
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)
GridView1.DataSource = dt
GridView1.DataBind()
'Attribute to show the Plus Minus Button.
GridView1.HeaderRow.Cells(0).Attributes("data-class") = "expand"
'Attribute to hide column in Phone.
GridView1.HeaderRow.Cells(2).Attributes("data-hide") = "phone"
GridView1.HeaderRow.Cells(3).Attributes("data-hide") = "phone"
'Adds THEAD and TBODY to GridView.
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader
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 GridView control.
<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 () {
$('[id*=GridView1]').footable();
});
</script>
Screenshots
GridView displayed in desktop
![Bootstrap Responsive GridView for Mobile Phone, Tablet and Desktop display in ASP.Net using jQuery]()
GridView displayed in when browser width set to Mobile Phone width
![Bootstrap Responsive GridView for Mobile Phone, Tablet and Desktop display in ASP.Net using jQuery]()
Demo
Downloads
