.NET Discussion

.NET Issues, Problems, Code Samples, and Fixes

ASP.NET and AJAX: UpdatePanelPopupExtender Is An Awesome Tool


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">
 <div style="display:none;">
  <asp:updatepanel id="upDetails" runat="server">
  <contenttemplate>
<!-- ENTER WHATEVER YOU WANT HERE -->
  <div class="popup-details">
  <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>
  </div>
<!-- END -->
  </contenttemplate>
  </asp:updatepanel>
 </div>

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: UpdatePanelPopupExtender.RegisterCloseControl(btnCancelNotes, upDetails)

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.

kick it on DotNetKicks.com

Advertisements

October 31, 2007 - Posted by | AJAX, AJAX Toolkit, ASP.NET, GridView, Tips & Tricks |

No comments yet.

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

%d bloggers like this: