ASPxClientComboBox.GetSelectedItem Method

Returns the combo box editor’s selected item.

Declaration

GetSelectedItem(): ASPxClientListEditItem

Returns

Type	Description
ASPxClientListEditItem	An ASPxClientListEditItem object that represents the selected item.

Remarks

Use the GetSelectedItem method to obtain the selected item within the editor’s dropdown list. A null value indicates that no item is currently selected within the editor.

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