[Solved] Linking ComboBox Items to a URL

[Tommy]

Is there a way to simply have a dropdown list of links?

Item One (Links to page one)
Item Two (Links to page two)
etc ...

Basically a combobox dropdown menu.

[Atanas Korchev]

Hello Tommy,

Yes, this is possible by using the ItemTemplate feature of RadComboBox. Here is a quick example which assumes that the URL is stored in the Value property of the RadComboBoxItem:
ASPX:

<telerik:RadComboBox runat="server" ID="RadComboBox1">
         <ItemTemplate>
                <a href='<%# DataBinder.Eval(Container, "Value")%>'><%# DataBinder.Eval(Container, "Text") %></a>
          </ItemTemplate>
           <Items>
                  <telerik:RadComboBoxItem Text="Item 1"  Value="http://www.example.com" />
           </Items>
</telerik:RadComboBox>

Codebehind:

RadComboBox1.DataBind()

I hope this helps,
Albert
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Tommy]

That's cool but you will have to forgive my ignorance  :) ... in the codebehind, the default codebehind page look is:

 

 

 

Partial Class dropdowntemplate
    Inherits System.Web.UI.Page

End Class

Should the RadComboBox1.DataBind() be done as such in the codebehind:

 

 

Partial Class dropdowntemplate
    Inherits System.Web.UI.Page

    Protected Sub RadComboBox1_DataBinding(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadComboBox1.DataBinding
        RadComboBox1.DataBind()

    End Sub
End Class

Here's the aspx page code:

 <telerik:RadComboBox ID="RadComboBox1" Runat="server">
          <ItemTemplate>
                <a href='<%# DataBinder.Eval(Container, "Value")%>'><%# DataBinder.Eval(Container, "Text") %></a>
          </ItemTemplate>
            <Items>
                <telerik:RadComboBoxItem runat="server" Text="Link One"
                    Value="http://www.example1.com" />
                <telerik:RadComboBoxItem runat="server" Text="Link Two"
                    Value="http://www.example2.com" />
                <telerik:RadComboBoxItem runat="server" Text="Link Three"
                    Value="http://www.example3.com" />
                <telerik:RadComboBoxItem runat="server" Text="Link Four"
                    Value="http://www.example4.com" />
                <telerik:RadComboBoxItem runat="server" Text="Link Five"
                    Value="http://www.example5.com" />
            </Items>
        </telerik:RadComboBox>

That is what I have and the combo box displays but only the first item "Link One" is displayed and it is not linked ... no drop down for the other items either ..

Thanks in advanced!

TT

[Tommy]

Nevermind, it needed to be on a page load as such:

Partial Class dropdowntemplate
    Inherits System.Web.UI.Page


    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        RadComboBox1.DataBind()
    End Sub
End Class

My only other question is, how come it lost all the skin formatting?  How do I make it retain the "Outlook Skin" that is selected for the combobox? Is that even possible?

Thanks!

[Tommy]

It looks as though once I add the:

          <ItemTemplate>

                <a href='<%# DataBinder.Eval(Container, "Value")%>'><%# DataBinder.Eval(Container, "Text") %></a>

          </ItemTemplate>

It loses all the skin formatting which kind of sucks.

I have tried:

          <ItemTemplate>
          <span class="rcbItem ">
                <a href='<%# DataBinder.Eval(Container, "Value")%>'><%# DataBinder.Eval(Container, "Text") %></a>
            </span>
          </ItemTemplate>

as the class rcbitem is what formats the items in the drop down when the ItemTemplate is not added and the control is at it's default settings with a skin applied.  I have tried several different attempts with different css and all seem to produce the same thing.

What am I doing wrong as I do want the rcbitem class applied to my items to remove the underline and to add the highlight of the skin ...

Thoughts?

TT

[Paul]

Hello Tommy,

Here's a sample code snippet that shows the needed approach.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .RadComboBoxDropDown .rcbList a
        {
            color: #333;
            text-decoration: none;
            font: normal 12px/16px "Segoe UI" ,Arial,sans-serif;
            text-align: left;
            display: block;
            outline: none;
        }
        .RadComboBoxDropDown .rcbList a:hover
        {
            background: #306AC5 none repeat scroll 0 0;
            color: #FFFFFF;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadComboBox ID="RadComboBox1" runat="server" Skin="Outlook">
        <ItemTemplate>
            <a href='<%# DataBinder.Eval(Container, "Value")%>'>
                <%# DataBinder.Eval(Container, "Text") %></a>
        </ItemTemplate>
        <Items>
            <telerik:RadComboBoxItem runat="server" Text="Link One" Value="http://www.example1.com" />
            <telerik:RadComboBoxItem runat="server" Text="Link Two" Value="http://www.example2.com" />
            <telerik:RadComboBoxItem runat="server" Text="Link Three" Value="http://www.example3.com" />
            <telerik:RadComboBoxItem runat="server" Text="Link Four" Value="http://www.example4.com" />
            <telerik:RadComboBoxItem runat="server" Text="Link Five" Value="http://www.example5.com" />
        </Items>
    </telerik:RadComboBox>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using System.Collections;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        RadComboBox1.DataBind();
    }
}

Greetings,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Tommy]

Thanks Paul, that did the trick but leaves me with more unanswered questions, mainly:
Why does the list get generated without any class tags when you add links in this fashion?

Normal Skin Example:

<ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;">
<li class="rcbItem rcbItem">Link One</li>
<li class="rcbItem ">Link Two</li>
<li class="rcbItem  rcbSeparator ">Link Three</li>
<li class="rcbItem ">Link Four</li>
<li class="rcbItem ">Link Five</li></ul>

With the links added example:

<ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;">
<li><a href='http://www.example1.com'>Link One</a></li>
<li><a href='http://www.example2.com'>Link Two</a></li>
<li><a href=''>Link Three</a></li>
<li><a href='http://www.example4.com'>Link Four</a></li>
<li><a href='http://www.example5.com'>Link Five</a></li>
</ul>

As you can see, your fix above corrects the main list of links but now leaves out the rcbSeparator.  So I look in the directory C:\Program Files\Telerik\RadControls for ASPNET AJAX Q1 2009\Skins\Vista for any signs of the styles missing and can't find any mention of rcbSeperator ...  I know why the skin's css doesn't inherit down as the class attributes are stripped away. Is there something more I need to program in to pick up the classes for each of the tags in the list items?

Thanks again for your time! I'm really loving the controls btw!
TT

[Tommy]

Funny this is, some things are brought over and others are not, such as:

If I add a tooltip to one of the Items and a cssclass to another:

  <telerik:RadComboBox ID="RadComboBox1" Runat="server" Skin="Vista">
          <ItemTemplate>
            <a href='<%# DataBinder.Eval(Container, "Value")%>'><%# DataBinder.Eval(Container, "Text") %></a>
           </ItemTemplate>
            <Items>
                <telerik:RadComboBoxItem runat="server" Text="Link One"
                    Value="http://www.example1.com" ToolTip="This is a test!" />
                <telerik:RadComboBoxItem runat="server" Text="Link Two" CssClass="rcbItem"
                    Value="http://www.example2.com" />
                <telerik:RadComboBoxItem runat="server" Text="Link Three" IsSeparator="True" />
                <telerik:RadComboBoxItem runat="server" Text="Link Four"
                    Value="http://www.example4.com" />
                <telerik:RadComboBoxItem runat="server" Text="Link Five"
                    Value="http://www.example5.com" />
            </Items>
        </telerik:RadComboBox>

Only the ToolTip comes through, nothing else ...

<ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;">
<li title="This is a test!">
<a href='http://www.example1.com'>Link One</a></li>
<li><a href='http://www.example2.com'>Link Two</a></li>
<li><a href=''>Link Three</a></li>
<li><a href='http://www.example4.com'>Link Four</a></li>
<li><a href='http://www.example5.com'>Link Five</a></li>
</ul>

I don't know why one attribute would come over but not the rest ...

TT

[Tommy]

So is there any solution to the final question of how to bring over the other attributes of the ComboBox items such as:
<li class="rcbItem ...
and
<li class="rcbItem  rcbSeparator ...

Like it does normaly?

[Paul]

Hi Tommy,

You can easily achieve your goal by using the HighlightTemplatedItems property of the control. Here's your modified code snippet that shows the needed approach.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .RadComboBoxDropDown .rcbList a
        {
            color: #333;
            text-decoration: none;
            font: normal 12px/16px "Segoe UI" ,Arial,sans-serif;
            text-align: left;
            display: block;
            outline: none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadComboBox ID="RadComboBox1" runat="server" Skin="Outlook" HighlightTemplatedItems="true">
        <ItemTemplate>
            <a href='<%# DataBinder.Eval(Container, "Value")%>'>
                <%# DataBinder.Eval(Container, "Text") %></a>
        </ItemTemplate>
        <Items>
            <telerik:RadComboBoxItem runat="server" Text="Link One" Value="http://www.example1.com" />
            <telerik:RadComboBoxItem runat="server" Text="Link Two" Value="http://www.example2.com" />
            <telerik:RadComboBoxItem runat="server" Text="Link Three" Value="http://www.example3.com" />
            <telerik:RadComboBoxItem runat="server" Text="Link Four" Value="http://www.example4.com" />
            <telerik:RadComboBoxItem runat="server" Text="Link Five" Value="http://www.example5.com" />
        </Items>
    </telerik:RadComboBox>
    </form>
</body>
</html>

Greetings,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Tommy]

That brings over the items though you still have to re-style the items and seperator which seems like a round about way to make the box a link drop down... Seems like in q2 the devs should just add a link attribute and make the items linkable out of the box without the extra work that it takes now...

Thanks again m8,
TT

[Tommy]

One more question about this:

Everything works as I would expect, all the css attributes are brought over and i know that I can look in the
C:\Program Files\Telerik\RadControls for ASPNET AJAX Q1 2009\Skins
directory for all the different css information pertaining to each skin and control.

The code for the seperarator is now coming through in the <li> that is designated:

(class="rcbItem  rcbSeparator")

but, the separator is still getting linked as a normal selectable item.  Is there a way to do an IF THEN statement in the template such as:

<ItemTemplate>

<script>

If item = rcbSeparator then     <a href='#'>           <%# DataBinder.Eval(Container, "Text") %></a> (or even just a <hr> separator)

else

<a href='<%# DataBinder.Eval(Container, "Value")%>'>

<%# DataBinder.Eval(Container, "Text") %></a>   </script>

</ItemTemplate>

I know that syntax is way wrong so don't laugh! I know what I want, but I just don't know enough to make it work! Is this how you would do that or would you do something in the code behind?  Would you do it some other way?

Thanks again!

TT

[Tommy]

Nevermind, I'm a dork, just make the value of the separator item to <hr /> and the text to <hr /> and it seems to work.  :)

Also, just set the value for the displayed item to # and that will take care of the item that is initially displayed, can't believe I didn't think about that before ... :)