DotNetSpeaks - Dropdownlist with image using AnimationExtender

Dropdownlist with image using AnimationExtender

Published:

July 19, 2010 By Sumit Dutta

Visited: 4352

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" %>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

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.

<div id="flyout" style="display: none; overflow: hidden; z-index: 2; background-color: #FFFFFF; border: solid 1px #D0D0D0;">
</div>

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

<ajaxToolkit:AnimationExtender ID="OpenAnimation" runat="server" TargetControlID="ddlFlags">
      <Animations>
            <OnClick>
                  <Sequence>
                        <%-- Disable the button so it can't be clicked again --%>
                        <EnableAction Enabled="false" />
                        <%-- Position the wire frame on top of the button and show it --%>
                        <ScriptAction Script="Cover($get('ctl00_SampleContent_ddlFlags'), $get('flyout'));" />
                        <StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/>
                        <%-- Move the wire frame from the button's bounds to the info panel's bounds --%>
                        <Parallel AnimationTarget="flyout" Duration=".2" Fps="15">
                              <Move Horizontal="150" Vertical="-50" />
                              <Resize Width="260" Height="280" />
                              <Color PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#FFFFFF" />
                        </Parallel>
                        <%-- Move the info panel on top of the wire frame, fade it in, and hide the frame --%>
                        <ScriptAction Script="Cover($get('flyout'), $get('info'), true);" />
                        <StyleAction AnimationTarget="info" Attribute="display" Value="block"/>
                        <FadeIn AnimationTarget="info" Duration=".2"/>
                        <StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/>
                        <%-- Flash the text/border red and fade in the "close" button --%>
                        <Parallel AnimationTarget="info" Duration=".5">
                              <Color PropertyKey="color" StartValue="#666666" EndValue="#FF0000" />
                              <Color PropertyKey="borderColor" StartValue="#666666" EndValue="#FF0000" />
                        </Parallel>
                        <Parallel AnimationTarget="info" Duration=".5">
                              <Color PropertyKey="color" StartValue="#FF0000" EndValue="#666666" />
                              <Color PropertyKey="borderColor" StartValue="#FF0000" EndValue="#666666" />
                              <FadeIn AnimationTarget="btnCloseParent" MaximumOpacity=".9" />
                        </Parallel>
                  </Sequence>
            </OnClick>
      </Animations>
</ajaxToolkit:AnimationExtender>

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

<ajaxToolkit:AnimationExtender ID="CloseAnimation" runat="server" TargetControlID="btnClose" BehaviorID="behavCloseAnimation">
      <Animations>
            <OnClick>
                  <Sequence AnimationTarget="info">
                        <%-- Shrink the info panel out of view --%>
                        <StyleAction Attribute="overflow" Value="hidden"/>
                        <Parallel Duration=".3" Fps="15">
                              <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />
                              <FadeOut />
                        </Parallel>
                        <%-- Reset the sample so it can be played again --%>
                        <StyleAction Attribute="display" Value="none"/>
                        <StyleAction Attribute="width" Value="250px"/>
                        <StyleAction Attribute="height" Value=""/>
                        <StyleAction Attribute="fontSize" Value="12px"/>
                        <OpacityAction AnimationTarget="btnCloseParent" Opacity="0" />
                        <%-- Enable the button so it can be played again --%>
                        <EnableAction AnimationTarget="ddlFlags" Enabled="true" />
                  </Sequence>
            </OnClick>
      </Animations>
</ajaxToolkit:AnimationExtender>

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<Flags> GetFlags()
{
      Flags objFlag;
      List<Flags> lstFlags = new List<Flags>();

      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<Flags> 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 = "<table>";
      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 = "<tr>";
            }
            strcountryName = ((Flags)lstFlags[i]).countryName;
            strcountryFlag = ((Flags)lstFlags[i]).countryFlag;
            str = str + "<td><div style='background-color:white;cursor:hand' onclick=\"SelectDDL('" + strcountryName + "','" + cntryValue++ + "');\"><table><tr>";
            str = str + "<td>";
            lit = new Literal();
            lit.Text = str;
            ph.Controls.Add(lit);
            litImg = new Literal();
            litImg.Text = "<img src='" + strcountryFlag + "'/>";
            ph.Controls.Add(litImg);
            str = "</td>";
            str = str + "</tr><tr>";
            str = str + "<td>" + strcountryName;
            str = str + "</td>";
            str = str + "</tr></table></div></td>";
            if ((i % imageInRow) == (imageInRow - 1))
            {
                  str = str + "</tr>";
            }
            lit = new Literal();
            lit.Text = str;
            ph.Controls.Add(lit);
            str = string.Empty;
      }
      lit = new Literal();
      lit.Text = "</table>";
      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!

ECMAScript 5 (every feature of Array) - Part3