Can the DropDownList have Up and Down arrows?

[Alex]

I am trying to duplicate the "ShowUpDown" feature from the RadDateTimePicker. Ultimately, I want the user to navigate the DropDownList only using the Up and Down arrows, and disable the actual list that opens on the DropDownList. Is this possible?

 

 

 

 

[Alex]

Or maybe there is a different control that I can use to accomplish this? Thanks!

[Dess | Tech Support Engineer, Principal]

Hello, Alex,   

By design, RadSpinEditor shows up/down arrows to manipulate the value of the control. In order to achieve a similar functionality in RadDropDownList, you can use the following code snippet:

public RadForm1()
{
    InitializeComponent();
    new RadControlSpyForm().Show();

    MyStackLayoutElement buttonsLayout = new MyStackLayoutElement();
    buttonsLayout.Margin = new System.Windows.Forms.Padding(0, 0, -2, 0);
    buttonsLayout.Orientation = Orientation.Vertical;
    buttonsLayout.StretchHorizontally = false;
    buttonsLayout.StretchVertically = true;
    buttonsLayout.FitInAvailableSize = true;
    buttonsLayout.Class = "ButtonsLayout";

    RadSpinElementUpButton buttonUp = new RadSpinElementUpButton();
    buttonUp.Click += buttonUp_Click;
    buttonUp.Class = "UpButton";
    buttonUp.Arrow.Direction = Telerik.WinControls.ArrowDirection.Up;

    RadSpinElementDownButton buttonDown = new RadSpinElementDownButton();

    buttonDown.Click += buttonDown_Click;
    buttonDown.Class = "DownButton";
    buttonDown.Arrow.Direction = Telerik.WinControls.ArrowDirection.Down;

    buttonsLayout.Children.Add(buttonUp);
    buttonsLayout.Children.Add(buttonDown);

    this.radDropDownList1.DropDownStyle = Telerik.WinControls.RadDropDownStyle.DropDown;

    RadTextBoxItem tbItem = this.radDropDownList1.DropDownListElement.TextBox.TextBoxItem;
    this.radDropDownList1.DropDownListElement.TextBox.Children.Remove(tbItem);
    DockLayoutPanel dockPanel = new DockLayoutPanel();
    dockPanel.Children.Add(buttonsLayout);
    dockPanel.Children.Add(tbItem);
    DockLayoutPanel.SetDock(tbItem, Telerik.WinControls.Layouts.Dock.Left);
    DockLayoutPanel.SetDock(buttonsLayout, Telerik.WinControls.Layouts.Dock.Right);
    this.radDropDownList1.DropDownListElement.TextBox.Children.Add(dockPanel);

    this.radDropDownList1.DropDownListElement.ArrowButton.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
}

public class MyStackLayoutElement : StackLayoutElement
{
    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(RadSpinElement);
        }
    }
}

private void buttonUp_Click(object sender, EventArgs e)
{
    this.radDropDownList1.SelectedIndex = Math.Max(0, this.radDropDownList1.SelectedIndex - 1);
}

private void buttonDown_Click(object sender, EventArgs e)
{
    this.radDropDownList1.SelectedIndex = Math.Min(this.radDropDownList1.Items.Count - 1, this.radDropDownList1.SelectedIndex + 1);
}

I hope this information helps. If you have any additional questions, please let me know. 

Regards,
Dess
Progress Telerik

[Alex]

Thanks @Dess!

I will let you know if I have any issues, once I implement it.

Cheers!

[Alex]

Thanks Dess, it worked great!

I changed two little things, the top button was too close to the top, and the bottom button was covering the bottom of the top button, so I changed two lines:

 

Added (reduced -1) top margin to the ButtonsLayout:

var buttonsLayout = new DropdownStackLayoutElement
{
    Margin = new Padding(0, -1, -2, 0),

 

And added top margin to the DownButton:

var buttonDown = new RadSpinElementDownButton();
buttonDown.Click += buttonDown_Click;
buttonDown.Class = "DownButton";
buttonDown.Arrow.Direction = Telerik.WinControls.ArrowDirection.Down;
buttonDown.Margin = new Padding(0, 1, 0, 0);

 

Thanks again, Cheers!

 

 

[Hristo]

Hi Alex,

I am happy that my colleague managed to help and that you have managed to achieve the desired behavior in your project. Thank you also for sharing your final solution.

Please let us know if you have other questions.

Regards,
Hristo
Progress Telerik