Solved

Ajax trigger updatepanel question

Posted on 2013-11-20
1
490 Views
Last Modified: 2013-12-27
I have a page,
where there is a left pane and right pane.

right pane is inside the update panel and the right pane has a submit button as well.
also the right pane has a trigger such that when i click any item on the list box on left panel, the right pane gets refreshed based on the item clicked.

I need to have a progress bar on the right panel, such that when i click on the submit button inside the right panel updatepanel, the progress bar shows.

but, it is not showing up..

here is my code.

        <table cellpadding="0" cellspacing="0" border="0" style="margin-left: 20px;" width="98%" class="PanelContainer">
            <tr class="PanelTitle">
                <td>
                    Reports
                </td>
            </tr>
            <tr>
                <td>
                    <div style ="height:380px; width:200px;  border-right:solid 1px #808080; float:left; margin-right:100px; padding-left: 0px;">
                        <asp:GridView  Width="200" runat="server" id ="gridReports" AutoGenerateColumns="False<wbr ></wbr>" ShowHeader="False"
                            Cellpadding="4"
                            CssClass="mGrid" 
                            GridLines="None"  
                            onrowcommand="gridReports_<wbr ></wbr>RowCommand<wbr ></wbr>" 
                            DataKeyNames="ReportID, Name" BorderColor="black" BorderStyle="None" >
                             <AlternatingRowStyle BackColor="#DCDCDC" />
                            <Columns>
                                <asp:ButtonField CommandName="Select" DataTextField="Name" 
                                    Text="Select" />
                            </Columns>
                        </asp:GridView>
                    </div>
                    <div style ="height:400px; width:400px; border:solid 0px black;float:left">
                        
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                
            <asp:ValidationSummary id="ValidationSummary1" runat="server" 
            ShowMessageBox="True" ShowSummary="False"></asp:<wbr ></wbr>Validation<wbr ></wbr>Summary>

            <asp:Table ID="Table1" runat="server">
                
            <asp:TableRow>
            <asp:TableCell BorderStyle="None"  BorderWidth="0px" BorderColor="Blue">
               <div style="margin-left:50px; font-weight: bold; margin-bottom: 10px;"> <asp:Label ID="lbTop"  runat="server"></asp:Label<wbr ></wbr>></div>
            </asp:TableCell>
            </asp:TableRow>
            <asp:TableRow>
            <asp:TableCell ID="TableCell1" runat="server"  BorderStyle="Solid"  BorderWidth="0px" BorderColor="gray"  >
                <asp:Table ID="Table2" runat="server"    >
                    <asp:TableRow ID="tcParamRow">
                    <asp:TableCell VerticalAlign="Top" >         
                        <asp:Table  runat="server" ID="TableParameters" CssClass="tableparameters"<wbr ></wbr> >
                        </asp:Table>
                    </asp:TableCell>
                    <asp:TableCell Width="70px"  VerticalAlign="Top" HorizontalAlign="Center"  BorderStyle="none"  BorderWidth="0px" BorderColor="Blue">         
                        <%--<asp:UpdateProgress ID="progress1" runat="server" DisplayAfter="1">
                        <ProgressTemplate>
                            <asp:Panel ID="pnlProgressBar" runat="server" CssClass="progress">
                            <div class="progress">
                                <asp:Image ID="Image1" runat="Server"  ImageAlign="Middle" ImageUrl="~/spinner4-green<wbr ></wbr>ie.gif" />
                            </div>
                            </asp:Panel>
                        </ProgressTemplate>
                        </asp:UpdateProgress>--%>
                        </asp:TableCell>
                    </asp:TableRow>
                    <asp:TableRow>
                   <asp:TableCell HorizontalAlign="Center"  VerticalAlign="Bottom" ColumnSpan="2" > 
                         <asp:Table Width="300px"  ID="Table3" CellPadding="18" runat="server" >
                            <asp:TableRow Height="20">
                             <asp:TableCell CssClass="lnkButton" >
                                
                                <asp:LinkButton ID="btnRunReport" runat="server" Visible="False"  OnClick="btnRunReport_Clic<wbr ></wbr>k"  Width="150"  OnClientClick="return ValidateDateRange()">Creat<wbr ></wbr>e Report</asp:LinkButton>
                                <%--<asp:Button ID="btnRunReport" CssClass="Button"  Text="Create Report" runat="server" Visible="False" OnClick="btnRunReport_Clic<wbr ></wbr>k" Width="150" OnClientClick="return ValidateDateRange();" />--%> 
                            </asp:TableCell>
                            <asp:TableCell runat="server">
                                <input type="hidden" id="hidRangeDays" runat="server"/>
                            </asp:TableCell>    
                            </asp:TableRow>
                            <asp:TableRow ID = "trNote" runat="server" Visible="False">
                                <asp:TableCell ColumnSpan="2">
                                    <div style="margin-top: 30px; font-size: 11px;"><i><b>Note:</b> In the listbox above, hold control and left click on mouse to multiselect if it is enabled.</i> </div>
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>    
                    </asp:TableCell>
                    </asp:TableRow>
                </asp:Table>
            </asp:TableCell>
            </asp:TableRow>
            <asp:TableRow>
            <asp:TableCell  BorderStyle="None"  BorderWidth="0px" BorderColor="LightBlue">
                <asp:PlaceHolder runat="server" ID="phMessage"  >
                </asp:PlaceHolder>
            </asp:TableCell>
            </asp:TableRow>
            </asp:Table>
                </ContentTemplate>
                <Triggers>
                <asp:AsyncPostBackTrigger ControlID="gridReports" EventName="Rowcommand" />
                </Triggers>
                </asp:UpdatePanel>

Open in new window

0
Comment
Question by:agorkhali
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 12

Accepted Solution

by:
jitendra patil earned 500 total points
ID: 39668520
hi,
you  need to add the associatedupdatepanel id to the updateprogress controls.

please see the link given below for complete refence of adding progress bars.
3 Different Ways to Display Progress in an ASP.NET AJAX Application

hope this helps.
0

Featured Post

Why You Need a DevOps Toolchain

IT needs to deliver services with more agility and velocity. IT must roll out application features and innovations faster to keep up with customer demands, which is where a DevOps toolchain steps in. View the infographic to see why you need a DevOps toolchain.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question