Introduction:
Here I will explain how to bind gridview in updatepanel with updateprogress example in asp.net using c#, vb.net. By using ajax postbacktrigger and updateprogress properties in ajax updatepanel we can bind gridview in asp.net and we can show loading image during postbacks using c#, vb.net.
Description:
In previous articles I explained display gridview row details in popup window on hyperlink click in asp.net, jQuery show gridview row details in modal popup in asp.net, asp.net confirmationbox with yes/no options using modalpopup, ajax modalpopupextender to edit gridview row details, group columns in gridview, gridview examples in asp.net and many articles relating to gridview, asp.net, c#,vb.net and jQuery. Now I will explain how to bind gridview in updatepanel with updateprogress example in asp.net using c#, vb.net.
In previous articles I explained display gridview row details in popup window on hyperlink click in asp.net, jQuery show gridview row details in modal popup in asp.net, asp.net confirmationbox with yes/no options using modalpopup, ajax modalpopupextender to edit gridview row details, group columns in gridview, gridview examples in asp.net and many articles relating to gridview, asp.net, c#,vb.net and jQuery. Now I will explain how to bind gridview in updatepanel with updateprogress example in asp.net using c#, vb.net.
Before
implement this example first design one table productinfo in your database as
shown below
Column Name
|
Data Type
|
Allow Nulls
|
productid
|
Int(IDENTITY=TRUE)
|
Yes
|
productname
|
varchar(50)
|
Yes
|
price
|
varchar(50)
|
Yes
|
Once
table created in database enter some dummy data to test application now open
your aspx page and write the code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<title>Bind gridview in
updatepanel updateprogress example in asp.net using c#, vb.net</title>
<style type="text/css">
.overlay
{
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
}
.GridviewDiv {font-size: 100%; font-family: 'Lucida
Grande', 'Lucida Sans Unicode', Verdana, Arial, Helevetica, sans-serif;
color: #303933;}
.headerstyle
{
color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;background-color:
#df5015;padding:0.5em 0.5em 0.5em 0.5em;text-align:center;
}
</style>
<script type="text/javascript">
function showProgress() {
var updateProgress = $get("<%=
UpdateProgress.ClientID %>");
updateProgress.style.display = "block";
}
</script>
</head>
<body>
<form id="form1"
runat="server">
<asp:ScriptManager ID="scriptmanager1"
runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server"
ID="updatepanel1"
UpdateMode="Conditional">
<ContentTemplate>
<div style="align:center; margin-left:350px; margin-top:150px">
<asp:Button ID="btnUpload"
Text="Get
Data" runat="server" onclick="btnGet_Click" OnClientClick="showProgress()" /><br /><br />
<div class="GridviewDiv">
<asp:GridView runat="server"
ID="gvDetails"
AllowPaging="true"
PageSize="10"
AutoGenerateColumns="false"
Width="420px"
OnPageIndexChanging="gvDetails_PageIndexChanging">
<HeaderStyle CssClass="headerstyle"
/>
<Columns>
<asp:BoundField DataField="productid"
HeaderText="Product
Id" />
<asp:BoundField DataField="productname"
HeaderText="Product
Name" />
<asp:BoundField DataField="price"
HeaderText="Price"
/>
</Columns>
</asp:GridView>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload"
/>
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress"
runat="server"
AssociatedUpdatePanelID="updatepanel1">
<ProgressTemplate>
<div class="overlay">
<div style="
z-index: 1000;
margin-left:
350px;margin-top:200px;opacity: 1;-moz-opacity: 1;">
<img alt=""
src="loading.gif"
/>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>
|
Now open your codebehind file and add following namespaces in codebehind
C#
Code
using System;
using
System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
|
After completion of adding namespaces you need to write the
code like as shown below
protected void Page_Load(object
sender, EventArgs e)
{
}
protected void btnGet_Click(object
sender, EventArgs e)
{
BindGridview();
}
protected void BindGridview()
{
DataSet ds = new DataSet();
using (SqlConnection con = new
SqlConnection("Data
Source=Suresh;Integrated Security=true;Initial Catalog=MySampleDB"))
{
con.Open();
SqlCommand cmd = new SqlCommand("select * from productinfo", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
con.Close();
gvDetails.DataSource = ds;
gvDetails.DataBind();
}
System.Threading.Thread.Sleep(2000);
}
protected void gvDetails_PageIndexChanging(object sender, GridViewPageEventArgs
e)
{
gvDetails.PageIndex = e.NewPageIndex;
BindGridview();
}
|
VB.NET
Code
Imports
System.Web.UI.WebControls
Imports System.Data
Imports System.Data.SqlClient
Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal
sender As Object,
ByVal e As EventArgs)
End Sub
Protected Sub btnGet_Click(ByVal
sender As Object,
ByVal e As EventArgs)
BindGridview()
End Sub
Protected Sub BindGridview()
Dim ds As New DataSet()
Using con As New SqlConnection("Data
Source=Suresh;Integrated Security=true;Initial Catalog=MySampleDB")
con.Open()
Dim cmd As New SqlCommand("select
* from productinfo", con)
Dim da As New SqlDataAdapter(cmd)
da.Fill(ds)
con.Close()
gvDetails.DataSource = ds
gvDetails.DataBind()
End Using
System.Threading.Thread.Sleep(2000)
End Sub
Protected Sub gvDetails_PageIndexChanging(ByVal sender As Object, ByVal e As GridViewPageEventArgs)
gvDetails.PageIndex = e.NewPageIndex
BindGridview()
End Sub
End Class
|
Demo
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
0 comments :
Note: Only a member of this blog may post a comment.