locked
Update Progress Control RRS feed

  • Question

  • User-883855585 posted

    How can I hide the gridview once an item is selected from the dropdownlist?  It is not visible when the page loads initially but once a selection is made it stays visible while the loading .gif is displayed.  I want to hide it while the .gif is displayed.

     

    <asp:ScriptManager ID="ScriptManager1" runat="server">
                                    </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div>
                        <table class="style1">
                            <tr>
                                <td class="style2">
                                    
                                </td>
                                <td class="style3">
                                    &nbsp;</td>
                                <td>
                                    &nbsp;</td>
                            </tr>
                            <tr>
                                <td class="style2">
                                    <asp:Label ID="Label1" runat="server" Text="Schedule Slot:" Font-Bold="True" 
                            ForeColor="White"></asp:Label>
                                    &nbsp;
                                    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 
                            BackColor="White" DataSourceID="SqlDataSource1" DataTextField="slot" 
                            DataValueField="slot" ForeColor="Black">
                                    </asp:DropDownList>
                                    &nbsp;&nbsp;
                                </td>
                                <td class="style3">
                                    &nbsp;&nbsp;&nbsp;
                                </td>
                                <td>
                                    <asp:UpdateProgress ID="UpdateProgress1" runat="server" 
                                        AssociatedUpdatePanelID="UpdatePanel1">
                                        <ProgressTemplate>
                                            <img alt="checking" src="/processing.gif" style="height: 38px; width: 144px" /> 
                                            
                                        </ProgressTemplate>
                                    </asp:UpdateProgress>
                                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                            BorderStyle="None" DataSourceID="SqlDataSource2" Font-Bold="True" 
                            ForeColor="White" GridLines="None">
                                        <Columns>
                                            <asp:BoundField DataField="Column1" HeaderText="Next Available Slot" 
                                    NullDisplayText="No Slots Available" ReadOnly="True" ShowHeader="False" 
                                    SortExpression="Column1">
                                                <HeaderStyle Font-Underline="True" />
                                            </asp:BoundField>
                                        </Columns>
                                    </asp:GridView>
                                </td>
                            </tr>
                            <tr>
                                <td class="style2">
                                    &nbsp;</td>
                                <td class="style3">
                                    &nbsp;</td>
                                <td>
                                    &nbsp;</td>
                            </tr>
                        </table>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
       

    Monday, June 29, 2015 10:22 AM

All replies

  • User177399542 posted

    Hi Mongol

    Try this code: (Replace Id's with your existing control id's)

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
        <asp:ScriptManager ID="scriptmanager" runat="server" />
        <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:GridView runat="server" ID="grdTest">
                </asp:GridView>
                <asp:DropDownList runat="server" ID="ddlTest" AutoPostBack="true" OnSelectedIndexChanged="ddlTest_SelectedIndexChanged">
                    <asp:ListItem Text="text1" />
                    <asp:ListItem Text="text2" />
                </asp:DropDownList>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="ddlTest" EventName="SelectedIndexChanged" />
            </Triggers>
        </asp:UpdatePanel>
        <br />
        <script type="text/javascript">
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(startRequest);
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
    
            function startRequest(sender, e) {
                //hide gridview during the AJAX call
                document.getElementById('<%=grdTest.ClientID%>').style.display = 'none';
            }
            function endRequest(sender, e) {
                //show gridview once the AJAX call has completed
                document.getElementById('<%=grdTest.ClientID%>').style.display = 'block';
            }
        </script>
    
    
    
    </asp:Content>

    //--- For testing only

     protected void ddlTest_SelectedIndexChanged(object sender, EventArgs e)
        {
            //--- You donot need this.(Just for testing).
            Thread.Sleep(3000);
        }

    Tuesday, June 30, 2015 2:03 AM
  • User-883855585 posted

    I tried the code but now the gridview never displays.

                                    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 
                                    OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
                            BackColor="White" DataSourceID="SqlDataSource1" DataTextField="slot" 
                            DataValueField="slot" ForeColor="Black">
                                    </asp:DropDownList>
                                    &nbsp;&nbsp;
                                </td>
                                <td class="style3">
                                    &nbsp;&nbsp;&nbsp;
                                </td>
                                <td>
                                    <asp:UpdateProgress ID="UpdateProgress1" runat="server" 
                                        AssociatedUpdatePanelID="UpdatePanel1">
                                        <ProgressTemplate>
                                            <img alt="checking" src="Progressbar.gif" style="height: 21px; width: 40px" /> 
                                           Checking.... 
                                        </ProgressTemplate>
                                    </asp:UpdateProgress>
                                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                            BorderStyle="None" DataSourceID="SqlDataSource2" Font-Bold="True" 
                            ForeColor="White" GridLines="None" Visible="False">
                                        <Columns>
                                            <asp:BoundField DataField="Column1" HeaderText="Next Available Slot" 
                                    NullDisplayText="No Slots Available" ReadOnly="True" ShowHeader="False" 
                                    SortExpression="Column1">
                                                <HeaderStyle Font-Underline="True" />
                                            </asp:BoundField>
                                        </Columns>
                                    </asp:GridView>
                                </td>
                            </tr>
                            <tr>
                                <td class="style2">
                                    &nbsp;</td>
                                <td class="style3">
                                    &nbsp;</td>
                                <td>
                                    &nbsp;</td>
                            </tr>
                        </table>
                    </div>
                </ContentTemplate>
                  <Triggers>
                <asp:AsyncPostBackTrigger ControlID="dropdownlist1" EventName="SelectedIndexChanged" />
            </Triggers>     
            </asp:UpdatePanel>
            <script type="text/javascript">
                Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(startRequest);
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
    
                function startRequest(sender, e) {
                    //hide gridview during the AJAX call
                    document.getElementById('<%=gridview1.ClientID%>').style.display = 'none';
                }
                function endRequest(sender, e) {
                    //show gridview once the AJAX call has completed
                    document.getElementById('<%=gridview1.ClientID%>').style.display = 'block';
                }
        </script>
    

    I am guessing I missed something??

    Tuesday, June 30, 2015 7:12 AM