Image for Selected Item

10 posts, 1 answers
  1. Charles
    Charles avatar
    30 posts
    Member since:
    Feb 2013

    Posted 03 Jul 2013 Link to this post

    Hi,
    Is there a way to show the selected Item's image in the RadComboBox or RadDropDownList? I have items that are only images with no text. When the item is selected nothing shows in the combo box. Is there a way to display the selected item's image?

    Thanks

    Charles
  2. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 04 Jul 2013 Link to this post

    Hi Charles,

    Please have a look into the code library here which explains how to show image for selected item.

    Thanks,
    A2H
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 04 Jul 2013 Link to this post

    Hi Charles,

    You can use the below code library link to achieve your scenario.

    http://www.telerik.com/community/code-library/aspnet-ajax/combobox/show-the-selected-item-image-in-input.aspx

    As an additional reference you can refer this link also

    http://www.telerik.com/community/forums/aspnet-ajax/combobox/can-i-show-selected-image-in-radcombobox.aspx


    Thanks,
    A2H
  5. Charles
    Charles avatar
    30 posts
    Member since:
    Feb 2013

    Posted 05 Jul 2013 Link to this post

    A2H,

    This helps, but autopostback is needed on the combobox and the background image disappears upon postback. Is there a way to persist it? I tried to emit a javascript in the page prerender event to reset the background image but I couldn't get it to work (I am a noob when it comes to clientside programming). Do you know how to do this or have a different idea?

    Thanks again for your help.

    Charles
  6. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 09 Jul 2013 Link to this post

    Hi,

    Unfortunately I couldn't replicate your issue at my end.
    I have enabled post back for combobox in sample solution which is provided with the code library and I can still see the images populated with out any issues.

    Could you please elaborate your scenario?

    Thanks,
    A2H
  7. camille
    camille  avatar
    1 posts
    Member since:
    Nov 2014

    Posted 21 Dec 2014 Link to this post

    The link to the example points back to this post!
  8. Charles
    Charles avatar
    30 posts
    Member since:
    Feb 2013

    Posted 16 Feb Link to this post

    I have a scenario that requires the selected Item image to be shown in the radcombobox. The combobox is in a NestedViewTemplate in a grid. I am trying to initialize the combobox in onitemdatabound so that it shows the image for the selected item. I set the selectedItem no problem but I am having trouble with the javascript to get the image to show. I have looked at the samples referenced in this tread and others, but they all show using the OnClientSelectedIndexChanging event for the control. Can you show me how to do this?

    Below is what I tried so far. The combo variable always comes back null.

    This feature really should be natively supported by the control. The forums have this question asked many times over the years and the answer is always "see this javascript" which really seems like a hack to me. Sorry for the rant, but  I have wasted so much time on this every time I go to use the combo box with images. I really like telerik controls but please this control needs to be updated!

     

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                <script type="text/javascript">
                    function showImageOnSelectedItemChanging(sender, eventArgs) {
                        var input = sender.get_inputDomElement();
                        input.style.background = "url(" + eventArgs.get_item().get_imageUrl() + ") no-repeat";
                    }
     
                    function RefreshSelectedItemImage(rcbid, imageurl) {
                        var combo = $find(rcbid);
                        combo.style.background = "url(" + imageurl + ") no-repeat";
                    };
     
                </script>
            </telerik:RadScriptBlock>
     
     
    <telerik:RadGrid ID="rgClients" runat="server" AutoGenerateColumns="False" CellSpacing="0" GridLines="Horizontal" AllowPaging="true" Width="99%" Skin="MetroTouch" >
                        <MasterTableView DataSourceID="sqldsgetClients"  PagerStyle-PageSizes="5,25,50,100,200,500" PageSize="25" ShowGroupFooter="false" ShowHeader="true"  >
                        <PagerStyle AlwaysVisible="true"/>
                        <Columns>
                            <telerik:GridTemplateColumn SortExpression="customerflagpic" >
                                <ItemTemplate>
                                    <asp:Image id="imgFlagPic" runat="server" Width="16px" Height="16px"></asp:Image>
                                </ItemTemplate>
                                <HeaderStyle Width="18px" />
                                <ItemStyle Width="18px" VerticalAlign="Middle" HorizontalAlign="Center" />
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn SortExpression="salesOpportunityType" HeaderText="Type"  AllowFiltering="false">
                                <ItemTemplate>
                                    <asp:Image id="imgSOType" runat="server" Width="16px" Height="16px" ></asp:Image>
                                </ItemTemplate>
                                <HeaderStyle Width="18px" />
                                <ItemStyle Width="18px" VerticalAlign="Middle" HorizontalAlign="Center" />
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn SortExpression="customerLname" HeaderText="Customer" >
                                <ItemTemplate>
                                    <asp:Label ID="lblCustomerName" runat="server" Text="" Font-Size="12pt"></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn SortExpression="salesOpportunityDate" HeaderText="Date Entered" >
                                <ItemTemplate>
                                    <asp:Label id="lblDateEntered" runat="server"></asp:Label>
                                </ItemTemplate>
                                <HeaderStyle Width="86px" />
                                <ItemStyle Width="86px" Wrap="False"></ItemStyle>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderText="" >
                                <ItemTemplate>
                                    <asp:CheckBox id="chkChooseMe" runat="server"></asp:CheckBox>
                                </ItemTemplate>
                                <HeaderStyle Width="18px" />
                                <ItemStyle Width="18px" VerticalAlign="Middle"  />
                            </telerik:GridTemplateColumn>
                             
                            
                        </Columns>
                             
                            <NestedViewTemplate>
                                <div style="width:92%; margin:6px; padding:6px; border:1px groove #a7a3a3"">
                                    <label style="font-size:13pt">Assigned To:</label
                                    <telerik:RadLabel ID="radlblSalesPerson" runat="server" Font-Size="13pt" Visible="true"></telerik:RadLabel>
                                    <telerik:RadDropDownList ID="radddlSalesPerson" runat="server" Visible="false" AppendDataBoundItems="true" DataTextField="Name" DataValueField="EmployeeID" >
                                        <Items>
                                            <telerik:DropDownListItem Text="- Select Employee -" Value="0" />
                                        </Items>
                                    </telerik:RadDropDownList>
                                    <telerik:RadButton ID="radbtnAssignEmployee" runat="server" Text="Update" OnClick="radbtnAssignEmployee_Click"></telerik:RadButton>
                                    <br />
                                    <label style="font-size:13pt">Flag:</label
                                    <telerik:RadComboBox ID="rcbFlag" runat="server" Width="75px"
                                        OnClientSelectedIndexChanging="showImageOnSelectedItemChanging">
                                        <Items>
                                            <telerik:RadComboBoxItem ImageUrl="/Icons/FlagGifCombo/9ZZZZblank.gif" Value="9ZZZZblank.gif" />
                                            <telerik:RadComboBoxItem ImageUrl="/Icons/FlagGifCombo/001Green_Light.gif" Value="001Green_Light.gif" Selected="true"/>
                                            <telerik:RadComboBoxItem ImageUrl="/Icons/FlagGifCombo/002Red_Light.gif" Value="002Red_Light.gif" />
                                            <telerik:RadComboBoxItem ImageUrl="/Icons/FlagGifCombo/003Yellow_Light.gif" Value="003Yellow_Light.gif" />
                                            <telerik:RadComboBoxItem ImageUrl="/Icons/FlagGifCombo/1RedFlag.gif" Value="1RedFlag.gif" />
                                            <telerik:RadComboBoxItem ImageUrl="/Icons/FlagGifCombo/2BlueFlag.gif" Value="2BlueFlag.gif" />
                                            <telerik:RadComboBoxItem ImageUrl="/Icons/FlagGifCombo/3GreenFlag.gif" Value="3GreenFlag.gif" />
                                            <telerik:RadComboBoxItem ImageUrl="/Icons/FlagGifCombo/4Exclamation.gif" Value="4Exclamation.gif" />
                                            <telerik:RadComboBoxItem ImageUrl="/Icons/FlagGifCombo/6GreenCheck.gif" Value="6GreenCheck.gif" />
                                            <telerik:RadComboBoxItem ImageUrl="/Icons/FlagGifCombo/7Happy.gif" Value="7Happy.gif" />
                                            <telerik:RadComboBoxItem ImageUrl="/Icons/FlagGifCombo/8unhappy.gif" Value="8unhappy.gif" />
                                            <telerik:RadComboBoxItem ImageUrl="/Icons/FlagGifCombo/9trash.gif" Value="9trash.gif" />
                                        </Items>
                                    </telerik:RadComboBox>
                                    <telerik:RadButton ID="radbtnChangeFlag" runat="server" Text="Update" OnClick="radbtnChangeFlag_Click"></telerik:RadButton><br />
                                    <telerik:RadLabel ID="radlblStatus" runat="server" Font-Size="13pt" Visible="true"></telerik:RadLabel>
                                    <telerik:RadDropDownList ID="radddlStatus" runat="server">
                                        <Items>
                                            <telerik:DropDownListItem Text="Active" Value="1" />
                                            <telerik:DropDownListItem Text="Managed" Value="2" />
                                            <telerik:DropDownListItem Text="Dropped" Value="4" />
                                            <telerik:DropDownListItem Text="Inactive" Value="5" />
                                        </Items>
                                    </telerik:RadDropDownList>
                                    <telerik:RadButton ID="radbtnChangeStatus" runat="server" Text="Update" OnClick="radbtnChangeStatus_Click"></telerik:RadButton>
                                </div>
                                <table style="width:100%" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td style="padding-left:6px">
                                            Mobile: <br />
                                            Home: <br />
                                            Work: <br />
                                            Other: <br />
                                            <label>List Price:</label>
                                            <label></label><br />
                                            <label>Advertised Price:</label>
                                            <label></label>
                                        </td>
                                        <td style="text-align:right; vertical-align:top; padding-right:2px">
                                            <table>
                                                <tr>
                                                    <td style="padding-bottom:8px;padding-top:5px">
                                                        <telerik:RadButton ID="rbPhotos" runat="server" Text="Add Photos" ButtonType="LinkButton" NavigateUrl='' Target="_blank" Width="118px"></telerik:RadButton>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <telerik:RadButton ID="rbEdit" runat="server" Text="Edit" ButtonType="LinkButton" NavigateUrl='' Target="_blank" Width="118px"></telerik:RadButton>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                                     
                            </NestedViewTemplate>
                        </MasterTableView>
                        <ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="true">
                            <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
                        </ClientSettings>
                    </telerik:RadGrid>

    Private Sub rgClients_ItemDataBound(sender As Object, e As GridItemEventArgs) Handles rgClients.ItemDataBound
            Try
     
                If e.Item.ItemType = Telerik.Web.UI.GridItemType.NestedView Then
                    Dim radlblSalesPerson As RadLabel = e.Item.FindControl("radlblSalesPerson")
                    Dim radddlSalesPerson As RadDropDownList = e.Item.FindControl("radddlSalesPerson")
                    Dim radbtnAssignEmployee As RadButton = e.Item.FindControl("radbtnAssignEmployee")
                    Dim radlblStatus As RadLabel = e.Item.FindControl("radlblStatus")
                    Dim radddlStatus As RadDropDownList = e.Item.FindControl("radddlStatus")
                    Dim radbtnChangeStatus As RadButton = e.Item.FindControl("radbtnChangeStatus")
                    Dim rcbFlag As RadComboBox = e.Item.FindControl("rcbFlag")
                    Dim radbtnChangeFlag As RadButton = e.Item.FindControl("radbtnChangeFlag")
     
                    Dim customerID As Int32 = e.Item.DataItem("customerID")
                    Dim AssignedEmployeeID As Int32 = e.Item.DataItem("employeeid")
                    Dim EmployeeFName As String = e.Item.DataItem("employeefname")
                    Dim EmployeeLName As String = e.Item.DataItem("employeelname")
                    Dim customerStatusID As Int32 = e.Item.DataItem("customerStatusID")
                    Dim customerStatus As String = e.Item.DataItem("customerStatus")
     
                    If IsManager Then
                        'Assign Salesperson
                        radddlSalesPerson.DataBind()
                        radlblSalesPerson.Visible = False
                        radddlSalesPerson.Visible = True
                        radddlSalesPerson.SelectedValue = AssignedEmployeeID.ToString()
                        radbtnAssignEmployee.Visible = True
                        radbtnAssignEmployee.Attributes.Add("customerID", customerID.ToString)
     
                        'Status
                        radlblStatus.Visible = False
                        radddlStatus.Visible = True
                        radddlStatus.SelectedValue = customerStatusID.ToString()
                        radbtnChangeStatus.Visible = True
                        radbtnChangeStatus.Attributes.Add("customerID", customerID.ToString)
                    Else
                        'Assign Salesperson
                        radlblSalesPerson.Visible = True
                        radddlSalesPerson.Visible = False
                        radlblSalesPerson.Text = EmployeeFName + " " + EmployeeLName
                        radbtnAssignEmployee.Visible = False
     
                        'Status
                        radlblStatus.Visible = True
                        radddlStatus.Visible = False
                        radlblStatus.Text = customerStatus
                        radbtnChangeStatus.Visible = False
                    End If
     
                    radbtnChangeFlag.Attributes.Add("customerID", customerID.ToString)
                    Dim script As String = ""
                    script = "RefreshSelectedItemImage('" + rcbFlag.ClientID + "', '" + rcbFlag.SelectedItem.ImageUrl + "');"
                    ScriptManager.RegisterStartupScript(Page, Page.GetType, "setflag", script, True)
     
                End If
                If TypeOf e.Item Is Telerik.Web.UI.GridDataItem Then
     
                    Dim imgFlagPic As Image = e.Item.FindControl("imgFlagPic")
                    Dim imgSOType As Image = e.Item.FindControl("imgSOType")
                    Dim chkChooseMe As CheckBox = e.Item.FindControl("chkChooseMe")
                    Dim lblCustomerName As Label = e.Item.FindControl("lblCustomerName")
                    Dim lblDateEntered As Label = e.Item.FindControl("lblDateEntered")
     
     
                    Dim customerfname As String = e.Item.DataItem("customerfname").ToString()
                    Dim customerlname As String = e.Item.DataItem("customerlname").ToString()
                    Dim company As String = e.Item.DataItem("company").ToString()
                    Dim customerID As String = e.Item.DataItem("customerID").ToString()
     
                    chkChooseMe.Attributes.Add("customerID", customerID)
     
                    If ((customerfname = "") AndAlso (customerlname = "")) AndAlso (company <> "") Then
                        lblCustomerName.Text = company
                    Else
                        lblCustomerName.Text = Convert.ToString(customerlname & Convert.ToString((If((customerlname = ""), "", ", ")))) & customerfname
                    End If
     
                    imgFlagPic.ImageUrl = "/art/flags/" + e.Item.DataItem("customerFlagPic").ToString()
                    imgSOType.ImageUrl = "/art/salesopportunities/" + e.Item.DataItem("salesOpportunityIcon").ToString()
                    imgSOType.ToolTip = e.Item.DataItem("salesOpportunityType").ToString()
     
                    If IsDate(e.Item.DataItem("salesOpportunityDate")) Then
                        lblDateEntered.Text = Format(e.Item.DataItem("salesOpportunityDate"), "MM/dd/yyyy")
                    End If
                    
     
                End If
            Catch ex As Exception
                DataAccess.LogError(ex, Request, GetCurrentMethod.Name, GroupID, DealershipID)
            End Try
        End Sub

     Charles

     

     

  9. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    835 posts

    Posted 19 Feb Link to this post

    Hello Charles,

    You need to use two events to show the image set to the selected item's ImageUrl in the ComboBox input area: the OnClientSelectedIndexChanging (which I see you have subscribed to) and the OnClientLoad client-side events:
    function showImageOnSelectedItemChanging(sender, eventArgs) {
        var input = sender.get_inputDomElement();
        input.style.background = "url(" + eventArgs.get_item().get_imageUrl() + ") no-repeat";
    }
     
    function OnClientLoad(sender) {
        var input = sender.get_inputDomElement();
        input.style.background = "url(" + sender.get_selectedItem().get_imageUrl() + ") no-repeat";
    };

    As you can see the method to get the selected item is different in the OnClientLoad event. You can find this method and other ComboBox client-side methods in the following documentation article.

    Here's a short video showing how the image changes on item selection.

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. Charles
    Charles avatar
    30 posts
    Member since:
    Feb 2013

    Posted 19 Feb in reply to Ivan Danchev Link to this post

    Wonderful! That did the trick. Thanks, Ivan

     

    Charles

  11. Ivan Danchev
    Admin
    Ivan Danchev avatar
    835 posts

    Posted 22 Feb Link to this post

    Hello Charles,

    I am glad the suggested ComboBox event handlers helped you achieve the desired functionality.

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017