Responsive GridView for Mobile Phone, Tablet and Desktop display in ASP.Net

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=”https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css”
        rel=”stylesheet” type=”text/css” />
    <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
    <script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.min.js”></script>
    <script type=”text/javascript”>
        $(function () {
            $(‘[id*=GridView1]’).footable();
        });
    </script>
 
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”>
        <Columns>
            <asp:BoundField DataField=”Id” HeaderText=”Id” />
            <asp:BoundField DataField=”Name” HeaderText=”Name” />
            <asp:BoundField DataField=”Company” HeaderText=”Company” />
            <asp:BoundField DataField=”Age” HeaderText=”Age” />
        </Columns>
    </asp:GridView>
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;
                GridView1.DataBind();
                //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;
            }
        }

Screenshot

1

2 (1)

3

NGenious Solutions