Show the selected Item image in input

Thread is closed for posting
1 posts, 1 answers
  1. Answer
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 18 Feb 2010 Link to this post

    Requirements
    RadControls version Q1 2009+
    .NET version

    2.0+
    Visual Studio version

    2005/2008
    programming language

    JavaScript
    browser support

    all browsers supported by RadControls for ASP.NET AJAX


    PROJECT DESCRIPTION
    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;
            }
        </style>
     
        <script language="javascript" type="text/javascript">
            function showImageOnSelectedItemChanging(sender, eventArgs) {
                var input = sender.get_inputDomElement();
                 
                input.style.background = "url(" + eventArgs.get_item().get_imageUrl() + ") no-repeat";
            }
     
            function showFirstItemImage(sender) {
                var input = sender.get_inputDomElement();
                 
                input.style.background = "url(" + sender.get_items().getItem(0).get_imageUrl() + ") no-repeat";
            }
        </script>
     
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <telerik:RadComboBox ID="RadComboBox1" runat="server" Height="180px" OnClientLoad="showFirstItemImage"
                OnClientSelectedIndexChanging="showImageOnSelectedItemChanging">
            </telerik:RadComboBox>
        </div>
        </form>
    </body>
Back to Top

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