UpdateProgress Panel and GridView

[snufse]

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.

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

[avrail]

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

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

[snufse]

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?

[avrail]

when you build the application is there is any errors?

[avrail]

could you show me the code for DropDownList1_SelectedIndexChanged

[snufse]

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:

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

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

[avrail]

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

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

[snufse]

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.

[avrail]

your problem in the style you used

[snufse]

OK, can you tell me which style and where?

[avrail]

ok,
move your UpdateProgress and add it under the DropDownList

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

[snufse]

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).

[avrail]

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

GridView1.Viable = False

and at the end add this line

GridView1.Viable = True

and tell me if this made the trick

[snufse]

Yes, I tried this earlier:

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

No luck either

[avrail]

who write this styles for you ?

[snufse]

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

[avrail]

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

[snufse]

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/

[snufse]

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.

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

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