I had implemented the Ajax timer control to update Gridview data(along with Progress bar inside Gridview) after some interval of time.
Below is the full code:
HMTL:
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<%--style & Script for progress bar in Gridview --%>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="css/jquery-ui.css" rel="stylesheet" />
<link href="css/jquery-ui.min.css" rel="stylesheet" />
<link href="css/jquery.ui.theme.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></cc1:ToolkitScriptManager>
<script type="text/javascript">
$(function () {
$(".progress").each(function () {
$(this).progressbar({
value: parseInt($(this).find('.progress-label').text())
});
});
//On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
$(".progress").each(function () {
$(this).progressbar({
value: parseInt($(this).find('.progress-label').text())
});
});
}
});
};
});
</script>
</div>
<asp:UpdatePanel ID="UpAuto_Update2" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="500"></asp:Timer>
<asp:GridView ID="QualicisionGridView" runat="server" AutoGenerateColumns="False" Width="100%" PageSize="5" AllowPaging="True"
OnPageIndexChanging="QualicisionGridView_PageIndexChanging" OnRowDataBound="QualicisionGridView_RowDataBound">
<Columns>
<asp:BoundField HeaderText="No" DataField="id" ItemStyle-CssClass="ColumnAlignment"/>
<asp:BoundField HeaderText="Value" DataField="Values" ItemStyle-Width="15%" ItemStyle-CssClass="ColumnAlignment"/>
<asp:TemplateField ItemStyle-Width="200">
<ItemTemplate>
<div class='progress'>
<div class="progress-label" style="display:none">
<%# Eval("Values") %>
</div>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
C#:
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
BindGrid();
}
}
protected void BindGrid()
{
string query = "SELECT * FROM Table";
GridView1.DataSource = DataManager.DatabaseManager.GetOrCreateConnection(DataManager.DatabaseManager.ConnectionType.MySQL).GetData(query);
GridView1.DataBind();
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
BindGrid();
}
protected void Timer1_Tick(object sender, EventArgs e)
{
BindGrid();
}
It is working fine except that the Gridview paging is taking some time(15-20 seconds) to go to next page.
I checked my code, may be i am unable to find the reason behind the problem.
Please reply why this is hapenning.