Tuesday, September 10, 2013

Auto refresh data in Gridview without loading whole page in asp.net

Introduction: In this post I will explain how we can Auto refresh data in Gridview without loading whole page in asp.net 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="http://www.w3.org/1999/xhtml">
<head runat="server">
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></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.

No comments:

Post a Comment