Responsive Gridview for mobile and tablet in asp.net

July 13, 2018 1 comment

HTML Markup
The HTML Markup consists of an ASP.Net GridView. I have applied 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="Name" HeaderText="Customer Name" />
        <asp:BoundField DataField="Id" HeaderText="Customer Id" />
        <asp:BoundField DataField="Country" HeaderText="Country" />
        <asp:BoundField DataField="Salary" HeaderText="Salary" />
    </Columns>
</asp:GridView>


Namespaces
You will need to import the following namespaces.

C#

using System.Data;

VB.Net
Imports System.Data


Binding the GridView
The GridView is populated using some dummy records using DataTable, you can populate it from database too.
After the GridView is populated with data you will need add the following attributes to each Header Column of GridView depending on its significance in different displays.
1. data-class = “expand” – You need to specify this attribute to the first column so that it shows the expand collapse button which will be used to show or hide the hidden column fields in Mobile Phone or Tablet.
2. data-hide = “phone” – You need to specify this attribute for all the columns that you want to hide in smaller displays like Mobile Phone or Tablet. The below table displays the possible values.
Value
Hidden in Mobile Phone
Hidden in Tablet
Hidden in Desktop
phone
Yes
No
No
phone,tablet
Yes
Yes
No
all
Yes
Yes
Yes

Also you need to set the GridView Header Row TableSection property to TableHeader so that it renders the HTML Table with THEAD and TBODY tags as it is necessary to have these tags to make the plugin work.
C#
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("Country"), new DataColumn("Salary") });
        dt.Rows.Add(1, "John Hammond", "United States", 70000);
        dt.Rows.Add(2, "Mudassar Khan", "India", 40000);
        dt.Rows.Add(3, "Suzanne Mathews", "France", 30000);
        dt.Rows.Add(4, "Robert Schidner", "Russia", 50000);
        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;
    }
}

VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(3) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country"), New DataColumn("Salary")})
        dt.Rows.Add(1, "John Hammond", "United States", 70000)
        dt.Rows.Add(2, "Mudassar Khan", "India", 40000)
        dt.Rows.Add(3, "Suzanne Mathews", "France", 30000)
        dt.Rows.Add(4, "Robert Schidner", "Russia", 50000)
        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
    End If
End Sub


Applying the FooTable responsive Table jQuery Plugin
You just need to inherit, jQuery, Footable jQuery Plugin and Footable CSS files and inside the jQuery document ready event handler, apply the plugin to the GridView control.
<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>


Screenshots
GridView displayed in desktop


GridView displayed in when browser width set to Mobile Phone width





1 comment: