ASPxClientListEditItem.imageUrl Property

Gets the item’s associated image.

Declaration

imageUrl: string

Property Value

Type	Description
string	A string value that represents the path to the image displayed by the item.

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

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