Show the selected Item image in input

Thread is closed for posting
1 posts, 1 answers
  1. Answer
    Telerik Admin
    Telerik Admin avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 18 Feb 2010 Link to this post


    RadControls version Q1 2009+
    .NET version

    Visual Studio version

    programming language

    browser support

    all browsers supported by RadControls for ASP.NET AJAX

    This project illustrates how to show the image of the selected Item in the RadComboBox's input. The approach is to set the image as a background of the input with JavaScript on the first page load and when the selected Item changes.

    Note: The input padding is increased in order to open up space for the Image with CSS.

    Below is the sample code of the project:

    <head runat="server">
        <title>Untitled Page</title>
        <style type="text/css">
            div.RadComboBox .rcbInputCell .rcbInput
                padding-left: 22px;
        <script language="javascript" type="text/javascript">
            function showImageOnSelectedItemChanging(sender, eventArgs) {
                var input = sender.get_inputDomElement();
       = "url(" + eventArgs.get_item().get_imageUrl() + ") no-repeat";
            function showFirstItemImage(sender) {
                var input = sender.get_inputDomElement();
       = "url(" + sender.get_items().getItem(0).get_imageUrl() + ") no-repeat";
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <telerik:RadComboBox ID="RadComboBox1" runat="server" Height="180px" OnClientLoad="showFirstItemImage"
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.