Solved

Nested Collapsible GridView inside UpdatePanel edit Problem

Posted on 2013-01-11
9
2,241 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

860 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