UpdateProgress Panel and GridView

I'm using Update Progress and when I click in the DropDownList, the progress controls shows up till GridView is filled. So far good. Now, if I do another selection in the DropDownList the GridView stays on the screen as the progress control is beings shown.

How can I prevent the GridView being shown till a new binding taken place? Thank you.

Code:

---

<cc1:TabContainer ID="TabContainer1" runat="server" Height="20px" ActiveTabIndex="0">
                    <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Current Shift" Style="font-size: xxx-small"
                        BackColor="AliceBlue">
                        <HeaderTemplate>
                            Current Shifts
                        </HeaderTemplate>
                        <ContentTemplate>
                            <br />
                            <div style="height: 30px; left: 4px; top: 30px; width: 516px; position: absolute;
                                background-color: #ffffcc; z-index: 102;">
                                <asp:Label ID="Label1" runat="server" Style="top: 6px; left: 7px; position: absolute;
                                    z-index: 100;" CssClass="labellayout" Text="Plant:" />
                                <asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="True" CssClass="dropdownlistlayout"
                                    Style="width: 140px; top: 5px; left: 37px; position: absolute; z-index: 101;"
                                    OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged">
                                </asp:DropDownList>
                                <asp:Button ID="Button4" runat="server" CssClass="buttonlayout" Style="left: 476px;
                                    top: 6px;" Text="Export" Width="36px" />
                            </div>
                            <asp:Panel ID="Panel4" runat="server" CssClass="panellayout" Style="top: 60px; height: 201px;
                                width: 518px; left: 2px;" BorderColor="Transparent">
                                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="TabContainer1$TabPanel1$DropDownList3" EventName="SelectedIndexChanged" />
                                    </Triggers>
                                    <ContentTemplate>
                                        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                                            <ProgressTemplate>
                                                <br />
                                                <asp:Image ID="Image1" runat="server" ImageUrl="Icons/ajax-loader.gif" />
                                                <asp:Label ID="Label1" runat="server" CssClass="labellayout1" Text="Loading data...."></asp:Label>
                                            </ProgressTemplate>
                                        </asp:UpdateProgress>
                                        <asp:GridView ID="GridView2" runat="server" CssClass="gridviewlayout1" Style="overflow: hidden;
                                            clip: rect(auto auto auto auto); left: 3px; position: absolute; top: 5px" Width="512px"
                                            AllowPaging="True" AllowSorting="True" Font-Size="X-Small" AutoGenerateColumns="False"
                                            CellSpacing="2" HorizontalAlign="Left" BorderColor="LightGray" BorderStyle="None"
                                            PageSize="6" EmptyDataText="No Records Found" Height="19px" ShowFooter="True">
                                            <Columns>
                                                <asp:BoundField DataField="plant_id" HeaderText="Plant" SortExpression="plant_id">
                                                    <ItemStyle Width="25px" HorizontalAlign="Left" />
                                                </asp:BoundField>
                                                <asp:BoundField DataField="plant_name" HeaderText="Plant Name" SortExpression="plant_name">
                                                    <ItemStyle Width="100px" HorizontalAlign="Left" />
                                                </asp:BoundField>
                                                <asp:BoundField DataField="shift_date" HeaderText="Shift Date" SortExpression="shift_date">
                                                    <ItemStyle Width="100px" HorizontalAlign="Left" />
                                                    <FooterStyle HorizontalAlign="Right" Width="40px" />
                                                </asp:BoundField>
                                                <asp:BoundField DataField="outside_qty" HeaderText="Outside Qty" DataFormatString="{0:#,0.00}">
                                                    <ItemStyle Width="45px" HorizontalAlign="Right" />
                                                    <FooterStyle HorizontalAlign="Right" Width="40px" />
                                                </asp:BoundField>
                                                <asp:BoundField DataField="intercompany_qty" HeaderText="Intercomp Qty" DataFormatString="{0:#,0.00}">
                                                    <ItemStyle Width="45px" HorizontalAlign="Right" />
                                                    <FooterStyle HorizontalAlign="Right" Width="40px" />
                                                </asp:BoundField>
                                            </Columns>
                                            <HeaderStyle BackColor="#FFC080" Height="25px" />
                                            <AlternatingRowStyle BackColor="#FFFFCC" />
                                            <RowStyle Height="20px" />
                                            <PagerStyle BackColor="#E0E0E0" />
                                            <EmptyDataRowStyle ForeColor="ActiveCaption" />
                                            <FooterStyle BackColor="#FF8080" Height="20px" HorizontalAlign="Right" />
                                        </asp:GridView>
                                    </ContentTemplate>
                                </asp:UpdatePanel>
                            </asp:Panel>
                        </ContentTemplate>
                    </cc1:TabPanel>

---

hay snufse ,
here is a sample, and this is working one
if you still facing a problem please let me know

Code:

---

<form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="TabContainer1$TabPanel1$DropDownList1" EventName="SelectedIndexChanged" />
            </Triggers>
            <ContentTemplate>
                <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
                    <asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
                        <ContentTemplate>
                            <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                            </asp:DropDownList>
                            <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                                <ProgressTemplate>
                                    <asp:Image ID="Image1" runat="server" ImageUrl="Pics/Send.gif" />
                                </ProgressTemplate>
                            </asp:UpdateProgress>
                            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                                <Columns>
                                    <asp:BoundField DataField="ID_DEPARTMENT" />
                                    <asp:BoundField DataField="DEPARTMENT" />
                                </Columns>
                            </asp:GridView>
                        </ContentTemplate>
                    </asp:TabPanel>
                </asp:TabContainer>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>

---

I have moved the location of the UpdatePanel around and that did not solve the problem. I think the location of the UpdateProgress is in the right place.

Is there any other way of "hiding" the gridview when a "selectedindexchanged" event happens?

when you build the application is there is any errors?

could you show me the code for DropDownList1_SelectedIndexChanged

There are no errors. The application shows the udateprogress every time I do a select from the drop down list. If there is already a gridview displayed (ie when I do select from dropdownlist 2nd or 3rd time) then both gridview and progress controls are dispalyed at same time while a new gridview is being loaded.

Code:

Code:

---

Protected Sub DropDownList3_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList3.SelectedIndexChanged

        If DropDownList3.SelectedValue = " " Then
            pnlModal_ModalPopupExtender.Show()
            Exit Sub
        End If

        Get_Summary_Current_Active_Shift()

    End Sub

---

Code:

---

Private Sub Get_Summary_Current_Active_Shift()

        Form.Disabled = True

        Try
            Dim mySqlDataTable2 As New Data.DataTable
            mySqlCommand.Connection = mySqlConnection
            mySqlCommand.CommandTimeout = 180
            mySqlConnection.Open()

            If DropDownList3.SelectedValue = "*All" Or DropDownList3.SelectedValue = " " Then
                mySqlCommand.Parameters.Add(New Data.SqlClient.SqlParameter("@PlantName", Data.SqlDbType.Char)).Value = "*All"
            Else
                mySqlCommand.Parameters.Add(New Data.SqlClient.SqlParameter("@PlantName", Data.SqlDbType.Char)).Value = DropDownList3.SelectedValue.Substring(0, DropDownList3.SelectedValue.IndexOf(" "))
            End If

            mySqlCommand.CommandType = Data.CommandType.StoredProcedure
            mySqlCommand.CommandText = ("sp_ADS_get_summary_current_active_shift_by_plant")
            mySqlCommand.Connection = mySqlConnection
            mySqlDataAdapter.SelectCommand = mySqlCommand
            mySqlDataAdapter.SelectCommand.CommandTimeout = 300
            mySqlDataAdapter.Fill(mySqlDataTable2)
            Session("mySqlDataTable2") = mySqlDataTable2

            GridView2.DataSource = mySqlDataTable2
            GridView2.DataBind()
            GridView2.Visible = True

            Button4.Visible = True

            Panel4.Attributes.Add("ScrollBars", "Horizontal")
            Panel4.Style.Add("overflow", "scroll")

        Catch ex As Exception
            Dim message As String
            message = ex.ToString
            Dim mystr As String
            mystr = message
            'ASPNET_MsgBox("An error has occurred connection to server: " + ex.ToString)
        Finally
            mySqlCommand.Parameters.Clear()
            mySqlConnection.Close()
        End Try

        Form.Disabled = False

    End Sub

---

ok,
now you need to add this line
System.Threading.Thread.Sleep(2000)

Code:

---

Protected Sub DropDownList3_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList3.SelectedIndexChanged
System.Threading.Thread.Sleep(2000)
        If DropDownList3.SelectedValue = " " Then
            pnlModal_ModalPopupExtender.Show()
            Exit Sub
        End If

        Get_Summary_Current_Active_Shift()

    End Sub

---

When I do this same thing happens and it only increases response time.

I have attached a screen shot (in word). Look at the pane upper left and maybe you can see that "Loading data...." bleeds through the gridview from my 1st time I select.

your problem in the style you used

OK, can you tell me which style and where?

ok,
move your UpdateProgress and add it under the DropDownList

Code:

---

<asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="True" CssClass="dropdownlistlayout"
                                    Style="width: 140px; top: 5px; left: 37px; position: absolute; z-index: 101;"
                                    OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged">
                                </asp:DropDownList>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
                                            <ProgressTemplate>
                                                <br />
                                                <asp:Image ID="Image1" runat="server" ImageUrl="Icons/ajax-loader.gif" />
                                                <asp:Label ID="Label1" runat="server" CssClass="labellayout1" Text="Loading data...."></asp:Label>
                                            </ProgressTemplate>
                                        </asp:UpdateProgress>

---

So I did. At 1st time select I see the progress control like it should be. It disappears when the grid view is displayed. When I do another select I see part of the progress controls but mostly hidden behind the gridview already displayed (from my 1st select).

ok,
now your problem become the GridView Style, and i'm not pretty good in such a thing,
but i think we can make a simple work around.

inside the SelectedIndexChanged add this at the first line

Code:

---

GridView1.Viable = False

---

and at the end add this line

Code:

---

GridView1.Viable = True

---

and tell me if this made the trick

Yes, I tried this earlier:

Code:

---

GridView2.DataSource = Nothing
 GridView2.DataBind()
 GridView2.Visible = False

---

No luck either

who write this styles for you ?

For the above, I did for testing purposes. Is this what you mean?

yes, because it looks like the problem in the layout only of the controls

I think the solution is to write some java script to hide the gridview when updateprogress is active and vice versa.

Hoswever, I do not know how to do that.

http://dotnet.itags.org/dotnet-ajax/24944/

I've been trying to put together a script for "hiding" the GridView when UpdateProgress is being shown. Not sure if I have it right.

On "SelectedIndexChanged" in DropDownlist3 I am trying call to a JS function that will hide GridView2.

Code:

---

<script type="text/javascript">
            function HideGridView2()
{
          document.getElementById("GridView2").style.display='none';
 }
 </script>

---

Code:

---

<cc1:TabContainer ID="TabContainer1" runat="server" Height="20px" ActiveTabIndex="0">
                    <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Current Shift" Style="font-size: xxx-small"
                        BackColor="AliceBlue">
                        <HeaderTemplate>
                            Current Shifts
                        </HeaderTemplate>
                        <ContentTemplate>
                            <br />
                            <div style="height: 30px; left: 4px; top: 30px; width: 516px; position: absolute;
                                background-color: #ffffcc; z-index: 102;">
                                <asp:Label ID="Label1" runat="server" Style="top: 6px; left: 7px; position: absolute;
                                    z-index: 100;" CssClass="labellayout" Text="Plant:" />
                                <asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="True" CssClass="dropdownlistlayout"
                                    Style="width: 140px; top: 5px; left: 37px; position: absolute; z-index: 101;"
                                    OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged" OnClientSelectedIndexChanged = "HideGridView2()">
                                </asp:DropDownList>
                                <asp:Button ID="Button4" runat="server" CssClass="buttonlayout" Style="left: 476px;
                                    top: 6px;" Text="Export" Width="36px" />
                            </div>
                            <asp:Panel ID="Panel4" runat="server" CssClass="panellayout" Style="top: 60px; height: 201px;
                                width: 518px; left: 2px;" BorderColor="Transparent">
                                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="TabContainer1$TabPanel1$DropDownList3" EventName="SelectedIndexChanged" />
                                    </Triggers>
                                    <ContentTemplate>
                                        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                                            <ProgressTemplate>
                                                <br />
                                                <asp:Image ID="Image1" runat="server" ImageUrl="Icons/ajax-loader.gif" />
                                                <asp:Label ID="Label1" runat="server" CssClass="labellayout1" Text="Loading data...."></asp:Label>
                                            </ProgressTemplate>
                                        </asp:UpdateProgress>
                                        <asp:GridView ID="GridView2" runat="server" CssClass="gridviewlayout1" Style="overflow: hidden;
                                            clip: rect(auto auto auto auto); left: 3px; position: absolute; top: 5px" Width="512px"
                                            AllowPaging="True" AllowSorting="True" Font-Size="X-Small" AutoGenerateColumns="False"
                                            CellSpacing="2" HorizontalAlign="Left" BorderColor="LightGray" BorderStyle="None"
                                            PageSize="6" EmptyDataText="No Records Found" Height="19px" ShowFooter="True">
                                            <Columns>

---