Binding the selected index of a dropdown in an AJAX accordion control

Posted: 15th February 2010 in AJAX, WCF

Given the task of populating and binding controls within an AJAX accordion control I thought things would be easy.  However, binding to a selected index of a dropdown control was not as easy as I first suspected.

Below is one of the accordion section included in my tab container.

Accordion with dropdown
  1. <asp:Accordion ID="devicesAccordion" runat="server" OnItemDataBound="DeviceAccordion_ItemDataBound">
  2.                                 <HeaderTemplate>
  3.                                      <tr>
  4.                                         <td><asp:Label ID="Label2" Text='<%# Eval("Name") %>' runat="server"  /></td>
  5.                                      </tr>
  6.                                 </HeaderTemplate>
  7.                                 <ContentTemplate>
  8.                                     <label for="nameTextBox">Name</label>
  9.                                     <asp:TextBox ID="nameTextBox" Text='<%# Eval("Name") %>' runat="server" />
  10.                                     <label for="deviceStatusDropDownList">Status</label>
  11.                                     <asp:DropDownList ID="deviceStatusDropDownList" runat="server" />
  12.                                     <asp:Button runat="server" ID="updateDevicesButton" CommandName="UpdateDevice" OnCommand="UpdateDevicesButton_Command" CommandArgument='<%# Eval("Id") %>' Text="Update" />
  13.                                 </ContentTemplate>
  14.                             </asp:Accordion>

Next, I had to bind the value from the DB to the status of the device and to do this I use the item data bound event of the accordion control. Firstly, I have to AccordionItemEvent being passed in is within the content part of the  control, i.e. the one being edited.

Once I’ve confirmed this, I need to convert the item in the control to the Data Transfer Object being retrieved from the WCF Service.  Then, if the cast to the DTO is not null. I find the control and set the value of the dropdown.

Binding an accordion item
  1. /// <summary>
  2.         /// Event handler when a new item is bound in the contentTemplate of the devices accordion.
  3.         /// </summary>
  4.         /// <param name="sender">The sender.</param>
  5.         /// <param name="e">The <see cref="AjaxControlToolkit.AccordionItemEventArgs"/> instance containing the event data.</param>
  6.         protected void DeviceAccordion_ItemDataBound(object sender, AccordionItemEventArgs e)
  7.         {
  8.             if (e.ItemType != AccordionItemType.Content)
  9.             {
  10.                 return;
  11.             }
  12.  
  13.             var deviceDto = e.Item as DeviceDto;
  14.             if (deviceDto == null)
  15.             {
  16.                 return;
  17.             }
  18.  
  19.             var dropDownList = e.AccordionItem.FindControl("deviceStatusDropDownList") as DropDownList;
  20.             if (dropDownList == null)
  21.             {
  22.                 return;
  23.             }
  24.  
  25.             this.PopulateDropDownListAndSetValue(dropDownList, LookupDataType.DeviceStatuses, deviceDto.Status.Status);
  26.         }

To help me with this process, I created a basic interface to be implemented by all DTO’s that can be used in a dropdown. 

Interface for Dropdowns
  1. /// <summary>
  2.     /// Interface to be implemeted to use a class as part of a drop down list.
  3.     /// </summary>
  4.     public interface ILookupData
  5.     {
  6.         /// <summary>
  7.         /// Gets the key for the lookup data.
  8.         /// </summary>
  9.         /// <value>The key of the lookup.</value>
  10.         string Key { get; }
  11.  
  12.         /// <summary>
  13.         /// Gets the value for the lookup data.
  14.         /// </summary>
  15.         /// <value>The value of the lookup.</value>
  16.         string Value { get; }
  17.     }

I also created a method to populate and set the value of the dropdown’s  selected index setting the Text and Key properties defined in the above interface.

Populate and set the dropdown
  1. /// <summary>
  2.         /// Populates the drop down list and set value.
  3.         /// </summary>
  4.         /// <param name="dropDownList">The drop down list.</param>
  5.         /// <param name="lookupDataType">Type of the lookup data.</param>
  6.         /// <param name="selectedValue">The selected value.</param>
  7.         protected void PopulateDropDownListAndSetValue(ListControl dropDownList, LookupDataType lookupDataType, string selectedValue)
  8.         {
  9.             dropDownList.DataSource = this.serviceConnector.GetLookupData(lookupDataType);
  10.             dropDownList.DataTextField = "Value";
  11.             dropDownList.DataValueField = "Key";
  12.             dropDownList.DataBind();
  13.             if (string.IsNullOrEmpty(selectedValue))
  14.             {
  15.                 return;
  16.             }
  17.  
  18.             dropDownList.SelectedValue = selectedValue;
  19.         }

In the code sample above it is shown that the data source for the the dropdown comes from a WCF Service which, in turn, returns a list of interfaces ILookupData. The working and casting for this service call is shown in the code sample below.

Casting items in a list
  1. /// <summary>
  2.         /// Gets the lookup data.
  3.         /// </summary>
  4.         /// <param name="lookupDataType">Type of the lookup data.</param>
  5.         /// <returns></returns>
  6.         public IList<LookupData> GetLookupData(LookupDataType lookupDataType)
  7.         {
  8.             IList<ILookupData> lookDataList = new List<ILookupData>();
  9.             switch (lookupDataType)
  10.             {
  11.                 case LookupDataType.Countries:
  12.                     lookDataList = this.GetCountries().ToList().ConvertAll(item => (ILookupData)item);
  13.                     break;
  14.                 case LookupDataType.DeviceStatuses:
  15.                     lookDataList = this.GetDevicesStatuses().ToList().ConvertAll(item => (ILookupData)item);
  16.                     break;
  17.                 case LookupDataType.Towns:
  18.                     lookDataList = this.GetAllTowns().ToList().ConvertAll(item => (ILookupData)item);
  19.                     break;
  20.             }
  21.  
  22.             return lookDataList.ToList().ConvertAll(item => (LookupData)item);
  23.         }

Hopefully, this post helps someone out there…

Advertisements
Comments
  1. caronjudith says:

    Accordian binding from database values http://asp.net-informations.com/ajax/accordion-database.htm Ajax accordian

    caron

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