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

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

ASPX

aspx

<dx:ASPxListBox ID="ASPxListBox1" runat="server" Theme="Office365" ClientInstanceName="listBox">
    <Items>
        <dx:ListEditItem Text="Item1" Value="10" />
        <dx:ListEditItem Text="Item2" Value="20" />
        <dx:ListEditItem Text="Item3" Value="30" />
    </Items>
</dx:ASPxListBox>


<dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" Text="Get Item's Info" Theme="Office365">
    <ClientSideEvents Click="function(s, e) {
        var item = listBox.GetSelectedItem();
        memo.SetText('Text: ' + item.text + '\n' + 'Value: ' + item.value + '\n' + 'Selected: ' + item.selected + '\n' + 'Index: ' + item.index );  
    }" />
</dx:ASPxButton>



<dx:ASPxMemo ClientInstanceName="memo" ID="ASPxMemo1" runat="server" Height="71px" Width="170px"></dx:ASPxMemo>

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.

JS
ASPX

javascript

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