Dropdownlist with image using AnimationExtender

In this article we will explore how we can use Animation extender along with dropdownlist. When we need to show images in the dropdownlist and when we don't want to use contemporary dropdownlist, this kind of feature gives rich look to website.


DropDownlist with image using Animation Extender

Let's see how we can do this.

Step 1: Register AjaxControlToolkit and place scriptmanager in the form tag.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>


Step 2: Place a dropdownlist, button and a hiddenfield on the page. Hiddenfield will be used to store the selected value of the image from the Animation extender.

Step 3: Place another two divs which will popup on click of dropdownlist. Place a placeholder inside second div.

Step 4: Now place AnimationExtender which will apply to the above div while opening.


<%-- Disable the button so it can't be clicked again --%>

<%-- Position the wire frame on top of the button and show it --%>


<%-- Move the wire frame from the button's bounds to the info panel's bounds --%>





<%-- Move the info panel on top of the wire frame, fade it in, and hide the frame --%>



<%-- Flash the text/border red and fade in the "close" button --%>













Step 5: Now place below AnimationExtender which will apply to div containg placeholder while closing.





<%-- Shrink the info panel out of view --%>





<%-- Reset the sample so it can be played again --%>





<%-- Enable the button so it can be played again --%>





Step 6: Now place SelectDDL and Cover method in aspx page.


Step 7: Create a class flag and a method GetFlags in the codebehind. GetFlags method will return List of all the flags image with country name.

class Flags{
public string countryFlag = string.Empty;
public string countryName = string.Empty;
}
private List GetFlags()
{
Flags objFlag;
List lstFlags = new List();

objFlag = new Flags();
objFlag.countryFlag = "Flags/INDIA.GIF";
objFlag.countryName = "India";
lstFlags.Add(objFlag);
objFlag = new Flags();
objFlag.countryFlag = "Flags/CANADA.GIF";
objFlag.countryName = "Canada";
lstFlags.Add(objFlag);
objFlag = new Flags();
objFlag.countryFlag = "Flags/SRILANKA.GIF";
objFlag.countryName = "Sri Lanka";
lstFlags.Add(objFlag);
objFlag = new Flags();
objFlag.countryFlag = "Flags/ARGENTINA.GIF";
objFlag.countryName = "Argentina";
lstFlags.Add(objFlag);
objFlag = new Flags();
objFlag.countryFlag = "Flags/AUSTRALIA.GIF";
objFlag.countryName = "Australia";
lstFlags.Add(objFlag);

objFlag = new Flags();
objFlag.countryFlag = "Flags/EGYPT.GIF";
objFlag.countryName = "Egypt";
lstFlags.Add(objFlag);
objFlag = new Flags();
objFlag.countryFlag = "Flags/USA.GIF";
objFlag.countryName = "USA";
lstFlags.Add(objFlag);
objFlag = new Flags();
objFlag.countryFlag = "Flags/IRELAND.GIF";
objFlag.countryName = "IreLand";
lstFlags.Add(objFlag);

objFlag = new Flags();
objFlag.countryFlag = "Flags/SPAIN.GIF";
objFlag.countryName = "Spain";
lstFlags.Add(objFlag);
objFlag = new Flags();
objFlag.countryFlag = "Flags/SINGAPORE.GIF";
objFlag.countryName = "Singapore";
lstFlags.Add(objFlag);
objFlag = new Flags();
objFlag.countryFlag = "Flags/SWITZERLAND.GIF";
objFlag.countryName = "Switzerland";
lstFlags.Add(objFlag);
objFlag = new Flags();
objFlag.countryFlag = "Flags/UK.GIF";
objFlag.countryName = "UK";
lstFlags.Add(objFlag);
return lstFlags;
}

Step 8: Now on page load populate the place holder with images. We need to place literal to put table, tr and td in placeholder to do formatting.


protected void Page_Load(object sender, EventArgs e)
{
List lstFlags = GetFlags();
int imageInRow = 3; //To place 4 images in the row change it to 4 You need to change width of div with id info
String str = string.Empty;
Literal litImg;
Literal lit = new Literal();
lit.Text = ""; ph.Controls.Add(lit); string strcountryFlag = string.Empty; string strcountryName = string.Empty; int cntryValue = 1; for (int i = 0; i < lstFlags.Count; i++) { if ((i % imageInRow) == 0) { str = ""; } strcountryName = ((Flags)lstFlags[i]).countryName; strcountryFlag = ((Flags)lstFlags[i]).countryFlag; str = str + ""; if ((i % imageInRow) == (imageInRow - 1)) { str = str + ""; } lit = new Literal(); lit.Text = str; ph.Controls.Add(lit); str = string.Empty; } lit = new Literal(); lit.Text = "

"; str = str + ""; str = str + ""; str = str + ""; str = str + " "; lit = new Literal(); lit.Text = str; ph.Controls.Add(lit); litImg = new Literal(); litImg.Text = ""; ph.Controls.Add(litImg); str = " " + strcountryName; str = str + "

";
ph.Controls.Add(lit);
}

Step 9: Now place btnGetIndex_Click method to get selectedvalue of the dropdownlist which is stored in the hiddenfield.
protected void btnGetIndex_Click(object sender, EventArgs e)
{
Response.Write(hidSelectedValue.Value);
}


Live Demo

This ends the article of dropdownlist with images using AniamtionExtender.
Like us if you find this post useful. Thanks!
chinmaya parija
Download Code