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.
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.
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.
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.
not work into a updatepanel, any idea?
use pageLoad javascript function for calling footable jquery ie
function pageLoad() {
$(‘[id*=gvCustomers]’).footable();
}
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
Its Not Working in Asp.net Bcoz my Page have all ready use Boostrap class !! What to Do ???
Replace Boostrap with Bootstrap
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…!
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
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
}
});
});
Good article. Will functions like Paging, Sorting work with this ?
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?
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?
Too Good, Helped me a lot….thanks bro….
Have you ever encountered problems with post-backs? Whenever I have to post back to the page, FooTable stops working. Has anyone solved this?
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
how do you get it to maintain responsive layout on the gridviews in events?
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?
Great article! To get the rounded corners, I had to wrap the gridview in a div and add the footable class to the div as well.
Excellent Article. Thanks for sharing!
Nice article