Bootstrap Responsive GridView for Mobile Phone, Tablet in ASP.Net.

How we make Responsive grid view in asp.net using bootstrap.

<asp:GridView ID="GridViewCustomer " CssClass="footable" runat="server" AutoGenerateColumns="false"

    Style="max-width: 500px">

    <Columns>

        <asp:BoundField DataField="Id" HeaderText="Customer Id" />

        <asp:BoundField DataField="name" HeaderText="Customer name" />

        <asp:BoundField DataField="address" HeaderText="Country" />

    </Columns>

</asp:GridView>

Binding the GridView 

The GridViewCustomer 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.

protected void Page_Load(object sender, EventArgs e)

{

    if (!this.IsPostBack)

    {

        DataTable dt = new DataTable();

        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new         DataColumn("Name"), new DataColumn("Country") });

        dt.Rows.Add(1, "John Hammond", "United States");

        dt.Rows.Add(2, "Mudassar Khan", "India");

        dt.Rows.Add(3, "Suzanne Mathews", "France");

        dt.Rows.Add(4, "Robert Schidner", "Russia");

        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;

    }

}

<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*=GridViewCustomer ]').footable();

    });

</script>