Can the DropDownList have Up and Down arrows?

6 posts, 0 answers
  1. Alex
    Alex avatar
    12 posts
    Member since:
    Nov 2014

    Posted 02 Apr 2018 Link to this post

    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?

     

     

     

     

  2. Alex
    Alex avatar
    12 posts
    Member since:
    Nov 2014

    Posted 03 Apr 2018 in reply to Alex Link to this post

    Or maybe there is a different control that I can use to accomplish this? Thanks!
  3. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3997 posts

    Posted 04 Apr 2018 Link to this post

    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.
  4. Alex
    Alex avatar
    12 posts
    Member since:
    Nov 2014

    Posted 04 Apr 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Thanks @Dess!

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

    Cheers!

  5. Alex
    Alex avatar
    12 posts
    Member since:
    Nov 2014

    Posted 11 Apr 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    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!

     

     

  6. Hristo
    Admin
    Hristo avatar
    1520 posts

    Posted 12 Apr 2018 Link to this post

    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.
Back to Top