Solved

How do I on rowcommand of gridview hide the panel the gridview is in?

Posted on 2009-07-06
4
1,218 Views
Last Modified: 2012-06-27
I have an aspx page - visual basic.  Below is a simplified version of the code.  
The page comes up in "Add" mode - the form is defaulted to insert, and the gridview is displayed showing the recent items.  Template fields in the gridview enable showdetails, delete, close, and edit.  

Clicking Edit uses the gridview rowcommand to bind the form to the selected ID, change the mode to edit, and refresh the updatepanel  containing the form.  Updating returns to insert mode, gridview is refreshed on page_prerender.  Works great.

However, I would like the panel displaying the recent notes in the gridviwe to hide when the page is in edit mode.  So clicking on the edit in the gridview would use the rowcommand to change to edit mode and hide the panel the gridview is in.  After the record is updated (or canceled) the page returns to insert mode and the panel containing the gridview is visible again.

I've tried many many approaches and cannot find the correct one.  The most recent approach is to use a collapsible panel extender  on the panel containing the gridview and set the collapsed and clientstates to true when changing to edit mode.  However, I cannot get it to work.  Anywhere I have tried to put the collapse code it does nothing unless I just stick it in a button outside the panel - which is not automated.  How can I make this work?  

Thanks!
Full Code
 
                    <%'**** ADD EDIT FORM PANEL ***%>                                             
                    <asp:UpdatePanel ID="UpdatePnlAddEdit" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <asp:SqlDataSource ID="SqlNotes" ...                                                                                                <EditItemTemplate>
                                    <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
                                        Text="Update">
                                    </asp:LinkButton>
                                    <asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
                                        Text="Cancel">
                                </EditItemTemplate>
                            </asp:FormView>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                    <%'**** END ADD EDIT FORM PANEL ***%>                                             
 
 
~~~~I want this entire panel to hide when the edit button is clicked (form goes into edit mode) and show when the page returns to insert mode - onupdate or cancel of the form ~~~~~~~~
 
<asp:Panel ID="PanelNotes" runat="server">
                    <span class="subheading2" id="NotesHeader">NOTES ADDED BY YOU IN THE LAST 24 HOURS</span><br /> 
                    <%'**** Notes Panel ***%>                                             
                    <asp:UpdatePanel ID="PanelListNotes" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <asp:SqlDataSource ID="SqlRecentQuickNotes" ...                                                            </asp:SqlDataSource>
                            <asp:GridView ID="gvRecentNotes" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataSourceID="SqlRecentQuickNotes" CellPadding="4" ForeColor="#333333" GridLines="None" DataKeyNames="NoteID" HorizontalAlign="Right" Width="100%">
                                <Columns>
                                    <asp:BoundField DataField="Note" HeaderText="Note" SortExpression="Note" />
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <asp:ImageButton id="btnVieDetails" runat="server" ImageUrl="~/images/magnifier.png" ToolTip="View details" AlternateText="Details" CommandName="ViewDetails" commandargument='<%# Eval("NoteID")%>' />
                                        </ItemTemplate>
                                    </asp:TemplateField>                                
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <asp:ImageButton id="btnEdit" runat="server" ImageUrl="~/images/pencil.png" ToolTip="Edit Note" AlternateText="Edit Note" CommandName="EditNote"  commandargument='<%# Eval("NoteID")%>' />
                                        </ItemTemplate>
                                    </asp:TemplateField>                                
                                    <asp:TemplateField>
                                </Columns>
                        </asp:GridView><br />
                        </ContentTemplate>
                    </asp:UpdatePanel>  
                    <%'**** END Notes Panel ***%>                     
</asp:Panel> 
 
 
 
                    <asp:Button ID="btnHideNotes" runat="server" Text="Button" />
    <ajaxToolkit:CollapsiblePanelExtender ID="cpeNotes" runat="Server"
        TargetControlID="PanelNotes"
        ExpandControlID="btnHideNotes"
        CollapseControlID="btnHideNotes"
        Collapsed="False"
        ImageControlID="edit_ToggleImage" 
        ExpandedImage="~/images/collapse_blue.jpg"
        CollapsedImage="~/images/expand_blue.jpg"
        SuppressPostBack="false"        />                      
 
 
 
CodeBehind
 
    Protected Sub gvRecentNotes_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles gvRecentNotes.RowCommand
        Select Case e.CommandName
            Case "EditNote"
                SqlNotes.SelectParameters("NoteID").DefaultValue = e.CommandArgument
                fvAddEditNote.Visible = True
                fvAddEditNote.DataBind()
                fvAddEditNote.ChangeMode(FormViewMode.Edit)
                UpdatePnlAddEdit.Update()
                cpeNotes.ClientState = True  ~~~~~~These do nothing inside of here - not sure why
                cpeNotes.Collapsed = True
        End Select
    End Sub
 
    Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
        gvRecentNotes.DataBind()
    End Sub

Open in new window

0
Comment
Question by:okcuser
[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
  • 2
  • 2
4 Comments
 
LVL 96

Expert Comment

by:Bob Learned
ID: 24788070
You have this Panel:

<asp:Panel ID="PanelNotes" runat="server">

and the UpdatePanel:

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

Which panel are you trying to hide?

0
 

Author Comment

by:okcuser
ID: 24788147
Either.  I originally only had the updatepanel, but I added the PanelNotes wrapper to set the collapsable panel to.

I've also tried not using the panel and just setting the visible property on the gridview in the rowcommand.  That turns it off fine, but I cannot find any place that I can set the visible back to true and have it show.
0
 

Author Comment

by:okcuser
ID: 24788182
I imagine this all has something to do with the conditional updates on the udpate panels, but I'm coming from classic asp and setting the visible property on a panel when the user is in "edit mode" doesn't seem like it should be that hard.  Just can't find the right place to turn gridview visible off/on or expand/collapse the panel around the gridview.  
0
 
LVL 96

Accepted Solution

by:
Bob Learned earned 500 total points
ID: 24788868
If you have a <div> element, then you can use JavaScript to set style.display = 'none', or use a CSS class to a style for visible, and a different style for hidden.

Example:


script language="JavaScript">
	function setStyle(me, s)
         {
	    me.style.display=s;
	}
</script>

Open in new window

0

Featured Post

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.

Question has a verified solution.

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

Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
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…
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …
Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…

624 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