This is a migrated thread and some comments may be shown as answers.
Can the DropDownList have Up and Down arrows?
5 Answers 15 Views
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 02 Apr 2018, 08:56 PM

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?

 

 

 

 

5 Answers, 1 is accepted

Sort by
0
Alex
Top achievements
Rank 1
answered on 03 Apr 2018, 01:46 PM
Or maybe there is a different control that I can use to accomplish this? Thanks!
0
Dess | Tech Support Engineer, Sr.
Telerik team
answered on 04 Apr 2018, 10:46 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Alex
Top achievements
Rank 1
answered on 04 Apr 2018, 02:34 PM

Thanks @Dess!

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

Cheers!

0
Alex
Top achievements
Rank 1
answered on 11 Apr 2018, 09:45 PM

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!

 

 

0
Hristo
Telerik team
answered on 12 Apr 2018, 03:42 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Asked by
Alex
Top achievements
Rank 1
Answers by
Alex
Top achievements
Rank 1
Dess | Tech Support Engineer, Sr.
Telerik team
Hristo
Telerik team
Share this question
or