AjaxDataControls (ADC) FAQ - DataList - SelectedIndexChangedEvent

I am going to start an AjaxDataControls FAQ on my blog with the most knowen properties/events and show them how you can use them. The first series will cover the DataList control - an index will be added as soon as there are more FAQ's posted. In this first post, I will show you how you can make use of the SelectedIndexChanged event inside the datalist control.

Basically there are two steps that you need to do.

  1. You need to define the SelectedIndexChangedEvent in the properties of the DataList control.
  2. You need to define the commandName property on the html elements.

Here is an example:

<AjaxData:DataList ID="ImagesList" runat="server" Visible=True
  ItemDataBoundEvent="OnItemDataBoundEvent"
  SelectedIndexChangedEvent="OnSelectedIndexChangedEvent">
    <ItemTemplate>
      <span id="spanPhoto" commandName="select"></span>
      <span id="spanTitle"></span>
    </ItemTemplate>
</AjaxData:DataList>

You can even set the commandName on both span's if you want.

In your JavaScript you would define the OnSelectedIndexChangedEvent in the following way:
 
function OnSelectedIndexChangedEvent(sender, e)
{
  var item = _dataList.get_selectedItem();
  var span = item.findControl("spanPhoto");
  var inner = span.innerHTML;
           
  // now you could basically do whatever you want with the image.
}

Published Thursday, June 12, 2008 10:59 AM by Sonu
Filed under: , ,

Comments

# AjaxDataControls (ADC) FAQ - INDEX

Tuesday, November 18, 2008 10:06 AM by Sonu on .NET

Welcome to the AjaxDataControls FAQ. How to get started with the AjaxDataControls with Visual Studio