Search code examples
c#panelprogress

UpdateProgress fire after first panel update

I have an UpdateProgress associated with an UpdatePanel. The problem is it's not firing until the second update.

Ì have a general UpdatePanel with ID="uppGeneric" and a child one with ID="uppAgrupar" which has a LinkButton inside. When I click on LinkButton it doesn't fire the UpdateProgress bar.

<asp:UpdatePanel ID="uppGeneric" runat="server" UpdateMode="Conditional">
   <ContentTemplate>
      <div class="row">
         <div class="col-md-12 mx-auto">
             <br />
             <asp:UpdateProgress ID="upCargando" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="uppAgrupar">
                  <ProgressTemplate>
                      <div class="progress">
                          <div class="indeterminate" style="width: 100%"></div>
                      </div>
                  </ProgressTemplate>
              </asp:UpdateProgress>
          </div>
       </div>

     <div class="row">
          <div class="col-md-6 mx-auto">
             <asp:UpdatePanel ID="uppAgrupar" runat="server" UpdateMode="Conditional">
                   <ContentTemplate>
                        <asp:LinkButton ID="btnAgrupar" runat="server" CssClass="el_s btn btn-info btn-block" OnClick="btnAgrupar_Click"><i class="fa fa-search"></i> (S) BUSCAR</asp:LinkButton>
                   </ContentTemplate>
                   <Triggers>
                      <asp:AsyncPostBackTrigger ControlID="btnAgrupar" EventName="Click" />
                   </Triggers>
             </asp:UpdatePanel>
         </div>
      </div>

And in code behind I execute (to be sure):

uppAgrupar.Update();

but nothing happens.

Solution

  • I found a partial solution.

    The UpdateProgress

    <asp:UpdateProgress ID="upCargando" runat="server" AssociatedUpdatePanelID="uppAgrupar">
                            <ProgressTemplate>
                                <div class="progress">
                                    <div class="indeterminate" style="width: 100%"></div>
                                </div>
                            </ProgressTemplate>
                        </asp:UpdateProgress>

    generates the next HTML and CSS:

    enter image description here

    Which has "display: none;"

    The problem is that display attribute was not set up to "display: block;" on first button click.

    So, my solution was creating a javascript function that change the display attribute that is fired on the event "onClientClick".

    <asp:LinkButton ID="btnAgrupar" runat="server" CssClass="el_s btn btn-info btn-block" OnClientClick="activar_barra()" OnClick="btnAgrupar_Click"><i class="fa fa-search"></i> (S) BUSCAR</asp:LinkButton>

    and the javascript function is (it could access by ClientID but it's the same result)

        function activar_barra()
    {
        document.getElementsByClassName('progress')[0].parentNode.style.display = "block";
    }