?
Solved

Nested Collapsible GridView inside UpdatePanel edit Problem

Posted on 2013-01-11
9
Medium Priority
?
2,656 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
  • 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
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!

 

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
Is your OST file inaccessible, Need to transfer OST file from one computer to another? Want to convert OST file to PST? If the answer to any of the above question is yes, then look no further. With the help of Stellar OST to PST Converter, you can e…
Kernel Data Recovery is a renowned Data Recovery solution provider which offers wide range of softwares for both enterprise and home users with its cost-effective solutions. Let's have a quick overview of the journey and data recovery tools range he…
Suggested Courses

621 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