Rad Dropdown button

[Scott Reid]

Hey Everyone,

I was wondering if there was anyone that could assist me in making a rad asp.net dropdown button. I am fairly new to the telerik controls and have been trying to create this for a couple of days now. any help would be appreciated.

[Orlin]

Hello Scott,

We do not offer rad dropdown button but we do have a couple of controls that can be used instead.

On one hand you can use a RadDropDownList, which you can find demoed here:
http://demos.telerik.com/aspnet-ajax/dropdownlist/examples/overview/defaultcs.aspx

On the other hand you may find useful the RadComboBox, which has more functionality - http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx. And this article shows how to configure the right-to-left support of the control - RTL Support

Alternatively, you may use the SplitButton functionality of the RadButton:
demos.telerik.com/aspnet-ajax/button/examples/splitbutton/defaultcs.aspx

They can be used with different skins or further styled to approximate the look in the screenshot.

Let us know if you have further questions.


Regards,
Orlin
Telerik

[Orlin]

Hi Scott,

As an addition, you may wish to also look into using RadToolTip (http://demos.telerik.com/aspnet-ajax/tooltip/examples/overview/defaultcs.aspx?skin=BlackMetroTouch). Used with the BlackMetroTouch it looks like the one in your screenshot. You can insert asp:LinkButton or other button types you may need.

I hope this helps.


Regards,
Orlin
Telerik

[Ras Ran]

how to show  Raddropdownbutton  items in mouse enter?

[Rumen]

Hi Raneesras,

Here is an example of how to show the button menu on mouse over and hide it on mouse out:

<script>
    var contextMenu = null;

    function OnClientMouseOver(sender, args) {
        var currentLocation = $telerik.getBounds(sender.get_element());
        contextMenu.showAt(currentLocation.x, currentLocation.y + currentLocation.height);
    }

    function OnClientMouseOut(sender, args) {
        contextMenu.hide();
    }

    function storeContextMenuReference(sender, args) {
        contextMenu = sender;
    }
</script>
<telerik:RadButton RenderMode="Lightweight" EnableSplitButton="true" ID="SplitButton" AutoPostBack="false" OnClientMouseOver="OnClientMouseOver" OnClientMouseOut="OnClientMouseOut"
    runat="server" Text="Transfer Item">
</telerik:RadButton>
<telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnClientLoad="storeContextMenuReference">
    <Items>
        <telerik:RadMenuItem Text="Transfer Right">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Transfer Left">
        </telerik:RadMenuItem>
    </Items>
</telerik:RadContextMenu>

The example is based on the following live demo: Split Button.

Best regards,
Rumen
Progress Telerik