I have a drop down that I need to show an image in so I have added an ItemTemplate
Now I am not looking to do anything special style wise just add and image to the left of the text which works but when I do this the LI that is generated around the Item no longer has a CSS class attribute.
normally the <LI> tag has a <LI class="rcbItem> and the javascript would change the hover when you roll over it but when I simply add my ItemTemplate that level loses all of this. is there a way I can put this back in? I have tried wrapping it with a <div> and I have tried added my own <LI> but this throws and error.
Thanks
| <ItemTemplate> |
| <%# setImage(DataBinder.Eval(Container.DataItem, "SUBTYPE").ToString()) %> |
| <%# DataBinder.Eval(Container.DataItem, "PRJ_NAME")%> |
| </ItemTemplate> |
Now I am not looking to do anything special style wise just add and image to the left of the text which works but when I do this the LI that is generated around the Item no longer has a CSS class attribute.
normally the <LI> tag has a <LI class="rcbItem> and the javascript would change the hover when you roll over it but when I simply add my ItemTemplate that level loses all of this. is there a way I can put this back in? I have tried wrapping it with a <div> and I have tried added my own <LI> but this throws and error.
Thanks
3 Answers, 1 is accepted
0
Kevin Babcock
Top achievements
Rank 1
Rank 1
answered on 13 Jul 2008, 11:05 PM
Hello Tudor,
Unfortunately I have not been able to come up with a way to solve this problem out of the box. However, I did some up with a workaround. The highlighting of the items in a RadComboBox is done in javascript by switching out css class names. By adding the rcbItem to your <li> element, you will still not get the desired highlighting effect, because the javascript method does not fire for the items in the ItemTemplate. Instead, what you can do is handle the OnMouseOver and OnMouseOut events for each item, and set the class names manually. Here is an example:
I hope this helps.
Regards,
Kevin Babcock
Unfortunately I have not been able to come up with a way to solve this problem out of the box. However, I did some up with a workaround. The highlighting of the items in a RadComboBox is done in javascript by switching out css class names. By adding the rcbItem to your <li> element, you will still not get the desired highlighting effect, because the javascript method does not fire for the items in the ItemTemplate. Instead, what you can do is handle the OnMouseOver and OnMouseOut events for each item, and set the class names manually. Here is an example:
| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadComboBox.aspx.cs" Inherits="RadComboBox" %> | |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> | |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head runat="server"> | |
| <title>Untitled Page</title> | |
| </head> | |
| <body> | |
| <form id="form1" runat="server"> | |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> | |
| <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> | |
| <script type="text/javascript"> | |
| function OnMouseOver(sender) { | |
| sender.className = 'rcbHovered'; | |
| } | |
| function OnMouseOut(sender) { | |
| sender.className = 'rcbItem'; | |
| } | |
| </script> | |
| </telerik:RadScriptBlock> | |
| <telerik:RadComboBox ID="RadComboBox1" runat="server" | |
| DataSourceID="SqlDataSource1" | |
| DataTextField="CompanyName" | |
| DataValueField="CustomerID" | |
| OnItemDataBound="RadComboBox1_ItemDataBound"> | |
| <ItemTemplate> | |
| <%# Eval("CompanyName")%> | |
| </ItemTemplate> | |
| <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> | |
| </telerik:RadComboBox> | |
| <asp:SqlDataSource ID="SqlDataSource1" runat="server" | |
| ConnectionString="Data Source=.\SQLSERVER;Initial Catalog=Northwind;User ID=sa;Password=********" | |
| ProviderName="System.Data.SqlClient" | |
| SelectCommand="SELECT [CompanyName], [CustomerID] FROM [Customers]"> | |
| </asp:SqlDataSource> | |
| </form> | |
| </body> | |
| </html> | |
| using System; | |
| public partial class RadComboBox : System.Web.UI.Page | |
| { | |
| protected void RadComboBox1_ItemDataBound(object sender, Telerik.Web.UI.RadComboBoxItemEventArgs e) | |
| { | |
| e.Item.Attributes.Add("onmouseover", "OnMouseOver(this)"); | |
| e.Item.Attributes.Add("onmouseout", "OnMouseOut(this)"); | |
| } | |
| } | |
I hope this helps.
Regards,
Kevin Babcock
0
Grisha
Top achievements
Rank 1
Rank 1
answered on 14 Nov 2008, 04:11 PM
Kevin,
Good solution. Works fine. The only problem is to apply rcbItem style at the page load.
Do you have any solution for that?
Thanks
0
Kevin Babcock
Top achievements
Rank 1
Rank 1
answered on 16 Nov 2008, 04:20 AM
Hello Grisha,
You can simply add the class name during the RadComboBox's ItemDataBound event handler. Here is the updated example (the change is highlighted):
I hope this helps. If you have any further questions, please let me know.
Regards,
Kevin Babcock
You can simply add the class name during the RadComboBox's ItemDataBound event handler. Here is the updated example (the change is highlighted):
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Telerik.Examples._Default" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" > |
| <head runat="server"> |
| <title>Example - Use JavaScript Event Handlers to Change Style of RadComboBox Items</title> |
| <style type="text/css"> |
| .rcbItem |
| { |
| background-color: Red; |
| } |
| .rcbHovered |
| { |
| background-color: Blue !important; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> |
| <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> |
| <script type="text/javascript"> |
| function OnMouseOver(sender) { |
| sender.className = 'rcbHovered'; |
| } |
| function OnMouseOut(sender) { |
| sender.className = 'rcbItem'; |
| } |
| </script> |
| </telerik:RadCodeBlock> |
| <telerik:RadComboBox ID="RadComboBox1" runat="server" |
| DataSourceID="SqlDataSource1" |
| DataTextField="CompanyName" |
| DataValueField="CustomerID" |
| OnItemDataBound="RadComboBox1_ItemDataBound"> |
| <ItemTemplate> |
| <%# Eval("CompanyName") %> |
| </ItemTemplate> |
| </telerik:RadComboBox> |
| <asp:SqlDataSource ID="SqlDataSource1" runat="server" |
| ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" |
| SelectCommand="SELECT [CustomerID], [CompanyName] FROM [Customers]"> |
| </asp:SqlDataSource> |
| </form> |
| </body> |
| </html> |
| using Telerik.Web.UI; |
| namespace Telerik.Examples |
| { |
| public partial class _Default : System.Web.UI.Page |
| { |
| protected void RadComboBox1_ItemDataBound(object sender, RadComboBoxItemEventArgs e) |
| { |
| e.Item.Attributes.Add("class", "rcbItem"); |
| e.Item.Attributes.Add("onmouseover", "OnMouseOver(this);"); |
| e.Item.Attributes.Add("onmouseout", "OnMouseOut(this);"); |
| } |
| } |
| } |
I hope this helps. If you have any further questions, please let me know.
Regards,
Kevin Babcock