|
In this artilce we will explore how to disable portion of the screen while processing. I have used gridview, a button and a dropdownlist to show how it works.
Let's see how we can do this:
Step 1: Add below style sheet in the head section
<style type="text/css">
.Processing
{
background-color: Gray;
opacity: 0.50;
filter: alpha(opacity=50);
}
</style>
Step 2: Add scriptmanager in the form tag.
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
Step 3: Add a div in the form tag.
< div id="divContainer" style="width:500px; height:220px;border:Solid 1px Black;"></div>
Step 4: Add a updatepanel, inside the above div, which contains a gridview, a button and a dropdownlist.
< asp:UpdatePanel runat="server" ID="updGrdView">
<ContentTemplate>
<table>
<tr>
<td colspan="2">
<asp:GridView ID="gvParent" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" ShowHeader="True" DataKeyNames="EmployeeId" AllowPaging="true" PageSize="4" OnPageIndexChanging="gvParent_PageIndexChanging">
<Columns>
<asp:BoundField HeaderText="Employee Id" DataField="EmployeeId" SortExpression="EmployeeId">
<ItemStyle HorizontalAlign="Center" Width="140px" />
</asp:BoundField>
<asp:BoundField HeaderText="Employee Name" DataField="EmployeeName" SortExpression="EmployeeName">
<ItemStyle HorizontalAlign="Center" Width="140px" />
</asp:BoundField>
<asp:BoundField HeaderText="Designation" DataField="Designation" SortExpression="Designation">
<ItemStyle HorizontalAlign="Center" Width="140px" />
</asp:BoundField>
<asp:BoundField HeaderText="Location" DataField="Location" SortExpression="Location">
<ItemStyle HorizontalAlign="Center" Width="140px" />
</asp:BoundField>
</Columns>
<RowStyle BackColor="#EFF3FB" />
<AlternatingRowStyle BackColor="White" />
<HeaderStyle BackColor="Maroon" ForeColor="White" />
</asp:GridView>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSave" runat="server" Text="Dummy Save" OnClick="btnSave_Click" />
</td>
<td>
<asp:DropDownList ID="ddlSelect" runat="server" AutoPostBack="true">
<asp:ListItem Text="Dummy1"></asp:ListItem>
<asp:ListItem Text="Dummy2"></asp:ListItem>
<asp:ListItem Text="Dummy3"></asp:ListItem>
<asp:ListItem Text="Dummy4"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
Step 5: Place a updateprogress control inside the div which has been created in step 2.
< asp:UpdateProgress ID="updProgressTab" AssociatedUpdatePanelID="updGrdView" runat="server">
<ProgressTemplate>
<div class="Processing" id="divProgress">
<table style="width: 100%; height: 100%">
<tr>
<td valign="middle" align="center">
<asp:Image ID="imgLoading" runat="server" ImageUrl="images/gvLoader.gif" />
</td>
</tr>
</table>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
Step 6: Place below javascript in the aspx page.
< script language="javascript" type="text/javascript">
function onUpdating() {
var divWidth = $get('divContainer').style.width.split('px')[0];
var divHeight = $get('divContainer').style.height.split('px')[0];
$get('divProgress').style.width = parseInt(divWidth) + parseInt(1) + "px";
$get('divProgress').style.height = parseInt(divHeight) + parseInt(1) + "px";
var updateProgressDiv = document.getElementById('updProgressTab');
var tabCont = document.getElementById('divContainer');
var divPanelBounds = Sys.UI.DomElement.getBounds(tabCont);
if(navigator.appName == "Microsoft Internet Explorer")
Sys.UI.DomElement.setLocation(updateProgressDiv, divPanelBounds.x + 2, divPanelBounds.y + 2);
else
Sys.UI.DomElement.setLocation(updateProgressDiv, divPanelBounds.x, divPanelBounds.y);
}
</script>
<script language="javascript" type="text/javascript">
// Reference of PageRequestManager.
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
// Async postback starts.
function InitializeRequest(sender, args) {
onUpdating();
}
// Async postback ends.
function EndRequest(sender, args) {
}
</script>
Step 7: Add GetParentTableData in the codebehind file to return the data to bind to gridview on page load.
private DataTable GetParentTableData()
{
DataTable table = new DataTable();
table.Columns.Add("EmployeeId", typeof(string));
table.Columns.Add("EmployeeName", typeof(string));
table.Columns.Add("Designation", typeof(string));
table.Columns.Add("Location", typeof(string));
table.Rows.Add(100, "Andy", "S/W Engg", "NY");
table.Rows.Add(200, "James", "S/W Engg", "NJ");
table.Rows.Add(300, "Ramesh", "Sr. S/W Engg", "Bangalore");
table.Rows.Add(400, "George", "Architect", "London");
table.Rows.Add(500, "Lisa", "Manager", "Washington");
table.Rows.Add(600, "Steve", "S/W Engg", "Kentucky");
table.Rows.Add(700, "Mary", "S/W Engg", "NY");
table.Rows.Add(800, "Priya", "Sr. S/W Engg", "Bangalore");
table.Rows.Add(900, "Kelly", "Architect", "London");
table.Rows.Add(1000, "Samantha", "Manager", "Washington");
return table;
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
gvParent.DataSource = GetParentTableData();
gvParent.DataBind();
}
}
Step 8: Add gvParent_PageIndexChanging for paging in gridview.
protected void gvParent_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
gvParent.PageIndex = e.NewPageIndex;
gvParent.DataSource = GetParentTableData();
gvParent.DataBind();
}
Live Demo
This ends the article of disabling particular portion of page while processing.
|