Nested Collapsible GridView inside UpdatePanel edit Problem

I have a nested gridview setup within an update panel. The nested gridview can be collapsed or expanded. Everything works fine with the grids when I don't have them in an update panel, but when I add the update panel the grid collapses once the edit button is selected. What I can I do to resolve.

  <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                        <ContentTemplate>
           <asp:GridView ID="GridView1" AllowPaging="True"
            AutoGenerateColumns=false DataSourceID="EntityDataSource1" DataKeyNames="RequestID"
 />
            <AlternatingRowStyle BackColor="White" />
            <HeaderStyle BackColor="#0083C1" ForeColor="White"/>
            <FooterStyle BackColor="White" />
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        
                    </ItemTemplate>
                </asp:TemplateField>
              
                <asp:TemplateField>
                    <ItemTemplate></ItemTemplate>
                    <EditItemTemplate>

                    </EditItemTemplate>
                   
                </asp:TemplateField>	    
			  <asp:TemplateField>
			        <ItemTemplate>
			            <tr>
                            <td colspan="100%">
                                <div id='div<%# Eval("RequestID") %>' style="display:none;position:relative;left:15px;OVERFLOW: auto;WIDTH:97%" >
                                    <asp:GridView ID="GridView2" AllowPaging="True" AllowSorting="true" BackColor="White" Width="100%" Font-Size="X-Small"
                                       >
                                        <RowStyle BackColor="Gainsboro" />
                                        <AlternatingRowStyle BackColor="White" />
                                        <HeaderStyle BackColor="#0083C1" ForeColor="White" />
                                        <FooterStyle BackColor="White" />
                                        <Columns>
                                            <asp:TemplateField HeaderText="Question ID" SortExpression="AskQuestionID">
                                                <ItemTemplate>
                                                   
                                                </ItemTemplate>
                                                <EditItemTemplate>

                                                </EditItemTemplate>

                                            </asp:TemplateField>
                                           
                                          
                                          
                                          
                                            <asp:TemplateField>
                                                <ItemTemplate>
                                                    <!--To fire the OnRowEditing event.-->
                                                    <asp:LinkButton ID="lbEdit" runat="server" CommandName="Edit"
                                                        Text="Edit">
                                                    </asp:LinkButton>
                                                    
                                                </ItemTemplate>
                                                <EditItemTemplate>
                                                    <!--To fire the OnRowDeleting event.-->
                                                    <asp:LinkButton ID="lbCancel" runat="server" CommandName="Cancel"
                                                        Text="Cancel">
                                                    </asp:LinkButton>
                                                    <!--To fire the OnRowUpdating event.-->
                                                    <asp:LinkButton ID="lbUpdate" runat="server" class="updatee" CommandName="Update"
                                                        Text="Update">
                                                    </asp:LinkButton>

                                                </EditItemTemplate>
                                            </asp:TemplateField>


                                        </Columns>
                                    </asp:GridView>
                                </div>
                             </td>
                        </tr>
			        </ItemTemplate>			       
			    </asp:TemplateField>			    
			</Columns>
        </asp:GridView> </ContentTemplate>
             </asp:UpdatePanel>

Open in new window


 <script language=javascript type="text/javascript">
     function expandcollapse(obj, row) {
         var div = document.getElementById(obj);
         var img = document.getElementById('img' + obj);

         if (div.style.display == "none") {
             div.style.display = "block";
             if (row == 'alt') {
                 img.src = "../images/minus.gif";
             }
             else {
                 img.src = "../images/minus.gif";
             }
             img.alt = "Close to view other Questions";
         }
         else {
             div.style.display = "none";
             if (row == 'alt') {
                 img.src = "../images/plus.gif";
             }
             else {
                 img.src = "../images/plus.gif";
             }
             img.alt = "Expand to show Orders";
         }
     } 
    </script>

Open in new window

NickMalloyAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Roopesh ReddyConnect With a Mentor IT AnalystCommented:
Hi,

Did you tried like this?

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
                        <ContentTemplate>
           <asp:GridView ID="GridView1" AllowPaging="True"
            AutoGenerateColumns=false DataSourceID="EntityDataSource1" DataKeyNames="RequestID"
 >
            <AlternatingRowStyle BackColor="White" />
            <HeaderStyle BackColor="#0083C1" ForeColor="White"/>
            <FooterStyle BackColor="White" />
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        
                    </ItemTemplate>
                </asp:TemplateField>
              
                <asp:TemplateField>
                    <ItemTemplate></ItemTemplate>
                    <EditItemTemplate>

                    </EditItemTemplate>
                   
                </asp:TemplateField>	    
			  <asp:TemplateField>
			        <ItemTemplate>
			            <tr>
                            <td colspan="100%">
                                <div id='div<%# Eval("RequestID") %>' style="display:none;position:relative;left:15px;OVERFLOW: auto;WIDTH:97%" >
                             <asp:UpdatePanel ID="UpdatePanel1"
                                 UpdateMode="Conditional"
                                 runat="server">
                    <ContentTemplate>

                                    <asp:GridView ID="GridView2" AllowPaging="True" AllowSorting="true" BackColor="White" Width="100%" Font-Size="X-Small"
                                       >
                                        <RowStyle BackColor="Gainsboro" />
                                        <AlternatingRowStyle BackColor="White" />
                                        <HeaderStyle BackColor="#0083C1" ForeColor="White" />
                                        <FooterStyle BackColor="White" />
                                        <Columns>
                                            <asp:TemplateField HeaderText="Question ID" SortExpression="AskQuestionID">
                                                <ItemTemplate>
                                                   
                                                </ItemTemplate>
                                                <EditItemTemplate>

                                                </EditItemTemplate>

                                            </asp:TemplateField>
                                           
                                          
                                          
                                          
                                            <asp:TemplateField>
                                                <ItemTemplate>
                                                    <!--To fire the OnRowEditing event.-->
                                                    <asp:LinkButton ID="lbEdit" runat="server" CommandName="Edit"
                                                        Text="Edit">
                                                    </asp:LinkButton>
                                                    
                                                </ItemTemplate>
                                                <EditItemTemplate>
                                                    <!--To fire the OnRowDeleting event.-->
                                                    <asp:LinkButton ID="lbCancel" runat="server" CommandName="Cancel"
                                                        Text="Cancel">
                                                    </asp:LinkButton>
                                                    <!--To fire the OnRowUpdating event.-->
                                                    <asp:LinkButton ID="lbUpdate" runat="server" class="updatee" CommandName="Update"
                                                        Text="Update">
                                                    </asp:LinkButton>

                                                </EditItemTemplate>
                                            </asp:TemplateField>


                                        </Columns>
                                    </asp:GridView>

</ContentTemplate>
                </asp:UpdatePanel>
                                </div>
                             </td>
                        </tr>
			        </ItemTemplate>			       
			    </asp:TemplateField>			    
			</Columns>
        </asp:GridView> </ContentTemplate>
             </asp:UpdatePanel>

Open in new window

0
 
Manoj PatilSr. Software EngineerCommented:
Just try this
Add below line in code behind  after grdProcesses.DataBind():
UpdatePanel2.Update;
0
 
Roopesh ReddyIT AnalystCommented:
Hi,

Where exactly you are calling the expandcollapse() JavaScript function!

The JavaScript function won't called while performing AJAX operations since, it's not registered with ScriptManager!

See the Ajax Client Life Cycle here - http://msdn.microsoft.com/en-us/library/bb386417(v=vs.100).aspx

Simple demo to understand the behaviour -

<asp:UpdatePanel runat="server">
        <ContentTemplate>
            <asp:Button Text="AJAX Button" runat="server" OnClick="button_click" />
        </ContentTemplate>
    </asp:UpdatePanel>

    <script type="text/javascript">
        alert("Normal PageLoad");

        //pageLoad is the function which will be called on AJAX request
        function pageLoad() {
            alert("PageLoad called on every AJAX request!!!");
        }
    </script>

Open in new window


Try the above code and see the result! You will understand!

Hope it helps u...
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
NickMalloyAuthor Commented:
the only place expandcollapse is called is within the gridView1. Not the nested Gridview which is the one I am clicking edit on. I added UpdatePanel2.Update but that didn't solve anything.

<asp:TemplateField>
                    <ItemTemplate>
                        <a href="javascript:expandcollapse('div<%# Eval("RequestID") %>', 'one');">
                            <img id='imgdiv<%# Eval("RequestID") %>' alt="Click to show/hide Orders for Customer <%# Eval("RequestID") %>"  width="9px" border="0" src="../images/plus.gif"/>
                        </a>
                    </ItemTemplate>
                </asp:TemplateField>

Open in new window

0
 
NickMalloyAuthor Commented:
Let me clarify that the javascript runs from within the updatepanel. but the style seems to get reset once the edit button on the nested grid gets fired. It should keep the nested grid expanded.
0
 
Roopesh ReddyIT AnalystCommented:
Hi,

Yeah! When you load the page, the nested GridView expanded or Collapsed!

If it's Collapsed, it's getting reset!

Hope it helps u...
0
 
NickMalloyAuthor Commented:
yes it is collapsed. I understand it is getting reset. Is there anyway to prevent that. When the grids are not in an update panel it doesn't get reset.
0
 
Roopesh ReddyIT AnalystCommented:
Hi,

Try nesting the UpdatePanel to the inner GridView and set UpdateMode Property to Conditional!

For inner GridView -

 <asp:UpdatePanel ID="UpdatePanel1"
                                 UpdateMode="Conditional"
                                 runat="server">
                    <ContentTemplate>

                       <asp:GridView ID="GridView2" >
                          //.....
                        </asp:GridView>
  </ContentTemplate>
                </asp:UpdatePanel>

Open in new window


Hope it helps u...
0
 
NickMalloyAuthor Commented:
When I click edit now the whole page refreshes and the browser goes to the top of the page.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.