Hi arvindasp,
You need to re-apply the jquery footable plugin after partial postback.
Refer below example.
HTML
<asp:ScriptManager runat="server" />
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" OnTick="RefreshGridView" Interval="2000" />
<asp:Label ID="LblLastUpdatedMsg" ForeColor="Red" Text="" runat="server" />
<asp:GridView ID="GridView1" 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="Country" HeaderText="Country" />
<asp:BoundField DataField="Salary" HeaderText="Salary" />
</Columns>
</asp:GridView>
<br />
<asp:Button Text="Submit" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
JavaScript
<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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/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();
});
//On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
$('[id*=GridView1]').footable();
}
});
};
</script>
Namespaces
C#
using System.Data;
VB.Net
Imports System.Data
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.PopulateGridView();
}
}
protected void RefreshGridView(object sender, EventArgs e)
{
this.PopulateGridView();
LblLastUpdatedMsg.Text = "Last Updated at " + DateTime.Now;
}
private void PopulateGridView()
{
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
Me.PopulateGridView()
End If
End Sub
Protected Sub RefreshGridView(sender As Object, e As EventArgs)
Me.PopulateGridView()
LblLastUpdatedMsg.Text = "Last Updated at " & DateTime.Now
End Sub
Private Sub PopulateGridView()
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 Sub
