This is a migrated thread and some comments may be shown as answers.

Image for Selected Item

9 Answers 275 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

9 Answers, 1 is accepted

answered on 16 Feb 2016, 08:26 PM

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

Catch ex As Exception

DataAccess.LogError(ex, Request, GetCurrentMethod.Name, GroupID, DealershipID)

End Try

End Sub

Charles

Accepted

answered on 19 Feb 2016, 01:27 PM

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Image for Selected Item

9 Answers, 1 is accepted