Supposing that your site is set up for ASP.NET and AJAX, adding a popup panel to any control is a snap, thanks to Raj Kaimal’s UpdatePanelPopupExtender (UPPE). Normally I am not one for taking other people’s code or user controls, but I was in a bind and needed something like this very quickly, and it worked amazingly well. Essentially, the UPPE acts as a method to hide and show a details or “extra info needed” panel using AJAX. You can even easily attach it to command buttons in GridViews!
It is very easy to install: simply drop the DLL in your /bin/ directory and reference it, and then add it to your toolbox (second section). Then drop it where you want it, usually at the bottom of the page because during runtime its page location will be determined dynamically. Here’s code that I used to make it work on the .aspx page:
<cc1:updatepanelpopupextender id="uppeDetails" runat="server" targetcontrolid="upDetails" offsetx="0" offsety="0" CalloutColor="#7C6F57" CalloutBorderColor="Black" AutoPostBack="True">
<asp:updatepanel id="upDetails" runat="server">
<!-- ENTER WHATEVER YOU WANT HERE -->
<h3>Inventory Notes: </h3>
<asp:textbox id="txtInventoryNotes" runat="server" textmode="multiLine" rows="5"></asp:textbox>
<p><asp:button runat="server" id="btnSaveNotes" text="Save and Close" onclick=btnSaveNotes_Click> <asp:button runat="server" id="btnCancelNotes" text="Cancel"></p>
<!-- END -->
The necessary parts of the above code are the
<div style="display: none;">, which ensures that the panel is hidden from the get-go, the
autopostback="true" property in the control declaration, and the fact that it is referencing an update panel within your hidden div. Anything else is pretty much optional, and you can put anything in there, too.
Once you have that set up, you have a few steps in your code-behind to set up (all control names reference the controls from the above example). First, import the library (
Imports Flan.Controls). Then in your
Page_Load event, you need to reference the “close” button for your UpdatePanel, like so:
Then the last step is to have the control show up where you want it to, usually next to the button that says “Edit” or “See Details” or whatever, and to do that, just put the following code in that control’s Click event:
uppeDetails.ShowAt(yourControl). And that’s it!
If you want to wire it to a control in a GridView, it is a little trickier, but not because of the UPPE. Rather, you need to dynamically locate the control to wire the UPPE to. Here’s how you do it using the “SelectedIndexChanging” event of a GridView:
Protected Sub gvExisting_SelectedIndexChanging(ByVal sender As System.Object, ByVal e As System.Web.UI.WebControls.GridViewSelectEventArgs) Dim ctl As Control = CType(gvExisting.Rows(e.NewSelectedIndex).Cells(10).Controls(0), Control) 'Cells(10) is the location of my CommandField column gvExisting.SelectedIndex = e.NewSelectedIndex txtInventoryNotes.Text = gvExisting.DataKeys(e.NewSelectedIndex).Values(1) uppeDetails.ShowAt(ctl) End Sub
What I did in the above example is figure out exactly which cell was clicked, then pull the datakey from the GridView (which happens to contain the info I want) and then setting the textbox in my UPPE to that information, then showing the UPPE.
It’s all very easy to do, and extremely helpful for UI. You can have entire detail panels just pop up for editing, take care of business, then disappear again. No more need for separate detail pages, just use an UpdatePanelPopupExtender!
Here’s the download location for the UpdatePanelPopupExtender and sample code.
Ever since version 10301 of the AJAX Toolkit, the Accordion control has been acting a little wonky for me, but only in certain circumstances. The recent release of the AJAX Toolkit still has not addressed this issue. I’ve posted about it in the ASP.NET forums hoping that someone will get back to me or that they will at least address the issue. I’m not the only one having problems, but apparently I’m the only one having this particular problem: basically, my Accordion control’s headers’ text is set at
text-indent: -5000px to make the text not appear on the page so I can replace it with a background image. Pretty standard procedure. But when using the versions of the ASP.NET AJAX Toolkit later than 10301, when the user clicks on a header to get the content in the AccordionPane, all the background images for the headers disappear and the text returns. It’s a really weird bug that I don’t think they’ve quite figured out how to fix, but I am confident that they will. Check the link above for my full code.
When they figure out what’s wrong and fix it, you’ll see it here.
EDIT 10/15/07: I’ve been informed of a work-around for those who like workarounds. Click the link above to my post to the ASP.NET forums and read the thread. It’s definitely a workaround and a bit kludgy, but it will work.
A few days ago, Microsoft released the newest version of the AJAX Toolkit (10920)! Go check it out, download, and install in your Visual Studios. A lot of old bugs were fixed in the “Calendar, PopupBehavior, AutoComplete, Accordion, ConfirmButton, ModalPopup, MaskedEdit and Slider”, so this release should prove to be the best one yet (as most new releases are).
While working on my newest creation, PROUDWear Sports, I’ve run into a little snag trying to implement the ModalPopupExtender. Of course it works fine in IE7 and FireFox, but in IE6, it just refuses to work correctly. I’m pretty sure that I’ve implemented it correctly, but one can never be too sure. I watched the How Do I: Use the ASP.NET AJAX ModalPopup Extender Control video provided by Microsoft and followed it pretty much exactly, except including my own functionality (which is essentially nothing! Basically showing a picture in the hidden panel with a close button, that’s it.) and still it refuses to work in IE6.
I posted in the ASP.NET forums about my issue a few minutes ago, detailing my total problem (6th post down, you can find it by searching for “.NET Discussion”). If you don’t want to go there, basically what happens is in IE6, instead of properly displaying the chosen modal panel, it displays the panel inline with the rest of the page and then goes modal, rendering the page inaccessible to the user.
If anyone has any suggestions, please please let me know. Thanks!
Status: Solved! (8/17/07)
Solution: Upgrade your AJAX Toolkit DLL. This version is not the newest version, but the ModalPopupExtender functions correctly in IE6 when this one is applied. I am not using the latest version because the accordion control does not function correctly in the newer versions. When they fix that, I will go to the newest version.