Jan 5, 2013

Making ASP.NET GridView Responsive With jQuery FooTable

As the current trend is to make website compatible with all platforms like desktop, tablet and mobile..etc, Responsive Design technique comes into the picture. Using it, the website adapts the layout to the environment that it is being viewed in. In this post, we will make ASP.NET gridview responsive using jQuery FooTable plugin. It hides certain columns of data at different resolutions based on data-* attributes and converts hidden data to expandable rows.

First, I recommend to read this post to understand how it works.

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

  <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>

Read Also: How to Test Responsive Web Design

GridView:

2. Here is the asp.net gridview structure, we take address as template column for testing:

 <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>

Breakpoints:

3. This plugin works with the concepts of “breakpoints”, which are different device widths we care about.

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

4. 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:

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

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

		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.

responsive design table gridview

Here is the rendered html of gridview control:

<table cellspacing="0" style="border-collapse:collapse;" id="GridView1" class="footable footable-loaded default">
		<thead>
			<tr>
				<th scope="col" data-class="expand">First Name</th><th scope="col">Last Name</th>
				<th scope="col" data-hide="phone,tablet" style="display: table-cell;">Email</th>
				<th scope="col" data-hide="phone,tablet" style="display: table-cell;">Address</th>
				<th scope="col" data-hide="phone" style="display: table-cell;">Contact</th>
			</tr>
		</thead><tbody>
			<tr class="">
				<td class="expand">Lorem</td>
				<td>ipsum</td>
				<td style="display: table-cell;">lorem@techbrij.com</td>
				<td style="display: table-cell;">
                    <span id="GridView1_Label1_0">Main Street</span>
                </td>
				<td style="display: table-cell;">1234567890</td>
			</tr>
			....
			</tbody>
	</table>

Hope, you enjoy it.

20 comments

  1. I’ve been browsing on-line more than 3 hours lately, yet I by no means discovered
    any interesting article like yours. It is pretty worth
    enough for me. In my view, if all site owners and bloggers made good content as you did, the
    net will probably be a lot more useful than ever before.

    1. use pageLoad javascript function for calling footable jquery ie

      function pageLoad() {
      $(‘[id*=gvCustomers]’).footable();

      }

  2. hello nice article. I have a problem. I fill my gridview from db when the user clicks on a button. I use the

    GridView1.UseAccessibleHeader = true;
    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
    but it doesn’t generates the thead tag. Any help

  3. i am not getting + and – icons in my gridview…. and also whatever setting i had done for phone and tablet ,at the normal resolution that setting are reflecting…

    means on the desktop view it is showing tablet view i used same code as above…!

  4. when go to definition of cssclass=”footable” it show could not found css selector class footable .
    as i have included style sheet in aspx page. gridview
    cssclass

  5. Hello i’ve tried to use footable jquery plug in to have a responsive gridiview and it works fine on a siple page but if i use a page with MASTER PAGE i encount this error:

    Run-time JavaScript: Object does not support this property or method ‘footable’ :

    This is dynamic debug… anybody could help me ??

    $(function () { $(‘#ctl00_ContentPlaceHolder1_gv_datagrid’).footable({ breakpoints: {

    phone: 300,

    tablet: 640

    }

    });

    });

  6. This is a great article, and FooTables works well for read only data. I have found that I cannot get it to properly save data in an edit mode of a GridView. Apparently the FooTable plugin “clones” the contents of the columns it hides in the collapsable area. This leaves 2 inputs with the same Id for every element in the collapsed columns. I find this making it virtually impossible to collect reliable data from the footable inputs. Has anyone else run into this? Any ideas on a workaround?

  7. Thanks for sharing. When I add CRUD to grid view,It is not work.Click edit button change back to normal grid view width.please any idea?

  8. Have you ever encountered problems with post-backs? Whenever I have to post back to the page, FooTable stops working. Has anyone solved this?

  9. great article, I am able to see the columns hiding when I reduce the window size. But I am not getting the “+” and “-” when it srink or expand. Please let me know what I am missing

  10. thanks for this, how do you get it to maintain responsive layout on the gridviews sorting event? unfortunately it doesn’t seem to work on this?

Leave a Reply

Your email address will not be published. Required fields are marked *