GridView,HoverMenu and ModalPopup

The Scenario:
Let’s say, within an updatePanel we have a Gridview with a hovermenu (as an example — on the first cell of the rendered grid).We also have a button control on each gridview row. On click of that button a modalpopup shows up.The modalpopup is NOT sitting in any grid template column, Instead it’s in another different update panel.
Now, when we close the modalpopup, the hovermenu is lost on the parent grid.
However if the modalopoup resided in any template column of the grid & thus making it a part of the grid markup, the hover menu will still be there after modalpopup’s ok/Cancel button is clicked.
The Solution:
I added a OnCancelScript to the modalpopup, — to do a postback of the updatepanel in which the gridview is present. That gets the hovermenu back in the grid, when the user clicks hovermenu’s cancel button. Here’s some partial relevant code snippet, to give you an idea.
(a) Some partial relevant html
<asp:UpdatePanel ID=”updatePanel” runat=”server” UpdateMode=”Conditional” >
<ContentTemplate>
<asp:Button ID=”btn” runat=”server” Text=”clickme” OnClick=”btnSearch_Click”/>
<br>
<asp:GridView ID=”gvCustomers” runat=”server” GridLines=”None” AutoGenerateColumns=”false”
PageSize=”10″  OnRowCreated=”GvCustomers_RowCreated” CellPadding=”10″
CellSpacing=”0″ Width=”900px”  onrowdatabound=”gvCustomers_RowDataBound” EnableViewState=”true” DataKeyNames=”id”  >
<PagerStyle HorizontalAlign=”Right” />
     <Columns>
       <asp:TemplateField HeaderStyle-Width=”0px”>
         <ItemTemplate>
          <asp:Panel ID=”popupMenu” runat=”server” style=”display:none”>
          <div style=”border:1px outset white;padding:2px; background-color:#00FFFF;”>
          <div style=”text-align:left”><b>Name:</b>&nbsp; <%# Eval(“Fname”)%>&nbsp;<%# Eval(“Lname”)%></div>
          </div>
          </asp:Panel>   
          <ajaxToolkit:HoverMenuExtender ID=”hoverMenu” runat=”server” 
                    PopupControlID=”PopupMenu”
                    PopupPosition=”Left”
                    HoverCssClass=”popupHover”
                    TargetControlID=”popupMenu”
                    PopDelay=”50″ />
          </ItemTemplate></asp:TemplateField>
<asp:BoundField DataField=”Fname” HeaderText=”First Name”   />
<asp:BoundField DataField=”Lname” HeaderText=”Last Name”  />
<asp:TemplateField>
 <ItemTemplate>
 <asp:Button ID=”btn1″ runat=”server”  Text=”GetRoles” Visible=”true” OnClientClick=”g123();”  />    
    </ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView></ContentTemplate>
</asp:UpdatePanel>
———-
<asp:Panel ID=”pnlPopup” CssClass=”detail” runat=”server” Height=”500px” Width=”500px” style=”display:none;overflow:auto;” >
<asp:UpdatePanel ID=”updPnl2″ runat=”server” UpdateMode=”Conditional” >
<ContentTemplate>
  <asp:GridView ID=”GridView1″ runat=”server” ShowHeader=”true” AlternatingRowStyle-BackColor=”AliceBlue”  Width=”50%”  >
  </asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:LinkButton ID=”LinkButton1″ runat=”server” Text=”Close” />                      
<asp:UpdateProgress ID=”updProgressTab” DisplayAfter=”0″ runat=”server” >
 <ProgressTemplate>
 <div style=”background:White;position: relative; top: 50%; text-align: center;”>
     <asp:Image ID=”imgLoading” runat=”server” ImageUrl=”simple.gif” Width=”34px” Height=”30px” />Refreshing…
  </div>
 </ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
————–                   
<asp:Button id=”btnShowPopup” runat=”server” style=”display:none” />
<ajaxToolKit:ModalPopupExtender ID=”mdlPopup” runat=”server” TargetControlID=”btnShowPopup” PopupControlID=”pnlPopup” CancelControlID=”LinkButton1″ BackgroundCssClass=”modalBackground” OnCancelScript=”onCancel();”/>
————–
(b) Few Javascript code
function g123() {
$find(‘mdlPopup’).show();
}
function onCancel() {
document.getElementById(‘btn’).click();
}
————————
(c) Some relevant codebehind code
protected void gvCustomers_RowDataBound(object sender, GridViewRowEventArgs e)
{
Random random = new Random();
if (e.Row.RowType == DataControlRowType.DataRow)
{
HoverMenuExtender hoveMenu = (HoverMenuExtender)e.Row.FindControl(“hoverMenu”);
//By default, the Grid when it renders, the individual cells/row are not assigned any IDs
//Hence I populated the ID field — say for example I found there always exists a unique clientid — so just assigned that to the cell
//Any unique values are ok here — just has to be unique to work as cell id.
//Finally associalted the hovermenu to this cell id, to hover on :-)
e.Row.Cells[1].ID = e.Row.Cells[1].ClientID.ToString();
if (hoveMenu != null)
{
hoveMenu.TargetControlID = e.Row.Cells[1].ID;
}
}
protected void btn_Click(object sender, EventArgs e)
{
……
Do whatever necessary stuff here
……
}
————————————————
I know , there is lot’s of other code needed to run it as a valid page , but my idea here was to show that when a modalpopup is not inside the gridview markup & if by any chance the grid contains a hover menu, — THEN, when the modalpopup gets closed , to get back the hovermenu , I do another postback on the button (present in the same updatepanel as the grid), through javascript.
That’s one solution, I found, works. Let me know. Thanks.
Advertisements
This entry was posted in AJAXToolKit and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s