locked
problem with UpdateProgress RRS feed

  • Question

  • User-159752495 posted

    Hello,

              UpdateProgress is not working inside AJAX tab panel Control. What Code change I do to solve this problem.

    I have written the following code

    <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" AutoPostBack="true" ActiveTabIndex="1"
                OnActiveTabChanged="TabContainer1_ActiveTabChanged">
                <ajaxToolkit:TabPanel ID="tb_home" runat="server" HeaderText="Home">
                </ajaxToolkit:TabPanel>
                <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="CSR Registration Process">
                    <ContentTemplate>
                        <asp:UpdateProgress runat="server" ID="UpdateProgress1" AssociatedUpdatePanelID="TabContainer1_TabPanel1_up_addupdt">
                <ProgressTemplate>
    
                    <div id="myModal" class="modal">
    
                        <!-- Modal content -->
                        <div class="modal-content">
    
                            <b>Please wait.......</b>
                        </div>
    
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
                        <asp:UpdatePanel ID="up_addupdt" runat="server" UpdateMode="Conditional">
                            <ContentTemplate>
                                <table>
                                    <tr id="tr_call_No" runat="server" visible="false">
                                        <td>CSR No.:
                                        </td>
    
                                        <td colspan="3">
                                            <asp:Label ID="lbl_call" runat="server" CssClass="lbl_text" Text=""></asp:Label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 200px;">Request System:
                                        </td>
    
                                        <td style="width: 200px;">
                                            <asp:DropDownList ID="drop_system" runat="server" Width="180px" CssClass="dropdown1"
                                                OnSelectedIndexChanged="drop_system_SelectedIndexChanged"
                                                AutoPostBack="true" ValidationGroup="first">
                                                <asp:ListItem Text="Select Request System" Value="0"></asp:ListItem>
                                            </asp:DropDownList>
    
     </ContentTemplate>
                            <Triggers>
                                <asp:PostBackTrigger ControlID="btn_save" />
                                <asp:AsyncPostBackTrigger ControlID="drop_system" />
                                <asp:AsyncPostBackTrigger ControlID="drop_req_type" />
    
                            </Triggers>
                        </asp:UpdatePanel>
    
    </ContentTemplate>
                </ajaxToolkit:TabPanel>
    
    </ajaxToolkit:TabContainer>

    Thanks

    Regards

    Anoop Mathur

    Tuesday, September 27, 2016 3:36 PM

All replies

  • User-1672470423 posted

    Please try by checking below:

    1. Set update panel ClientIDMode="static", so that id will be "up_addupdt" and use the same in update progress AssociatedUpdatePanelID="up_addupdt".

    2. Put another update panel inside update progress as shown in below link:

    http://stackoverflow.com/questions/11140929/multiple-updateprogress-controls-in-tabcontainer-linked-to-single-updatepanel

    3. Make changes as shown in below link:

    http://forums.asp.net/t/1057377.aspx?Update+progress+does+not+appear+if+control+which+triggers+update+is+outside+UpdatePanel

    Please let me know if any of the above three helps.

    Tuesday, September 27, 2016 4:02 PM
  • User-1142886626 posted

     Hi anp123,

    anp123

      UpdateProgress is not working inside AJAX tab panel Control. What Code change I do to solve this problem.

    According to your description, I couldn’t understand your problem clearly.

    Do you mean you want to show the UpdateProgress when clicking the tab panel tag or in a tab panel clicking the button show the UpdateProgress. 

    I guess you want to show the UpdateProgress in one panel when clicking the button.

    I assumed that the update panel refresh would at least be requested the instant the click event was heard so the loader icon would immediately show during the time other stuff is loading. 

    I suggest you could add a button to fire the UpdateProgress. More details, you could refer to follow codes:

    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"/>
        <script type="text/javascript">
        </script>
         <style type="text/css">
            #Background {
            ;
            top:0px;
            bottom:0px;
            left:0px;
            right:0px;
            background-color:gray;
            filter:alpha(opacity=40);
            opacity:0.4;
            }
            #Progress {
            ;
            top:10%;
            left:10px;
            width:300px;
            height:50px;
            text-align:center;
            background-color:white;
            border:solid 3px black;
            }
        </style>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ToolkitScriptManager2" runat="server"></asp:ScriptManager>
            <cc1:TabContainer runat="server" ID="Tabs" Height="138px"  ActiveTabIndex="2" 
                Width="402px" OnActiveTabChanged="Tabs_ActiveTabChanged" >
                <cc1:TabPanel runat="server" ID="Panel1" HeaderText="Address">
                    <ContentTemplate>
    
                    </ContentTemplate>
                </cc1:TabPanel>
                <cc1:TabPanel runat="server" ID="Panel2" HeaderText="Email">
                    <ContentTemplate>
                        <asp:UpdatePanel ID="UpdatePanel2" runat="server" ClientIDMode="Static">
                <ContentTemplate>
            <asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
                Text="Show Records" />
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                     <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
                <ProgressTemplate>
                    <div id="Background"></div>
                    <div id="Progress">
                    <i class="fa fa-spinner fa-spin" style="font-size:24px"></i>
                    Fetching Records Please Wait...
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
                </ContentTemplate>
           </asp:UpdatePanel>
                    </ContentTemplate>
                </cc1:TabPanel>
            </cc1:TabContainer>
        </div>
        </form>
    </body>
    
          protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    this.Tabs_ActiveTabChanged(sender, e);
                
                }
            }
            protected void Button1_Click(object sender, EventArgs e)
            {
                System.Threading.Thread.Sleep(2000);
                Label2.Text = "success!";
            }
            protected void Tabs_ActiveTabChanged(object sender, EventArgs e)
            {
                Label1.Text = "Tabs_ActiveTabChanged success!";
            }
    

    Screen shoot:

    Best regards,

    Ailleen


    Thursday, September 29, 2016 7:22 AM