ItemTemplate Drops LI Class setting

4 posts, 0 answers
  1. Rob
    Rob avatar
    3 posts
    Member since:
    Jun 2008

    Posted 11 Jul 2008 Link to this post

    I have a drop down that I need to show an image in so I have added an ItemTemplate
    <ItemTemplate> 
    <%# setImage(DataBinder.Eval(Container.DataItem, "SUBTYPE").ToString()) %> 
               &nbsp;&nbsp;<%# 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
  2. Kevin Babcock
    Kevin Babcock avatar
    189 posts
    Member since:
    Mar 2007

    Posted 13 Jul 2008 Link to this post

    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:

    1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadComboBox.aspx.cs" Inherits="RadComboBox" %> 
    2  
    3 <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    4  
    5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    6  
    7 <html xmlns="http://www.w3.org/1999/xhtml"
    8 <head runat="server"
    9     <title>Untitled Page</title> 
    10 </head> 
    11 <body> 
    12     <form id="form1" runat="server"
    13         <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
    14          
    15         <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"
    16             <script type="text/javascript"
    17                 function OnMouseOver(sender) { 
    18                     sender.className = 'rcbHovered'
    19                 } 
    20                  
    21                 function OnMouseOut(sender) { 
    22                     sender.className = 'rcbItem'
    23                 } 
    24             </script> 
    25         </telerik:RadScriptBlock> 
    26          
    27         <telerik:RadComboBox ID="RadComboBox1" runat="server"  
    28             DataSourceID="SqlDataSource1" 
    29             DataTextField="CompanyName" 
    30             DataValueField="CustomerID"  
    31             OnItemDataBound="RadComboBox1_ItemDataBound"
    32             <ItemTemplate> 
    33                 <%# Eval("CompanyName")%> 
    34             </ItemTemplate> 
    35             <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
    36         </telerik:RadComboBox> 
    37          
    38         <asp:SqlDataSource ID="SqlDataSource1" runat="server"  
    39             ConnectionString="Data Source=.\SQLSERVER;Initial Catalog=Northwind;User ID=sa;Password=********"  
    40             ProviderName="System.Data.SqlClient"  
    41             SelectCommand="SELECT [CompanyName], [CustomerID] FROM [Customers]"
    42         </asp:SqlDataSource> 
    43          
    44     </form> 
    45 </body> 
    46 </html> 
    47  

    1 using System; 
    2  
    3 public partial class RadComboBox : System.Web.UI.Page 
    4
    5     protected void RadComboBox1_ItemDataBound(object sender, Telerik.Web.UI.RadComboBoxItemEventArgs e) 
    6     { 
    7         e.Item.Attributes.Add("onmouseover""OnMouseOver(this)"); 
    8         e.Item.Attributes.Add("onmouseout""OnMouseOut(this)");         
    9     } 
    10
    11  

    I hope this helps.

    Regards,
    Kevin Babcock
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Grisha
    Grisha avatar
    8 posts
    Member since:
    Sep 2007

    Posted 14 Nov 2008 Link to this post

    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
  5. Kevin Babcock
    Kevin Babcock avatar
    189 posts
    Member since:
    Mar 2007

    Posted 15 Nov 2008 Link to this post

    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):

    <%@ 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
Back to Top