Update Progress Control

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>
   

Answer 1

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);
    }

Answer 2

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??