Check the below sample code for your reference and impliment it as per your code logic.
I have used SQLDatasource as you have used in your code to apply dataSource to grid. using Customers table from Northwind database.
Also you need to add attributes to each Header Column of GridView depending on its significance in different displays.
For more info check below article links How to sets data-class and data-hide attributes.
Bootstrap Responsive GridView for Mobile Phone, Tablet and Desktop display in ASP.Net using jQuery
It working fine in normal window size and in mobile or in tablet view.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
<link media="screen" rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.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">
/* Applied Responsive For Grid View using footable js*/
$(function () {
$('[id*=GridView1]').footable();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID"
CssClass="footable" DataSourceID="SqlDataSource1" Style="max-width: 100%">
<Columns>
<asp:BoundField DataField="ContactTitle" HeaderText="Contact Title" SortExpression="ContactTitle"
ItemStyle-Wrap="false" />
<asp:BoundField DataField="ContactName" HeaderText="Contact Name" SortExpression="ContactName" />
<asp:BoundField DataField="CompanyName" HeaderText="Company Name" SortExpression="CompanyNamet" />
<asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
<asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" />
<asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" />
<asp:BoundField DataField="Fax" HeaderText="Fax" SortExpression="Fax" />
<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConStr1 %>"
SelectCommand="SELECT TOP 10 CustomerID,ContactTitle,ContactName,CompanyName,Address,City,PostalCode,Country,Fax,Phone FROM Customers">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
C#
/* Apply Bootstrap Collapse and Expand Class for Grid cells attribute*/
private void BootstrapCollapsExpand()
{
if (this.GridView1.Rows.Count > 0)
{
//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";
GridView1.HeaderRow.Cells[4].Attributes["data-hide"] = "phone";
GridView1.HeaderRow.Cells[5].Attributes["data-hide"] = "phone";
GridView1.HeaderRow.Cells[6].Attributes["data-hide"] = "phone";
GridView1.HeaderRow.Cells[7].Attributes["data-hide"] = "phone";
GridView1.HeaderRow.Cells[8].Attributes["data-hide"] = "phone";
//Adds THEAD and TBODY to GridView.
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}
}
VB.Net
'Apply Bootstrap Collapse and Expand Class for Grid cells attribute
Private Sub BootstrapCollapsExpand()
If Me.GridView1.Rows.Count > 0 Then
'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"
GridView1.HeaderRow.Cells(4).Attributes("data-hide") = "phone"
GridView1.HeaderRow.Cells(5).Attributes("data-hide") = "phone"
GridView1.HeaderRow.Cells(6).Attributes("data-hide") = "phone"
GridView1.HeaderRow.Cells(7).Attributes("data-hide") = "phone"
GridView1.HeaderRow.Cells(8).Attributes("data-hide") = "phone"
'Adds THEAD and TBODY to GridView
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader
End If
End Sub
Screenshot
