Responsive GridView in ASP.Net (Mobile, Tablet & Desktop)

In order to make the GridView responsive,You can use Footable jQuery plugin which is compatible with Bootstrap design.

To use Footable jQuery include the following code inside the form tag:
<link href=””
        rel=”stylesheet” type=”text/css” />
    <script type=”text/javascript” src=””></script>
    <script type=”text/javascript” src=””></script>
    <script type=”text/javascript”>
        $(function () {


The HTML Markup consists of an ASP.Net GridView. You have to apply the CSS class footable to the GridView.
    <asp:GridView ID=”GridView1″ CssClass=”footable” runat=”server” AutoGenerateColumns=”false”
        Style=”max-width: 500px”>
            <asp:BoundField DataField=”Id” HeaderText=”Id” />
            <asp:BoundField DataField=”Name” HeaderText=”Name” />
            <asp:BoundField DataField=”Company” HeaderText=”Company” />
            <asp:BoundField DataField=”Age” HeaderText=”Age” />
You will need to import the following C# namespaces.
using System.Data;
Imports System.Data;

Binding the Grid View 

        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(“Company”), new                               DataColumn(“Age”) });
                dt.Rows.Add(1, “Savan”, “MSOSL”, 23);
                dt.Rows.Add(2, “Rupesh”, “KLOSJ”, 25);
                dt.Rows.Add(3, “Rahul”, “JSKL”, 26);
                GridView1.DataSource = dt;
                //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;