Auto refresh data in Gridview without loading whole page in - ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

Auto refresh data in Gridview without loading whole page in

Introduction: In this post I will explain how we can Auto refresh data in Gridview without loading whole page in using ajax.
Auto refresh data in Gridview


Add a webform to project. Drag and drop the Gridview, Update Panel control from Toolbox and desgin the .aspx as shown below:
<html xmlns="">
<head runat="server">
   <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src="js/gridviewScroll.min.js"></script>
    <script type="text/javascript" src="js/scrollsaver.min.js"></script>
    <link href="css/GridviewScroll.css" rel="stylesheet" />
    <style type="text/css">
                  font-family: ·L³n¥¿¶ÂÅé, Tahoma, Arial, Verdana;
                  font-weight: normal;
                  font-size: 14px;
                  color: #000;

   <script type="text/javascript">
       $(document).ready(function () {
       function gridviewScroll() {
               width: 336,
               height: 258
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
<asp:Timer ID="Timer1" runat="server" Interval="30000" ontick="Timer1_Tick"></asp:Timer>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
              <asp:PostBackTrigger ControlID="Timer1" />
<asp:GridView ID="grdstate" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" EmptyDataText="No Data Aviable">
<AlternatingRowStyle BackColor="White" />
 <asp:BoundField ItemStyle-Width="150px" DataField="STATE_NAME" HeaderText="State Name" />
  <asp:BoundField ItemStyle-Width="150px" DataField="POPULATION" HeaderText="Population" />  
 <HeaderStyle CssClass="GridviewScrollHeader" />
    <RowStyle CssClass="GridviewScrollItem" />
    <PagerStyle CssClass="GridviewScrollPager" />

To add the Jquery for Scroll in Gridview to See Demos CLICK HERE.
To download the added Jquery and Style sheetCLICK HERE. 

Note: Please do not forget to add ConnectionString in web.config file:
    <add name="con" connectionString="Data Source=SYS-1F78031ED0A;Initial Catalog=TestBlog;Integrated Security=True" /> 


Write the given code in .aspx.cs page:
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Connection"].ToString());
    protected void Page_Load(object sender, EventArgs e)
    public void BindData()
            SqlDataAdapter adp = new SqlDataAdapter("Select * from STATE_DETAIL order by ID Desc", con);
            DataTable dt = new DataTable();
            grdstate.DataSource = dt;
        catch (Exception ex)
    protected void Timer1_Tick(object sender, EventArgs e)

In VB (.aspx.vb)

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("Connection").ToString())
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    End Sub
    Public Sub BindData()
            Dim adp As New SqlDataAdapter("Select * from STATE_DETAIL order by ID Desc", con)
            Dim dt As New DataTable()
            grdstate.DataSource = dt
        Catch ex As Exception
        End Try
    End Sub
    Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As EventArgs)
    End Sub

Bulid and run the project.

Is it helpful?

If yes post your comment to admire my work. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.