ASPxClientComboBox.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).

Declaration

SelectedIndexChanged: ASPxClientEvent<ASPxClientProcessingModeEventHandler<ASPxClientComboBox>>

Event Data

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

Property	Description
processOnServer	Specifies whether or not to process the event on the server.

Remarks

The SelectedIndexChanged event occurs on the client side, whenever selection is moved between items within a list 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.

Example

This example demonstrates how to show the current item image within the ASPxComboBox text. To accomplish this task, handle the client-side ASPxClientComboBox.SelectedIndexChanged event, and change the background image of the control’s main HTML element. Also, you should set the ASPxComboBox.BackgroundImage.ImageUrl on the server side to synchronize the selected image. It is necessary to manually adjust the paddings and control height.

The complete sample project is available in the DevExpress Code Central database at E1317.

JS

function SetComboBoxImage(s){
    var cbstyle = s.mainElement.style;
    cbstyle.backgroundImage = 'url('+(s.GetSelectedItem().imageUrl)+')';
    cbstyle.backgroundRepeat = "no-repeat";    
    cbstyle.backgroundPosition = "2px";
}

ASPX

<script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (cmbRating.SelectedItem != null)
            {
                cmbRating.BackgroundImage.ImageUrl = cmbRating.SelectedItem.ImageUrl;
                cmbRating.BackgroundImage.Repeat = 
                DevExpress.Web.BackgroundImageRepeat.NoRepeat;
                cmbRating.BackgroundImage.HorizontalPosition = "2px";
                cmbRating.BackgroundImage.VerticalPosition = "50%";
            }
        }
</script>
...
<dxe:ASPxComboBox BackgroundImage-Repeat="NoRepeat" 
    BackgroundImage-HorizontalPosition="left" ID="cmbRating" 
    runat="server" ClientInstanceName="cmbRating" ValueType="System.String" Height="32px" >            
    <Items>
        <dxe:ListEditItem Text="Good" Value="0" ImageUrl="~/Images/good.gif" />
        <dxe:ListEditItem Text="Average" Value="1" ImageUrl="~/Images/average.gif" />
        <dxe:ListEditItem Text="Poor" Value="3" ImageUrl="~/Images/poor.gif"/>            
    </Items>                
    <ClientSideEvents SelectedIndexChanged="function(s, e) { SetComboBoxImage(s); }" />
    <Paddings PaddingLeft="30px" />
    <BackgroundImage HorizontalPosition="left" Repeat="NoRepeat" />
</dxe:ASPxComboBox>
...