locked
UpdatePanel problem with GridView Select RRS feed

  • Question

  • User1541849693 posted

    Hi folks,

    I've tried to use the GridView inside the UpdatePanel2. When I do the file upload and save them in the database, the GridView is updated without refresh. That's Ok! But the Select column is not working.  Someone can help me? The code is down.

    Thank's in advance!

    Bye for now.

    Dirceu Nascimento

    <body>
        <form id="form1" runat="server">
        <div>
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <asp:Button ID="btnUpload" runat="server"
                Text="Upload File"/>
                
    <asp:ModalPopupExtender runat="server"
                            ID="modelPopupExtender1"
                            TargetControlID="btnUpload"
                            PopupControlID="popUpPanel"
                            OkControlID="btOK"
                            BackgroundCssClass="modalBackground">
    </asp:ModalPopupExtender>
    
     <asp:Panel ID="popUpPanel" runat="server" CssClass="pnl">
     <div style="font-weight: bold; border: Solid 3px Aqua;
                                    background-color: AliceBlue">
     
     <asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server"
                         OnUploadComplete="UploadComplete"  
                         OnClientUploadComplete="Success"
                         ThrobberID="loader" Width="400px"/>
     <asp:Image ID="loader" runat="server"
                ImageUrl ="~/loading.gif"
                Style="display:None"/>
     </div><br /><br />
     <asp:Label ID="lblMessage" runat="server"/><br /><br />
     <asp:Button ID="btOK" runat="server" Text="OK" />
     <asp:LinkButton ID="LinkButton1" runat="server" CssClass="close"
     OnClientClick="$find('modelPopupExtender1').hide(); return false;"/>
    </asp:Panel>
        &nbsp;
        <br />
        <br />
        Descricao:
        <asp:TextBox ID="TxtDescricao" runat="server" Width="288px"></asp:TextBox>
        <br />
        <br />
        Departamento:&nbsp;Departamento:&nbsp;<asp:DropDownList ID="DrpSetor" runat="server"
            AutoPostBack="True" DataSourceID="SqlDataSource1" DataTextField="Departamento"
            DataValueField="Id">
        </asp:DropDownList>
        &nbsp;&nbsp; Tipo:&nbsp;&nbsp;&nbsp; Tipo:&nbsp;<asp:DropDownList ID="DrpTipo" runat="server"
            AutoPostBack="True" DataSourceID="SqlDataSource2" DataTextField="Tipo"
            DataValueField="Id">
        </asp:DropDownList>
        &nbsp; Processo:
        <asp:TextBox ID="TxtProcesso" runat="server"></asp:TextBox>
        <br />
        <br />
        Emissao:
        <asp:TextBox ID="TxtEmissao" runat="server"></asp:TextBox>
        &nbsp;&nbsp;&nbsp;&nbsp; Validade:
        <asp:TextBox ID="TxtValidade" runat="server"></asp:TextBox>
        &nbsp;&nbsp;&nbsp;
        <asp:CheckBox ID="CBem_dia" runat="server" Text="Em dia" />
        &nbsp;
        <asp:CheckBox ID="CBem_atraso" runat="server" Text="Em atraso" />
        &nbsp;&nbsp;
        <asp:Button ID="BtnGravarBD" runat="server" onclick="BtnGravarBD_Click"
            Text="Gravar BD" />
        <br />
        <br />
        
        <asp:Label ID="LblMensagem" runat="server" Text=""></asp:Label>
    </ContentTemplate>
    </asp:UpdatePanel>
            <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" EnableViewState="true" runat="server">
            <ContentTemplate>
             <br />Lista de Documentos
        <asp:GridView ID="GridView1" runat="server" AllowSorting="True" AllowPaging="true"
            AutoGenerateColumns="False" CellPadding="4" DataKeyNames="Id"
            DataSourceID="SqlDocumentos" ForeColor="#333333" GridLines="None"
            onselectedindexchanged="GridView1_SelectedIndexChanged" PageSize="7">
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <Columns>
                <asp:CommandField ShowSelectButton="True" />
                <asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False"
                    ReadOnly="True" SortExpression="Id" />
                <asp:BoundField DataField="Descricao" HeaderText="Descricao"
                    SortExpression="Descricao" />
                <asp:BoundField DataField="Tipo" HeaderText="Tipo" SortExpression="Tipo" />
                <asp:BoundField DataField="NomeArquivo" HeaderText="NomeArquivo"
                    SortExpression="NomeArquivo" />
            </Columns>
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#999999" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        </asp:GridView>
            </ContentTemplate>
            </asp:UpdatePanel>  
        </div>
       
        <br />
    </body>
    
    



    Saturday, March 29, 2014 10:52 PM

Answers

  • User-227760790 posted

    When you use UpdatePanel control, you can ToolkitScriptManager  or ScriptManager. they will work.

    Now i think that your issue is related to other control, not just gridview,

    Let's discuss result with various combinations:

    1. UpdateMode Always and ChildrenAsTrigger True : Contents will be refreshed on every full and partial Postback.
    2. UpdateMode Always and ChildrenAsTrigger True : Exception: ChildrenAsTriggers cannot be set to false when UpdateMode is set to Always on UpdatePanel.
    3. UpdateMode Conditional and ChildrenAsTrigger True : Contents will be refreshed:
      • On every full Postback
      • On Partial Postback caused by controls inside the same UpdatePanel.  
    4. UpdateMode Conditional and ChildrenAsTrigger False : Contents will be refreshed only on full Postback. Triggers : A Collection of AsyncPostBackTrigger and PostBackTrigger
      • AsyncPostBackTrigger : This property will take the two arguments Id of the control and an optional event and used when we want to refresh the UpdatePanel:
        1. on an event occurred by control present outside the UpdatePanel.
        2. on an event occurred by control present inside the UpdatPanel when the ChildrenAsTrigger is set to false.
        3. on an event occurred by control present inside the nested UpdatePanel.
         
      • PostBackTrigger : Every control inside the UpdatePanel causes asynchronous PostBacks by default. But by using this property we can enable that control to cause a Postback instead of performing an asynchronous Postback.
      Update method : If at some point of time we want to explicitly refresh the UpdatePanel content, we can use this method.

    Example Click here to Download the example to better understand the working of the update panel. Example .png

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 3, 2014 3:43 AM

All replies

  • User1208776063 posted

    But the Select column is not working.

    Are you refreshing content of a different update panel when Select column is clicked? If so, you need to add trigger for the update panel that needs to be refreshed on postbacks. Post SelectedIndexChanged handler logic.

    Sunday, March 30, 2014 8:26 AM
  • User1541849693 posted

    Are you refreshing content of a different update panel when Select column is clicked?

    No. I want that the refreshed UpdatePanel, with de GridView, enable the GridView Select.  Strange that the Paging is working but the Select no.

    Sunday, March 30, 2014 11:57 AM
  • User1208776063 posted

    I want that the refreshed UpdatePanel, with de GridView, enable the GridView Select.

    Do not set UpdateMode for the update panel containing GridView.

     <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional"

    Sunday, March 30, 2014 8:12 PM
  • User1541849693 posted

     <asp:UpdatePanel ID="UpdatePanel2"
    UpdateMode="Conditional"

    Hi, yet is not working.  I've put the trigger as follows:

         </ContentTemplate>
            <Triggers> <asp:AsyncPostBackTrigger ControlID="GridView1" EventName="SelectedIndexChanged" /> </Triggers>
            </asp:UpdatePanel>  

    and I've put the code behind:

    protected void Page_Load(object sender, EventArgs e)
        {
            ToolkitScriptManager1.RegisterAsyncPostBackControl(GridView1);
        }

    Is it ok?

    I am using Microsoft Visual Web Developer 2008 Express Edition for your information.

    Bye for now.

    Sunday, March 30, 2014 8:47 PM
  • User-933407369 posted

    Based on your description, i understand that you want to trigger the GridView1_SelectedIndexChanged event. you have to trigger a selected button click or javascript click postback.

    Why not using the 'AutoGenerateSelectButton="true"',

     <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
             <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" EnableViewState="true" runat="server">
            <ContentTemplate>
             <br />Lista de Documentos
                <asp:GridView ID="GridView1" runat="server" AllowSorting="True" AllowPaging="true"
            AutoGenerateColumns="False" CellPadding="4" DataKeyNames="CategoryID" AutoGenerateSelectButton="true"
            DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None"
            onselectedindexchanged="GridView1_SelectedIndexChanged" PageSize="7">
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
              <Columns>
                    <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" InsertVisible="False" ReadOnly="True" SortExpression="CategoryID" />
                    <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" />
                    <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
                </Columns>
                <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#999999" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" DeleteCommand="DELETE FROM [Categories] WHERE [CategoryID] = @CategoryID" InsertCommand="INSERT INTO [Categories] ([CategoryName], [Description], [Picture]) VALUES (@CategoryName, @Description, @Picture)" SelectCommand="SELECT * FROM [Categories]" UpdateCommand="UPDATE [Categories] SET [CategoryName] = @CategoryName, [Description] = @Description, [Picture] = @Picture WHERE [CategoryID] = @CategoryID">
                <DeleteParameters>
                    <asp:Parameter Name="CategoryID" Type="Int32" />
                </DeleteParameters>
                <InsertParameters>
                    <asp:Parameter Name="CategoryName" Type="String" />
                    <asp:Parameter Name="Description" Type="String" />
                    <asp:Parameter Name="Picture" Type="Object" />
                </InsertParameters>
                <UpdateParameters>
                    <asp:Parameter Name="CategoryName" Type="String" />
                    <asp:Parameter Name="Description" Type="String" />
                    <asp:Parameter Name="Picture" Type="Object" />
                    <asp:Parameter Name="CategoryID" Type="Int32" />
                </UpdateParameters>
            </asp:SqlDataSource>
                </ContentTemplate>
                 </asp:UpdatePanel>
        </div>

    it is working for me , i hope it helps you.

    Tuesday, April 1, 2014 2:45 AM
  • User1541849693 posted

    Hi,

    Thanks for replying.  I've tried your sugestion but it don't work.  

    I am using Ajax Control Kit version 3.5.60501.0  ...  and not ScriptManager but ToolkitScriptManager...

    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" EnablePartialRendering="true" runat="server"/>
    
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>....

    Wednesday, April 2, 2014 10:07 PM
  • User-227760790 posted

    When you use UpdatePanel control, you can ToolkitScriptManager  or ScriptManager. they will work.

    Now i think that your issue is related to other control, not just gridview,

    Let's discuss result with various combinations:

    1. UpdateMode Always and ChildrenAsTrigger True : Contents will be refreshed on every full and partial Postback.
    2. UpdateMode Always and ChildrenAsTrigger True : Exception: ChildrenAsTriggers cannot be set to false when UpdateMode is set to Always on UpdatePanel.
    3. UpdateMode Conditional and ChildrenAsTrigger True : Contents will be refreshed:
      • On every full Postback
      • On Partial Postback caused by controls inside the same UpdatePanel.  
    4. UpdateMode Conditional and ChildrenAsTrigger False : Contents will be refreshed only on full Postback. Triggers : A Collection of AsyncPostBackTrigger and PostBackTrigger
      • AsyncPostBackTrigger : This property will take the two arguments Id of the control and an optional event and used when we want to refresh the UpdatePanel:
        1. on an event occurred by control present outside the UpdatePanel.
        2. on an event occurred by control present inside the UpdatPanel when the ChildrenAsTrigger is set to false.
        3. on an event occurred by control present inside the nested UpdatePanel.
         
      • PostBackTrigger : Every control inside the UpdatePanel causes asynchronous PostBacks by default. But by using this property we can enable that control to cause a Postback instead of performing an asynchronous Postback.
      Update method : If at some point of time we want to explicitly refresh the UpdatePanel content, we can use this method.

    Example Click here to Download the example to better understand the working of the update panel. Example .png

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 3, 2014 3:43 AM
  • User1541849693 posted

    Hi, 

    Thanks for your didatic example. I've tested it and it cleared my mind. Very good example!! Congratulations!! 

    Now I am analising my trouble with this new light. 

    Bye for now!! :)

    Friday, April 4, 2014 3:59 PM
  • User1541849693 posted

    Hi friend,

    I've made some changes with this new light and.... IT WORKS!!! I've learned a lot.  Many many thanks.
    Here you have the modified code as follows:

    <body>
    <div> .... </div>
    <asp:Panel ID="popUpPanel" runat="server" CssClass="pnl">
     <div style="font-weight: bold; border: Solid 3px Aqua; 
                                    background-color: AliceBlue">
     
     <asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server" 
                         OnUploadComplete="UploadComplete"  
                         OnClientUploadComplete="Success" 
                         ThrobberID="loader" Width="400px"/>
     <asp:Image ID="loader" runat="server" 
                ImageUrl ="loading.gif" 
                Style="display:None"/>
     </div><br /><br />
     <asp:Label ID="lblMessage" runat="server"/><br /><br />
     <asp:Button ID="btOK" runat="server" Text="OK" />
     <asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" 
     OnClientClick="$find('modelPopupExtender1').hide(); return false;"/>
    </asp:Panel>
        &nbsp;
        <br />
        <br />
        Descri&ccedil;&atilde;o:
        <asp:TextBox ID="TxtDescricao" runat="server" Width="288px"></asp:TextBox>
        <br />
        <br />
        Departamento:&nbsp;<asp:DropDownList ID="DrpSetor" runat="server" 
            AutoPostBack="True" DataSourceID="SqlDataSource1" DataTextField="Departamento" 
            DataValueField="Id">
        </asp:DropDownList>
        &nbsp;&nbsp; Tipo:&nbsp;<asp:DropDownList ID="DrpTipo" runat="server" 
            AutoPostBack="True" DataSourceID="SqlDataSource2" DataTextField="Tipo" 
            DataValueField="Id">
        </asp:DropDownList>
        &nbsp; Processo:
        <asp:TextBox ID="TxtProcesso" runat="server"></asp:TextBox>
        <br />
        <br />
        Emiss&atilde;o:
        <asp:TextBox ID="TxtEmissao" runat="server"></asp:TextBox>
        &nbsp;&nbsp;&nbsp;&nbsp; Validade:
        <asp:TextBox ID="TxtValidade" runat="server"></asp:TextBox>
        &nbsp;&nbsp;&nbsp;
        <asp:CheckBox ID="CBem_dia" runat="server" Text="Em dia" />
        &nbsp;
        <asp:CheckBox ID="CBem_atraso" runat="server" Text="Em atraso" />
        &nbsp;&nbsp;
        <asp:Button ID="btnUpload" runat="server" 
                Text="Anexar Doc"/>&nbsp;&nbsp;
        <asp:Button ID="BtnGravarBD" runat="server" onclick="BtnGravarBD_Click" 
            Text="Gravar BD" />
        <br />
        <br />
        <div class="mensagem">
        <asp:Label ID="LblMensagem" runat="server" Text=""></asp:Label>
        </div>
        
    </ContentTemplate>
    </asp:UpdatePanel>
            <asp:UpdatePanel ID="UpdatePanel2" ChildrenAsTriggers="true" runat="server">
            <ContentTemplate>
             <br />Lista de Documentos
        <asp:GridView ID="GridView1" runat="server" AllowSorting="True" AllowPaging="True" 
            AutoGenerateColumns="False" CellPadding="4" DataKeyNames="Id" 
            DataSourceID="SqlDocumentos" ForeColor="#333333" GridLines="None" 
            onselectedindexchanged="GridView1_SelectedIndexChanged" PageSize="7" 
                    CellSpacing="5">
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <Columns>
                <asp:CommandField ShowSelectButton="True" />
                <asp:BoundField DataField="Id" HeaderText="Id" 
                    ReadOnly="True" SortExpression="Id" />
                <asp:BoundField DataField="Descricao" HeaderText="Descricao" 
                    SortExpression="Descricao" />
                <asp:BoundField DataField="NomeArquivo" HeaderText="NomeArquivo" 
                    SortExpression="NomeArquivo" />
                <asp:BoundField DataField="Tipo" HeaderText="Tipo" 
                    SortExpression="Tipo" />
                <asp:BoundField DataField="Departamento" HeaderText="Departamento" 
                    SortExpression="Departamento" />
                <asp:BoundField DataField="Emissao" DataFormatString="{0:d}" 
                    HeaderText="Emissao" SortExpression="Emissao" />
                <asp:BoundField DataField="Validade" DataFormatString="{0:d}" 
                    HeaderText="Validade" SortExpression="Validade" />
                <asp:BoundField DataField="DtSubida" HeaderText="DtSubida" 
                    SortExpression="DtSubida" />
                <asp:BoundField DataField="UsuSubida" HeaderText="UsuSubida" 
                    SortExpression="UsuSubida" />
                <asp:CheckBoxField DataField="EmAtraso" HeaderText="EmAtraso" 
                    SortExpression="EmAtraso" />
                <asp:CheckBoxField DataField="EmDia" HeaderText="EmDia" 
                    SortExpression="EmDia" />
            </Columns>
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#999999" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        </asp:GridView>
        
            </ContentTemplate>
            <Triggers> 
            <asp:PostBackTrigger ControlID="GridView1"  /> 
            <asp:AsyncPostBackTrigger ControlID="BtnGravarBD" EventName="Click" />
            </Triggers>
            
            
            </asp:UpdatePanel>  
    </div>
       
       
        
    </body>

    Enjoy!!!  Bye for now!

    Saturday, April 5, 2014 4:05 PM