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.




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.

<div>      <asp:DropDownList ID="ddlFlags" runat="server" OnClientClick="return false;">
            <asp:ListItem Text="Select"></asp:ListItem>      </asp:DropDownList></div><br /><div>
      <asp:Button ID="btnGetIndex" runat="server" Text="Get Selected Index" OnClick="btnGetIndex_Click" />      <asp:HiddenField ID="hidSelectedValue" runat="server" /></div>

Step 3: Place another two divs which will popup on click of dropdownlist. Place a placeholder inside second div.
<!-- "Wire frame" div used to transition from the button to the info panel --><div id="flyout" style="display: none; overflow: hidden; z-index: 2; background-color: #FFFFFF; border: solid 1px #D0D0D0;"></div>
<!-- Info panel to be displayed as a flyout when the button is clicked -->
<div id="info" style="display: none; width: 260px; z-index: 2; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size: 12px; border: solid 1px #CCCCCC; background-color: Maroon; padding: 5px;">
      <div id="btnCloseParent" style="float: right; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);">
            <table>
                  <tr>
                        <td align="left" style="width:250px">
                              <asp:PlaceHolder ID="ph" runat="server"></asp:PlaceHolder>                        </td>
                        <td valign="top">
                              <asp:LinkButton ID="btnClose" runat="server" OnClientClick="return false;" Text="X" ToolTip="Close" Style="background-color: #666666; color: #FFFFFF; text-align: center; font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 5px;" />
                        </td>
                  </tr>
            </table>
      </div>
</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.
<script language="javascript" type="text/javascript">
      function SelectDDL(cntryName, cntryValue) {
            var ddlFlag = document.getElementById('<%=ddlFlags.ClientID %>');
            ddlFlag.options[ddlFlag.selectedIndex].text = cntryName;
            ddlFlag.options[ddlFlag.selectedIndex].value = cntryValue;
            document.getElementById('<%=hidSelectedValue.ClientID%>').value = cntryValue;
            var onclkBehavior = $find("behavCloseAnimation").get_OnClickBehavior().get_animation();
            onclkBehavior.play();
      }
      // Move an element directly on top of another element (and optionally
      // make it the same size)
      function Cover(bottom, top, ignoreSize) {
            var location = Sys.UI.DomElement.getLocation(bottom);
            top.style.position = 'absolute';
            top.style.top = location.y - 42 + 'px';
            top.style.left = location.x + 'px';
            if (!ignoreSize) {
                  top.style.height = bottom.offsetHeight + 'px';
                  top.style.width = bottom.offsetWidth + 'px';
            }
      }
</script>

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!

Shibashish mohanty

Download Code