Solved

Nested Collapsible GridView inside UpdatePanel edit Problem

Posted on 2013-01-11
9
2,293 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …
Finding and deleting duplicate (picture) files can be a time consuming task. My wife and I, our three kids and their families all share one dilemma: Managing our pictures. Between desktops, laptops, phones, tablets, and cameras; over the last decade…

726 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