Hi srkakumani,
Refer the below sample.
HTML
<head runat="server">
<title></title>
<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.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<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();
$('[id*=GridView1] tr :last').closest('table').closest('tr').find('td').show();
$(window).resize(function () {
location.reload();
});
$('[id*=GridView1] tr :last').closest('table').closest('tr').on('click', function () {
$(this).next('tr').hide();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" CssClass="footable table toggle-medium"
PageSize="2" DataKeyNames="Number" AutoGenerateColumns="False" GridLines="Both"
AllowPaging="true" data-filter="#filter" data-page-size="4" PagerStyle-CssClass="pagination"
OnPageIndexChanging="GridView1_PageIndexChanging">
<PagerSettings FirstPageText="First" LastPageText="Last" Mode="NextPreviousFirstLast"
NextPageText="Next" PreviousPageText="Previous" />
<Columns>
<asp:BoundField DataField="AccessionNo" HeaderText="AccessionNo" />
<asp:BoundField DataField="CategoryNo" HeaderText="CatNo" />
<asp:BoundField DataField="BookName" HeaderText="BookName" />
<asp:BoundField DataField="Name in marathi" HeaderText="Name in marathi" />
<asp:BoundField DataField="Author" HeaderText="Author" />
<asp:BoundField DataField="AuthorMarathi" HeaderText="AuthorMarathi" />
<asp:BoundField DataField="Category" HeaderText="Category" />
<asp:BoundField DataField="Language" HeaderText="Language" />
<asp:BoundField DataField="Publication" HeaderText="Publication" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGrid();
}
}
private void BindGrid()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] {
new DataColumn("Number"),
new DataColumn("AccessionNo"),
new DataColumn("CategoryNo"),
new DataColumn("BookName"),
new DataColumn("Name in marathi"),
new DataColumn("Author"),
new DataColumn("AuthorMarathi"),
new DataColumn("Category"),
new DataColumn("Language"),
new DataColumn("Publication")
});
dt.Rows.Add(1, "1", "1", "Test1", "Marathi1", "Author1", "AuthorMarathi1", "1", "English", "BPB");
dt.Rows.Add(2, "2", "2", "Test2", "Marathi2", "Author2", "AuthorMarathi2", "2", "Hindi", "Anupam");
dt.Rows.Add(3, "3", "3", "Test3", "Marathi3", "Author3", "AuthorMarathi3", "3", "Marathi", "Rox");
dt.Rows.Add(4, "4", "4", "Test4", "Marathi4", "Author4", "AuthorMarathi4", "4", "Bengali", "Test");
dt.Rows.Add(5, "5", "5", "Test5", "Marathi5", "Author5", "AuthorMarathi5", "5", "English", "BPB");
dt.Rows.Add(6, "6", "6", "Test6", "Marathi6", "Author6", "AuthorMarathi6", "6", "Hindi", "Anupam");
dt.Rows.Add(7, "7", "7", "Test7", "Marathi7", "Author7", "AuthorMarathi7", "7", "Marathi", "Rox");
dt.Rows.Add(8, "8", "8", "Test8", "Marathi8", "Author8", "AuthorMarathi8", "8", "Bengali", "Test");
dt.Rows.Add(9, "9", "9", "Test9", "Marathi9", "Author9", "AuthorMarathi9", "9", "English", "BPB");
dt.Rows.Add(10, "10", "10", "Test10", "Marathi10", "Author10", "AuthorMarathi10", "10", "Hindi", "Anupam");
dt.Rows.Add(11, "11", "11", "Test11", "Marathi11", "Author11", "AuthorMarathi11", "11", "Marathi", "Rox");
dt.Rows.Add(12, "12", "12", "Test12", "Marathi12", "Author12", "AuthorMarathi12", "12", "Bengali", "Test");
dt.Rows.Add(13, "13", "13", "Test13", "Marathi13", "Author13", "AuthorMarathi13", "13", "English", "BPB");
dt.Rows.Add(14, "14", "14", "Test14", "Marathi14", "Author14", "AuthorMarathi14", "14", "Hindi", "Anupam");
dt.Rows.Add(15, "15", "15", "Test15", "Marathi15", "Author15", "AuthorMarathi15", "15", "Marathi", "Rox");
dt.Rows.Add(16, "16", "16", "Test16", "Marathi16", "Author16", "AuthorMarathi16", "16", "Bengali", "Test");
GridView1.DataSource = dt;
GridView1.DataBind();
GridView1.HeaderRow.Cells[2].Attributes["data-class"] = "expand";
GridView1.HeaderRow.Cells[0].Attributes["data-hide"] = "phone";
GridView1.HeaderRow.Cells[1].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";
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}
public void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
BindGrid();
}
Screenshot
