?
Solved

Nested Collapsible GridView inside UpdatePanel edit Problem

Posted on 2013-01-11
9
Medium Priority
?
2,485 Views
Last Modified: 2013-02-08
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

0
Comment
Question by:NickMalloy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
9 Comments
 
LVL 19

Expert Comment

by:Manoj Patil
ID: 38769856
Just try this
Add below line in code behind  after grdProcesses.DataBind():
UpdatePanel2.Update;
0
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38771365
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
 

Author Comment

by:NickMalloy
ID: 38774466
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:NickMalloy
ID: 38774888
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
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38774929
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
 

Author Comment

by:NickMalloy
ID: 38775037
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
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38775264
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
 

Author Comment

by:NickMalloy
ID: 38775700
When I click edit now the whole page refreshes and the browser goes to the top of the page.
0
 
LVL 23

Accepted Solution

by:
Roopesh Reddy earned 1760 total points
ID: 38783132
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

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
NetCrunch network monitor is a highly extensive platform for network monitoring and alert generation. In this video you'll see a live demo of NetCrunch with most notable features explained in a walk-through manner. You'll also get to know the philos…
In this video, Percona Solution Engineer Rick Golba discuss how (and why) you implement high availability in a database environment. To discuss how Percona Consulting can help with your design and architecture needs for your database and infrastr…
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question