Responsive GridView Using Footable

In this article, we will see how to make an ASP GridView responsive using jQuery based Fooable plugin.

Introduction

Most of us are aware of what a responsive website is. A responsive website is a website that is compatible with different devices having different screen resolutions like desktop, laptop, tablet, mobile, etc.

The website is adapted to have best viewing experience in all the above devices without any horizontal scrollings and all. This is achieved mainly with the help of CSS, HTML 5, and jQuery.

There are a lot of plugins available for making the websites responsive and more attractive. One such plugin is Footable. It is mainly used to make table elements responsive. Before reading this article, I suggest you read my previous article which explains how to make an HTML table responsive using Footable.

• Responsive table using footable

Now, here, we are going to make the ASP GridView control responsive.

GridView is the most commonly used way of databinding in ASP.NET websites and in this modern era of responsive websites, it has become a tough task for many developers to migrate from GridView to new responsive tables.

So here, I'm explaining a simple way to make the same GridView responsive without many changes in our code! The main advantage of this method is that this can be implemented in already integrated GridViews too!

The basic trick behind this is that the ASP GridView is rendered as an HTML table in browsers!!

First, we will start with binding an ASP GridView. Here is our sample GridView containing the data of Employees table.

<asp:GridView ID="grdviewnew" runat="server" CellPadding="5" CellSpacing="0" OnRowDataBound="grd_RowDataBound"
    AutoGenerateColumns="false" CssClass="myclass" Width="100%">
    <Columns>
        <asp:TemplateField HeaderText="Employee Code" HeaderStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <%#Eval("Employee Code")%>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField ItemStyle-HorizontalAlign="Left" HeaderText="Employee Name" HeaderStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <%#Eval("Employee Name")%>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField ItemStyle-HorizontalAlign="Left" HeaderText="Employee Age" HeaderStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <%#Eval("Employee Age")%>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField ItemStyle-HorizontalAlign="Left" HeaderText="Designation" HeaderStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <%#Eval("Designation")%>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField ItemStyle-HorizontalAlign="Left" HeaderText="Experience" HeaderStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <%#Eval("Experience")%>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Now, we are binding this GridView from the back-end by creating a datatable.

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindGrid();
    }
}

public void BindGrid()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("Employee Code");
    dt.Columns.Add("Employee Name");
    dt.Columns.Add("Employee Age");
    dt.Columns.Add("Designation");
    dt.Columns.Add("Experience");
    DataRow dru = dt.NewRow();
    dru["Employee Code"] = "10011";
    dru["Employee Name"] = "Rajeev";
    dru["Employee Age"] = "31";
    dru["Designation"] = "Developer";
    dru["Experience"] = "6";
    dt.Rows.Add(dru);
    dru = dt.NewRow();
    dru["Employee Code"] = "10012";
    dru["Employee Name"] = "Sandhya";
    dru["Employee Age"] = "27";
    dru["Designation"] = "Tester";
    dru["Experience"] = "2";
    dt.Rows.Add(dru);
    dru = dt.NewRow();
    dru["Employee Code"] = "10013";
    dru["Employee Name"] = "Ramesh";
    dru["Employee Age"] = "25";
    dru["Designation"] = "Designer";
    dru["Experience"] = "1";
    dt.Rows.Add(dru);
    dru = dt.NewRow();
    dru["Employee Code"] = "10014";
    dru["Employee Name"] = "Sanjay";
    dru["Employee Age"] = "32";
    dru["Designation"] = "Developer";
    dru["Experience"] = "5";
    dt.Rows.Add(dru);
    dru = dt.NewRow();
    dru["Employee Code"] = "10015";
    dru["Employee Name"] = "Ramya";
    dru["Employee Age"] = "23";
    dru["Designation"] = "Developer";
    dru["Experience"] = "1";
    dt.Rows.Add(dru);
    dt.TableName = "table1";
    grdviewnew.DataSource = dt;
    grdviewnew.DataBind();
 }

Now, viewing this page in browser, we can see as below.


We can see that the above page won't fit in mobile screens and all columns in the table can't be seen without horizontal scrolling in mobile devices.



Now, we are going to make this GridView fit in all devices.

For this, first, we add the CSS and jQuery reference for FooTable plugin in the head section of our page, as below.

<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive GridView using Footable</title>
    <link href="footable.core.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="footable.js" type="text/javascript"></script>
</head>

Note the use of meta tag with the name "viewport" in the head section. It is mandatory for the site to be responsive in small devices. If you have read my previous article specified above, you will know about data-hide attributes of FooTable.

The "data-hide" attribute is used to specify which columns have to be hidden in which resolution. The attribute is defined in the table header column with breakpoint names. For a normal table, we can give data-hide attributes like below.

<thead>
     <tr>
         <th>
             Employee Code
         </th>
         <th>
             Employee Name
         </th>
         <th data-hide="phone">
             Employee Age
         </th>
         <th data-hide="phone,tablet">
             Designation
         </th>
         <th data-hide="phone,tablet">
             Experience
         </th>
     </tr>
 </thead>

Here, phone & tablet are breakpoints given in FooTable plugin's JS file. We can edit those breakpoint names and values or add new breakpoints as we like.

(function ($, w, undefined) {
    w.footable = {
        options: {
            delay: 100, // The number of millseconds to wait before triggering the react event
            breakpoints: { // The different screen resolution breakpoints
                phone: 480,
                tablet: 720
            },

In the above script from Footable JS file, we can clearly see the value assigned to the breakpoints - phone and tablet. It refers to the width of the screen in pixels at which the columns with the above values in data-hide attribute will be hidden.

Here, if we want to hide a column in both the breakpoints, then we have to specify both those names in data-hide attribute with comma separation (phone, tablet).

But how to integrate this in ASP GridView as there is no thead or <th> in GridView?

So, here goes the most important part of this article. The changes we have to make to get our GridView responsive.

grdviewnew.DataSource = dt;
grdviewnew.DataBind();
grdviewnew.HeaderRow.TableSection = TableRowSection.TableHeader;

Note the highlighted line in the above code.

After the binding of GridView, we have to call this line of code. Basically, this code makes the GridView to group the header row inside a thead tag while rendering in browsers. Without this code, GridView renders the heading row inside <tbody> only.

So that overcomes our first problem of not having a thread for GridView.

The next issue is, giving data-hide attribute for header columns. For that, we have to write the below code inside Rowdatabound function of GridView.

protected void grd_RowDataBound(object sender, GridViewRowEventArgs e)
{
    try
    {
        if (e.Row.RowType == DataControlRowType.Header)
        {
            TableCellCollection cell = e.Row.Cells;
            cell[2].Attributes.Add("data-hide", "phone");
            cell[3].Attributes.Add("data-hide", "tablet,phone");
            cell[4].Attributes.Add("data-hide", "tablet,phone");
        }
    }
    catch (Exception ex)
    {
    }
}

So, this will add the data-hide attribute to the corresponding header cells of GridView.

Now, we will initialize the FooTable property for this GridView.

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=grdviewnew.ClientID%>').footable();
    });
</script>

Now, running our page, we can see our GridView as below.

On desktop - No Change


On tablet - The last 2 columns are hidden.



On mobile - Last 3 columns are hidden.



Clicking/tapping on the Plus symbol, we can see the hidden column values.



That's it. Our ASP GridView is now responsive. We can view it on all the devices without any horizontal scrolling. This will work with the GridView having paging functionality also.

Reference

https://fooplugins.github.io/FooTable/index.html

 

Summary

This article covers the basic functionality of Footable plugin for making the ASP GridView responsive. There are a lot more functionalities available in Footable like sorting, paging, filtering, etc. You can go through the Footable site to explore more.

Hope this will be helpful!