Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > ComboBox > Show the selected Item image in input

Answered Show the selected Item image in input

Feed from this thread
  • Answer Telerik Admin Master avatar

    Posted on Feb 18, 2010 (permalink)

    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

Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > ComboBox > Show the selected Item image in input