Loader image with gridview event
Hello,I am using gridview and using grd_RowUpdating event to save data.
Now, i want an loader image says "loader.gif" when i click on save button and it will go when grd_RowUpdating event completed.
I have created div for loading image, but not able to show and hide. I have written code in event start for showprogress and at event end for hideprogess.
Please refer below code
aspx
<asp:GridView ID="gvDataPortal" runat="server" SkinID="GridViewDataPortal" AutoGenerateColumns="false" AllowPaging="false">
<asp:TemplateField HeaderText="Save" HeaderStyle-CssClass="save headertextalign" ItemStyle-CssClass="save1" FooterStyle-CssClass="save1">
<ItemTemplate>
<asp:LinkButton ID="lnkSave" runat="server" Text="SAVE" CommandName="Update" ValidationGroup='<%# "Group_" + Container.DataItemIndex %>'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</asp:GridView>
<div class="UpdatePanelloading" id="divMasterProgress" style="width: 100%; height: 100%; display: none;">
<table id="ProgressTable" cellpadding="0" cellspacing="0" border="0" style="width: 100%; height: 100%;">
<tr align="center" valign="middle">
<td class="LoadingText" align="center" valign="middle">
<img src="../images/loading.gif" alt="Loading" /> Loading..
</td>
</tr>
</table>
</div>
Javascript:
<script type="text/javascript">
function ShowProgress() {
document.getElementById('divMasterProgress').style.display = 'block';
}
function HideProgress() {
document.getElementById('divMasterProgress').style.display = 'none';
}
</script>
aspx.cs
private void showprogress()
{
ClientScript.RegisterStartupScript(GetType(), "Javascript", "javascript:ShowProgress(); ", true);
}
private void hideprogress()
{
ClientScript.RegisterStartupScript(GetType(), "Javascript2", "javascript:HideProgress(); ", true);
}
protected void gvDataPortal_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
try
{
showprogress();
//somecode
}
catch (Exception ex)
{
lblErrorMsg.Text = ex.Message.ToString();
}
finally
{
BindGrid();
hideprogress();
}
}