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>
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
