refresh Gridview Data regularly, without any page - postback.

8:46:00 pm 1 Comments

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:
 
<form id="form1" runat="server">
 
 
 
<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  --%>
 
         
         <Triggers><%-- Triggers contains the list of events that will force update panel to update it's content asynchronously--%>
              <%-- 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>
 
 
         <ContentTemplate>
 
                        <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();
} 
 
 
 

Unknown

1 comment:

Subscribe to: Post Comments (Atom)