John Mendez

This may be old news for some of you out there but for those of you who are just starting to use the AjaxControlToolkit I wanted to show how you can nest the ModalPopup inside a GridView.  This technique has worked for the most part.  However, I will caution if you show a lot of records within the gridview  it could slow up performance on rendering the page.  Keep in mind this technique below is adding the ModalPopup to each row within the gridview.

First you need the following style within the page your CSS sheet

Second you will notice we have the AjaxControlToolkit registered on the aspx page, along with a ScriptManager

Third, you will see the GridView with one TemplateField that has a LinkButton, Panel, Button and the ModalPopupExtender.

The LinkButton is set as the TargetControlID
The Panel is set as the PopupControlID
The Button is set as the OkControlID

This is pretty much all you need to utilize the ModalPopup nested within a GridView.

Note: I handled the GridView binding in the code behind, or you can handle it with a SqlDataSource.

Hope this has helped on how you can utilize the ModalPopup inside a gridview.

AJAX.NET modalpopup, ajax.net, ajaxcontroltoolkit

Again I wanted to use an AJAX Toolkit item and the example Microsoft provided fell a bit short.  Even the example that came with the AJAXToolkit Web Pages still wasn't fully developed. They left out on how to properly edit and update an item in the ReOrderList.  In addition they used an ObjectDataSource and I don't use those very often.

I wanted to provide a full example of the ReOrderList that shows how to read, add, update, and delete items from the ReOrder list using a SQLDataSource instead of the ObjectDataSource Microsoft Provided.  Please ignore the actually looks of this example as I didn't spend any time styling it with CSS.  This just provides the functionality.

First I created a test table in my local SQL Database called TestTable1.  The columns included are the following:

 - intID (primary with identity enabled)
 - strName
 - strLink
 - intOrder (for order of list items)

Next I coded up the ReOrder List page.  I didn't use any code behind so I'm just pasting what the markup aspx page looks like.

The one item I was wondering about the most was how to actually wire up the Edit, Update, Delete, and Cancel commands to the list. Since I was using a SqlDataSource this actually was very easy. You just need to add the attribute CommandName="" to a LinkButton or Button. For example if I want to activate the EditItemTemplate you'll notice the link button in the ItemTemplate with the attribute CommandName="Edit".

Then you'll notice in the EditItemTemplate to properly edit the item, for Text attribute is '<%# Bind("yourColumn") %>'. This will handle editing back to the database on its own.  You'll also notice the same method for the Text attribute for the TextBoxes in the InsertItemTemplate.

Well again I'm showing this because the example from Microsoft left out the Edit, Update and Delete portions...and didn't use a SqlDataSource that the ReOrder list could bind too.

As always any problem with the code let me know so I can update this post, but I was just using this.

AJAX.NET reorderlist, ajax.net

I was expirementing with a new website design for our company and I wanted to include some type of animation effect on the home page.  I started off with scriptaculous and found out it was a bit difficult to get going using master pages.  This was because of how the order of the content was getting loaded.  So instead I tried using the Animation Extender in the AJAX toolkit...which I don't use too often.  The goal was to mimic the Blind Down Effect in scriptaculous.  I got pretty close, but not exactly like it would be using scriptaculous.  I had it working in IE, but Firefox processed the DIV's differently, so I came up with another solution.  Basically, I use the following concept:

Start the DIV at height 0px
Resize the DIV to height 200px (this could be whatever works for you)
Fade In the DIV

Below is the code that I used to accomplish this:

NOTE: the "newsHolder" class consists of the following:

If anyone can find a Blind Effect similiar to scriptaculous using the AJAX.NET framework that works proper in both IE and Firefox please response to this post.  I would be interested in knowing how this is accomplished.

AJAX.NET ajax.net, animationextender