ASPxClientListEdit.SelectedIndexChanged Event

Occurs on the client side after a different item in the list has been selected (focus has been moved from one item to another).


SelectedIndexChanged: ASPxClientEvent<ASPxClientProcessingModeEventHandler<ASPxClientListEdit>>

Event Data

The SelectedIndexChanged event's data class is ASPxClientProcessingModeEventArgs. The following properties provide information specific to this event:

Property Description
processOnServer Gets or sets a value that specifies whether the event should be finally processed on the server side.


The SelectedIndexChanged event occurs on the client-side, whenever selection is moved between items within the list box editor. Write a handler for the SelectedIndexChanged event to perform tasks in response to an end user selecting a different item from the editor's list.


The code sample below demonstrates how you can use the ASPxTrackBar control to display the wavelength range of the selected color.

The ASPxClientListEdit.SelectedIndexChanged event is handled to specify the track bar range interval. The ASPxClientTrackBar.SetPositionStart and ASPxClientTrackBar.SetPositionEnd methods specify range limits.

The image below shows the result.


function setWavelength() {
     if (colorList.GetSelectedIndex() == 0) tbWavelength.SetPositionEnd(750)
     else tbWavelength.SetPositionEnd(colorList.GetItem(colorList.GetSelectedIndex() - 1).value); 
     label.SetText('The visible ' + colorList.GetSelectedItem().text + ' light has a wavelength in the interval ' 
     + tbWavelength.GetPositionStart() + ' to ' + tbWavelength.GetPositionEnd() + ' nm');
<dx:ASPxLabel ID="ASPxLabel1" runat="server" Font-Bold="True" Text="The colors of the visible light spectrum">
          <dx:ASPxRadioButtonList ID="ColorList" runat="server" 
               ItemSpacing="3px" TextWrap="False" ClientInstanceName="colorList">
               <ItemImage Height="12px" Width="12px">
               <ClientSideEvents SelectedIndexChanged="setWavelength" />
                    <dx:ListEditItem Text="Red" Value="620" ImageUrl="~/Rainbow/Red.png" />
                    <dx:ListEditItem Text="Orange" Value="590" ImageUrl="~/Rainbow/Orange.png" />
                    <dx:ListEditItem Text="Yellow" Value="570" ImageUrl="~/Rainbow/Yellow.png" />
                    <dx:ListEditItem Text="Green" Value="495" ImageUrl="~/Rainbow/Green.png" />
                    <dx:ListEditItem Text="Blue" Value="450" ImageUrl="~/Rainbow/Blue.png" />
                    <dx:ListEditItem Text="Violet" Value="380" ImageUrl="~/Rainbow/Violet.png" />
          <td align="center">
          <dx:ASPxTrackBar ID="TbWavelength" runat="server" ShowChangeButtons="False" 
               LargeTickInterval="50" MaxValue="750" MinValue="380" 
               SmallTickFrequency="10" AllowRangeSelection="True" 
               ScalePosition="RightOrBottom" ClientInstanceName="tbWavelength" 
               ReadOnly="True" LargeTickStartValue="400">
<dx:ASPxLabel ID="ASPxLabel" runat="server" ClientInstanceName="label">
See Also