Making ASP.NET GridView Responsive With jQuery FooTable



1. Download and add FooTable js, css and image files in the project and reference in the page.





1 2 3 4

<meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" /> <link href="Styles/footable-0.1.css" rel="stylesheet" type="text/css" /> <script src="Scripts/1.8.2/jquery.min.js" type="text/javascript"></script> <script src="Scripts/footable-0.1.js" type="text/javascript"></script>







<asp:GridView ID="GridView1" CssClass="footable" runat="server"

           AutoGenerateColumns="False">

       <Columns>

           <asp:BoundField DataField="FirstName" HeaderText="First Name"   />

           <asp:BoundField DataField="LastName" HeaderText="Last Name" />

           <asp:BoundField DataField="Email" HeaderText="Email" />

           <asp:TemplateField HeaderText="Address">               

               <ItemTemplate>

                   <asp:Label ID="Label1" runat="server" Text='<%# Bind("Address") %>'></asp:Label>

               </ItemTemplate>

           </asp:TemplateField>

           <asp:BoundField DataField="Contact" HeaderText="Contact" />

       </Columns>

   </asp:GridView>

<script>

$(function () {         $('#<%=GridView1.ClientID %>').footable({             breakpoints: {                 phone: 480,                 tablet: 1024             }         });     }); </script>

To bind gridview:

GridView1.DataSource = GetDataTable(); GridView1.DataBind();

GetDataTable method returns data for gridview. You can implement it to get data from database and returns datatable or list.
By default asp.net gridview header row is generated in tbody tag, to generate in thead tag:

1 2	GridView1.UseAccessibleHeader = true; GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

To define data-* attribute in header cells, put following code after binding:

1 2 3 4 5

TableCellCollection cells = GridView1.HeaderRow.Cells; cells[0].Attributes.Add("data-class", "expand"); cells[2].Attributes.Add("data-hide", "phone,tablet"); cells[3].Attributes.Add("data-hide", "phone,tablet"); cells[4].Attributes.Add("data-hide", "phone");

We define data-hide attribute to hide the column for different dimensions. Email and Address will be hidden in tablet view and Email,Address, Contact will be hidden in phone view. On expanding, the hidden data are displayed in row by row.