RadSpinEditor with 20px height in Fluent bottom croped

[sebastien]

I have inherited a radSpinEditor.

All my controls are 21px in height with the Fluent theme.

The bottom part (border) of the control is not shown correctly.

Attached is the rendering

 

My control:

public partial class IntegerTextBox : RadSpinEditor
    {
        public IntegerTextBox()
        {
            InitializeComponent();

            ShowUpDownButtons = false;

            Value = 0;
            DecimalPlaces = 0;
            TextAlignment = HorizontalAlignment.Right;
            Padding = new Padding(0, 0, 3, 0);
            Height = 21;
            MinimumSize = new Size(0, 20);
        }
    }

 

Here is what was generated in the designer :

//
// numericUpDownSalYears
//
this.numericUpDownSalYears.AutoSize = false;
this.numericUpDownSalYears.Location = new System.Drawing.Point(180, 36);
this.numericUpDownSalYears.MinimumSize = new System.Drawing.Size(0, 21);
this.numericUpDownSalYears.Name = "numericUpDownSalYears";
this.numericUpDownSalYears.Padding = new System.Windows.Forms.Padding(0, 0, 3, 0);

[Dimitar]

Hi Sebastien,

The inner TextBoxItem has a default margin which should be removed in this case. In addition, you can set the bottom border width, and a little smaller font:

public class IntegerTextBox : RadSpinEditor

{

    public IntegerTextBox()

    {

        ShowUpDownButtons = false;

        Value = 0;

        DecimalPlaces = 0;

        TextAlignment = HorizontalAlignment.Right;

        Padding = new Padding(0, 0, 3, 0);

        Height = 21;

        MinimumSize = new Size(0, 20);

        this.AutoSize = false;      

        this.MinimumSize = new System.Drawing.Size(0, 21);



        this.SpinElement.TextBoxItem.Margin = new Padding(0);

        this.Font = new Font("Segoe UI", 8, FontStyle.Regular);

        var borderPrimitive = this.SpinElement.Children[1] as BorderPrimitive;

        borderPrimitive.BottomWidth = 2;

    }

}

I hope this will be useful. Let me know if you have additional questions.

Regards,
Dimitar
Progress Telerik

[sebastien]

Thanks Dimitar, it worked.

 

But now I have a different visual problem : I need the text to be aligned vertically just as the RadDropDownList beside.

 

I prefer modifying the IntegerTextBox and not all the RadDropDownList used (we didn't inherit it so must modifiy all the instances that I don't want toif possible).

 

Printscreen attached

 

thanks

[Dimitar]

Hello Sebastian,

Since all editors in the fluent theme are 24 pixels high by default, you must have applied some changes to DropDownList as well. Could you please send me the changes that you have made to the DropDownList. This way I will be able to reproduce the exact case on my side.

In general, you should try setting the top margin, but if its too much the bottom border can be hidden again:

this.SpinElement.TextBoxItem.Margin = new Padding(0, 1,0,0);

I am looking forward to your reply.

 

Regards,
Dimitar
Progress Telerik

[sebastien]

public partial class DropDownList : RadDropDownList
    {
        int _maxPopupWidth = 0;
        int _maxPopupHeight = 0;

        public DropDownList()
        {
            InitializeComponent();

            PopupOpening += maindropDownList_PopupOpening;

            ShowItemToolTips = true;

            DropDownStyle = Telerik.WinControls.RadDropDownStyle.DropDownList;
            EnableMouseWheel = false;

            ToolTipTextNeeded += DropDownList_ToolTipTextNeeded;
            VisualListItemFormatting += DropDownList_VisualListItemFormatting;
            KeyUp += DropDownList_KeyUp;

            if (DropDownListElement.AutoCompleteSuggest == null)
            {
                DropDownListElement.AutoCompleteSuggest = new AutoCompleteSuggestHelper(DropDownListElement);
            }

            PopupOpened += radDropDownList1_PopupOpened;
            PopupClosed += radDropDownList1_PopupClosed;
        }

        private void DropDownList_KeyUp(object sender, KeyEventArgs e)
        {
            Keys[] keys = { Keys.Delete, Keys.Back };
            if (keys.Contains(e.KeyCode))
            {
                SelectedIndex = -1;
            }
        }

        private void DropDownList_VisualListItemFormatting(object sender, VisualItemFormattingEventArgs args)
        {
            if (args != null && args.VisualItem != null)
            {
                args.VisualItem.ToolTipText = args.VisualItem.Text;
            }
        }

        private void DropDownList_ToolTipTextNeeded(object sender, Telerik.WinControls.ToolTipTextNeededEventArgs e)
        {
            if (SelectedItem != null)
            {
                e.ToolTipText = SelectedItem.Text;
            }
        }

        private void maindropDownList_PopupOpening(object sender, System.ComponentModel.CancelEventArgs e)
        {
            var radControl = sender as RadDropDownListElement;

            var tempSize = ManageWidthSize(radControl);
            _maxPopupWidth = tempSize.Width;
            _maxPopupHeight = tempSize.Height;

            radControl.AutoCompleteSuggest.DropDownList.PopupOpening -= null;
            radControl.AutoCompleteSuggest.DropDownList.PopupOpening += autoSuggestDropDownList_PopupOpening;

            // set same as this one
            radControl.AutoCompleteSuggest.DropDownList.DropDownSizingMode = DropDownSizingMode;
        }

        private void autoSuggestDropDownList_PopupOpening(object sender, System.ComponentModel.CancelEventArgs e)
        {
            var radControl = sender as RadDropDownListElement;

            radControl.Popup.MaximumSize = new System.Drawing.Size(_maxPopupWidth, _maxPopupHeight);
            radControl.Popup.MinimumSize = new System.Drawing.Size(_maxPopupWidth, _maxPopupHeight);
        }

        private static Size ManageWidthSize(RadDropDownListElement list)
        {
            int width = 0;

            foreach (var item in list.Items)
            {
                width = Math.Max(width, TextRenderer.MeasureText(item.Text, list.Font).Width);
            }

            if (list.Items.Count * (list.ItemHeight - 1) > list.DropDownHeight)
            {
                width += list.ListElement.VScrollBar.Size.Width;
            }

            list.Popup.Width = width + 20;

            return new Size(width + 20, list.ListElement.VScrollBar.Size.Height);
        }

        protected override Size DefaultSize
        {
            get { return new Size(180, 21); }
        }

        public override string ThemeClassName
        {
            get
            {
                return typeof(RadDropDownList).FullName;
            }
        }

        void radDropDownList1_PopupOpened(object sender, EventArgs e)
        {
            EnableMouseWheel = true;
        }

        void radDropDownList1_PopupClosed(object sender, Telerik.WinControls.UI.RadPopupClosedEventArgs args)
        {
            EnableMouseWheel = false;
        }
    }

[sebastien]

Hi, this is my wrapper, but can't find the underlying elements to shrink the control to be squared.

 

Look at joined file. The backcolor of the button goes too much at the bottom and there is also a line (between white rectangle and the button).

 

Here is the the .designer part of an implemantation:

this.cboBasic.AutoSize = false;
this.cboBasic.DropDownAnimationEnabled = false;
this.cboBasic.DropDownStyle = Telerik.WinControls.RadDropDownStyle.DropDownList;
this.cboBasic.EnableMouseWheel = false;
this.cboBasic.Location = new System.Drawing.Point(180, 73);
this.cboBasic.Name = "cboBasic";
this.cboBasic.Size = new System.Drawing.Size(280, 21);
this.cboBasic.TabIndex = 1;
this.cboBasic.ThemeName = "Fluent";
((Telerik.WinControls.UI.RadDropDownListElement)(this.cboBasic.GetChildAt(0))).DropDownStyle = Telerik.WinControls.RadDropDownStyle.DropDownList;

thanks

[Dimitar]

Hi Sebastien,

I have investigated this and it is caused by an issue in our implementation. I have logged this issue on our Feedback Portal. You can track its progress, subscribe to status changes and add your comment to it here. I have also updated your Telerik Points.

To workaround, this set the MaxSize of the following element:

radDropDownList1.DropDownListElement.Children[3].MaxSize = new Size(1, 1);

In addition, you need to leave the AutoSize property to true. You can remove the code that sets the autocomplete mode as well. It would not take effect when the DropDownStyle is set to DropDownList. 

Should you have any other questions do not hesitate to ask.

Regards,
Dimitar
Progress Telerik

[sebastien]

Hi Dimitar,

I tried your workaround and didn't work. There is only 2 children so .Children[3] throws a null exception.

I tried putting this in the constructor after the InitializeComponent(); call.

Where should I put your line of code : in my DropDownList's class or each of my 2000 instantiation?

thanks

[Dimitar]

Hi Sebastien,

The code should be added after setting the auto-complete mode. You can add it to your custom implementation at the end of the constructor. It appears that we have a property for this as well so you can directly set it. Here is the code:

public DropDownList()
{
    PopupOpening += maindropDownList_PopupOpening;

    ShowItemToolTips = true;

    DropDownStyle = Telerik.WinControls.RadDropDownStyle.DropDown;
    EnableMouseWheel = false;

    ToolTipTextNeeded += DropDownList_ToolTipTextNeeded;
    VisualListItemFormatting += DropDownList_VisualListItemFormatting;
    KeyUp += DropDownList_KeyUp;

    if (DropDownListElement.AutoCompleteSuggest == null)
    {
        DropDownListElement.AutoCompleteSuggest = new AutoCompleteSuggestHelper(DropDownListElement);
    }


    PopupOpened += radDropDownList1_PopupOpened;
    PopupClosed += radDropDownList1_PopupClosed;

   this.DropDownListElement.AutoCompleteSuggest.DropDownList.MaxSize = new Size(1, 1);
}

Let me know how this works on your side.

Regards,
Dimitar
Progress Telerik

[sebastien]

Hi Dimitar,

the provided code didn't worked : set AutoSize =True (where control is used) and adding your MaxSize line.

 

The AutoSize makes the control go up to 24 in Height and I want a maximum of 21!

I tried setting a MaximumSize (0,21) in DropDownList's constructor, but I have the same result as before, which a line goes past down and the client sees it (image attached).

 

Any other clues?

 

thanks

 

[Dimitar]

Hi Sebastien,

I am not sure why this is not working on your side. I have attached my test project and this works there with yours and the default drop-down lists. 

In addition, I want to clarify that we are using a separate drop-down list element for the autocomplete functionality and only its popup is visible when needed. This is why its max size can be set to 1,1. 

Let me know if I am missing a specific case where this is not working. 

Regards,
Dimitar
Progress Telerik

[sebastien]

Hi Dimitar,

 

your provided code makes the DropDownList control's height at 24, not 21!

I added a MaxSize of (280,21) and you have the same problem as we do. Just like the last picture I send.

Bear in mind that we have more than 100 instances of this control so we would prefer to modify the control itself and not all the individual instances.

 

thanks

[Dimitar]

Hello Sebastien,

Yes, the mistake is mine (setting the autocomplete mode makes the editor even larger). Please note that by default all editors height in the Fluent theme is 24. To make the editor 21 you need to remove the padding and the margin of its elements. In this case, add the following two lines to the constructor of your custom control:

cboBasic.DropDownListElement.TextBox.Margin = new Padding(0);
cboBasic.DropDownListElement.ArrowButton.Padding = new Padding(2,0,2,0);

The attached image shows the result on my side as well. 

Do not hesitate to contact us if you have other questions.

 

Regards,
Dimitar
Progress Telerik

[sebastien]

That works!

 

thanks Dimitar