Hi All, I have a grid view where in contains image buttons (ID=btnEdit) in every row, when i click on this image button, it suppose to show up an Update Progress loading picture by using Modal Popup Extender. My problem is when it executing, will throw out an Errow Message which status that TargetControlID="btnEdit" couldn't find. How do trace the ID from grid view? Thank you.

Below here is my code:-

***gvwTransaction

<asp:GridView ID="gvwTransaction" runat="server">
    <Columns>
        <asp:TemplateField HeaderText="Edit" ShowHeader="False">
            <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" Width="21" />
            <ItemTemplate>
                <asp:ImageButton ID="btnEdit" runat="server" CausesValidation="False" CommandName="Edit"
                    ImageUrl="~/Images/edit.gif" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

***pnlProgress

<asp:Panel ID="pnlProgress" runat="server">
    <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="upCallTrack" runat="server">
        <ProgressTemplate>
            <div>
                <center>
                    <asp:Image runat="server" ID="ProgressImage" ImageUrl="~/Images/loading1.gif" />
                </center>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
</asp:Panel>

***mpeProgress

<ajaxToolkit:ModalPopupExtender ID="mpeProgress" runat="server" TargetControlID="btnEdit"
    PopupControlID="pnlProgress">
</ajaxToolkit:ModalPopupExtender>

I suppose that all this code is inside the update panel named "upCallTrack"

then, I think you do not need the modal popup extender

associating the update progress to the update panel makes the update progress be shown when the update panel is being updated, which is what you need as I understand

Hi Mohammed.Hassan,

Thank you for the replied, you are right on 80% BUT my requirements requested the background to turn into "disable" mode when the update progress is showing on the screen. Any ideas on it?

Try this:

<ProgressTemplate>

<div class="progressBackgroundFilter"></div>
                            <center><div class="processMessage">

                    <asp:Image runat="server" ID="ProgressImage" ImageUrl="~/Images/loading1.gif" />
                </div>
</center>
                    </ProgressTemplate>

In css:

.processMessage

{
position: fixed;top: 39%;left: 41%;padding: 10px;width: 20%;z-index: 1001;background-color: #fff;border: outset 3px #6389ab; } 

.progressBackgroundFilter
{
position: fixed;top: 0px;bottom: 0px;left: 0px;right: 0px;overflow: hidden;padding: 0;margin: 0;background-color: Gray;filter: alpha(opacity=60);opacity: 0.60;z-index: 1000;
 }

Hi baby_pinky,

You can disable the background when the update panel is being updated by using ModalUpdateProgress instead of UpdateProgress

Check this link:

http://www.codeproject.com/KB/ajax/ModalUpdateProgress.aspx

Hi baby_pinky,

You can disable the background when the update panel is being updated by using ModalUpdateProgress instead of UpdateProgress

Check this link:

http://www.codeproject.com/KB/ajax/ModalUpdateProgress.aspx

 Hi,

Please check this link and use this modalupdate progress bar: http://vincexu.blogspot.com/2008/10/how-to-make-modalupdate-progress-bar-on.html

Hi

I think the best way is update progress in the masterpage....

the benefit is any postback will hapen the update progress wil wrok