To refresh Gridview Data regularly, without any page

We use gridview to view data in tabular format on the web page. If the web page is not reloaded for some time, and some data manipulation(insert/update/delete) occurs at backend, then the viewer is presented with older(wrong) data.

So, there is a need to refresh the content of grid-view regularly without any user input (page postback).

First, create a web-application using Visual-Studio 2005 or later.

(Note: For visual-studio 2005, we'll have to make this web-application ajax enabled by selecting "Asp .Net Ajax-Enabled Web-site" Template.Do note that in case of visual studio 2008, it has an in-built support for ajax, so there is no need to specify anything extra.)

Now, in Design-Mode,

Add "Timer" and "Update-Panel" controls from "Ajax Extensions" tab of Toolbox. Set Interval for the Timer (suppose 10 sec).

Add the GridView control inside the Update-Panel Control.

Now set "UpdateMode" property of Update-Panel to "Conditional".

And set Timer as Trigger Control for Update-Panel and select "Tick" as event-name

Now, in the page_load(), Bind data to gridview.

Run the application, do any changes in database table, and u'll find, the gridview data will be refreshed regularly at each time-interval specified(10 seconds) without any page-postback.

Sample Code:

<br />

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

<asp:Timer ID="Timer1" runat="server" Interval="10000" >

</asp:Timer>

</div>

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">

<%-- UpdateMode for Update Panel is set Conditional as it will update it's content based upon condition --%>

<%-- Tick event of timer1 has been selected as Triggering event for asynchronous updation of update panel data which will be executed at each time-interval(10 seconds) specified --%>

<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />

</Triggers>

<asp:DataGrid ID="grvDemo" runat="server" Width="100%" GridLines="Both" HeaderStyle-BackColor="AntiqueWhite" AutoGenerateColumns="true">

</asp:DataGrid>

</ContentTemplate>

</asp:UpdatePanel>

</form>

In Page_Load() write,

//Definition of BindGrid()

BindGrid();

//Definition of BindGrid()

public void BindGrid()

{

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);

SqlCommand cmd = new SqlCommand();

cmd.CommandText = "select * from Table1 order by 1";

cmd.Connection = con;

con.Open();

SqlDataReader dr = cmd.ExecuteReader();

grvDemo.DataSource = dr;

grvDemo.DataBind();

}

Related Tags:
ASP.NET

Author: Satyadeep kumar

Software Technology Tips

ASP.NET

Let us Connect!