Show Progress bar during data binding in Gridview
Hello friends,
Today I will be explain , how can we use progress bar in our
application, when we are binding data to gridview or editing information to
gridview or datalaist. Generally when we are bind are editing data it will take
some time for display information or update data. In that situation a normal
user can’t determine what’s going on. In this case when we are using progress bar,
then it will be display information regarding progress of operation.
So there, now I will be explaining all steps how we can we
use progress bar to our website using gridview.
Step 1: Create database and table using this script
Create database testdata
CREATE TABLE [dbo].[Accordian](
[id] [int] IDENTITY(1,1) NOT NULL,
[name] [nvarchar](50) NULL,
[address] [nvarchar](500) NULL,
[phno] [nvarchar](13) NULL,
[emailid] [nvarchar](50) NULL,
CONSTRAINT
[PK_Centerdetail] PRIMARY KEY CLUSTERED
(
[id] ASC
)WITH
(PAD_INDEX
= OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS
= ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
Step 2: Now Start your project and add new Project
Step 3: Now Add a new page with Name gridview.aspx.
Step 4: Add reference for Ajaxtoolkit to your project in bin
folder.
Step 5: Now write this code for drag an updatepanel to your
toolbox and add an updateprogressbar to toolbox and add a gridview. Code will
be like this.
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="gridview.aspx.cs"
Inherits="gridview"
%>
<%@ Register
Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="asp"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager
ID="ToolkitScriptManager1"
runat="server">
</asp:ToolkitScriptManager>
<div><asp:UpdatePanel ID="UpdatePanel1"
runat="server"><ContentTemplate><div style=" left:30%; top:20%; position:absolute;background-color: Gray;
filter: alpha(opacity=80);
opacity: 1;">
<asp:UpdateProgress ID="uprNavigation" runat="server" AssociatedUpdatePanelID="UpdatePanel1" >
<ProgressTemplate
>
<asp:Image ToolTip="Loading"
ID="imgLoader"
runat="server"
ImageUrl="~/preogressbar.gif"/>
</ProgressTemplate>
</asp:UpdateProgress></div>
<asp:GridView ID="grdta" runat="server"
CellPadding="4"
ForeColor="#333333"
GridLines="None"
Width="750px"
AutoGenerateColumns="false"
onrowcancelingedit="grdta_RowCancelingEdit"
onrowediting="grdta_RowEditing"
onrowupdating="grdta_RowUpdating"><Columns>
<asp:TemplateField><ItemTemplate><asp:Label ID="lblname"
Text='<%#Eval("name") %>' runat="server"></asp:Label></ItemTemplate><EditItemTemplate><asp:TextBox ID="txtname" runat="server" Text='<%#Eval("name") %>'></asp:TextBox></EditItemTemplate></asp:TemplateField>
<asp:TemplateField><ItemTemplate><asp:Label ID="lblemil"
Text='<%#Eval("emailid") %>' runat="server"></asp:Label></ItemTemplate><EditItemTemplate><asp:TextBox ID="txtemail" runat="server" Text='<%#Eval("emailid") %>'></asp:TextBox></EditItemTemplate></asp:TemplateField>
<asp:TemplateField><ItemTemplate><asp:LinkButton ID="lnkedit"
CommandName="Edit"
runat="server"
Text="Edit"></asp:LinkButton></ItemTemplate></asp:TemplateField>
</Columns>
<AlternatingRowStyle
BackColor="White"
ForeColor="#284775"
/>
<EditRowStyle BackColor="#999999"
/>
<FooterStyle BackColor="#5D7B9D"
Font-Bold="True"
ForeColor="White"
/>
<HeaderStyle BackColor="#5D7B9D"
Font-Bold="True"
ForeColor="White"
/>
<PagerStyle BackColor="#284775"
ForeColor="White"
HorizontalAlign="Center"
/>
<RowStyle BackColor="#F7F6F3"
ForeColor="#333333"
/>
<SelectedRowStyle
BackColor="#E2DED6"
Font-Bold="True"
ForeColor="#333333"
/>
<SortedAscendingCellStyle
BackColor="#E9E7E2"
/>
<SortedAscendingHeaderStyle
BackColor="#506C8C"
/>
<SortedDescendingCellStyle
BackColor="#FFFDF8"
/>
<SortedDescendingHeaderStyle
BackColor="#6F8DAE"
/>
</asp:GridView></ContentTemplate></asp:UpdatePanel>
</div>
</form>
</body>
</html>
Step 6: This code for bind gridview.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
public partial class gridview :
System.Web.UI.Page
{
SqlConnection con = new
SqlConnection("Data
Source=abc; Initial Catalog=testdata; User Id=santosh; pwd=123;
");
protected void
Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
binddata();
}
}
//
public void
binddata()
{
con.Open();
SqlCommand cmd = new
SqlCommand("Select
* from dbo.Accordian", con);
SqlDataAdapter da = new
SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
if (ds.Tables[0].Rows.Count > 0)
{
grdta.DataSource = ds;
grdta.DataBind();
con.Close();
}
}
protected void
grdta_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
grdta.EditIndex = -1;
binddata();
}
protected void
grdta_RowEditing(object sender, GridViewEditEventArgs e)
{
grdta.EditIndex = e.NewEditIndex;
binddata();
}
protected void
grdta_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
}
}
This is the snapshot for this project is.
You can download source code from theredownload
