Size of DropDown in UI for WinForms

This is a migrated thread and some comments may be shown as answers.

Size of DropDown

35 Answers 484 Views

DropDownList

This is a migrated thread and some comments may be shown as answers.

35 Answers, 1 is accepted

Accepted

answered on 18 Jan 2011, 09:56 PM

Hello,

This will dynamically resize the popup element of the drop down according to the widest text length in your drop down.

1: Add in a mix of items, and declare the PopUpOpened event handler

for (int i = 0; i < 5; i++)

{

RadListDataItem item = new RadListDataItem("Some short strings " + i.ToString());

this.radDropDownList1.Items.Add(item);

}

for (int i = 0; i < 20; i++)

{

RadListDataItem item = new RadListDataItem("Item with long text string that is wider than the drop down " + i.ToString());

this.radDropDownList1.Items.Add(item);

}

this.radDropDownList1.DropDownListElement.PopupOpened += new EventHandler(DropDownListElement_PopupOpened);

2: Declare a local variable that will hold the width of the widest item

private int m_Widest = 0;

3: When the pop up opens, resize it according to the widest item and height of all the items inthe drop down

private void DropDownListElement_PopupOpened(Object sender, EventArgs e)

{

DefaultListControlStackContainer container = (DefaultListControlStackContainer)this.radDropDownList1.DropDownListElement.ListElement.Children[0];

foreach (RadListVisualItem item in container.Children)

{

Telerik.WinControls.Primitives.TextParams tParams = new Telerik.WinControls.Primitives.TextParams();

tParams.text = item.Text;

if (item.GetTextSize(tParams).Width > m_Widest)

{

m_Widest = item.GetTextSize(tParams).ToSize().Width;

}

this.radDropDownList1.Popup.MinimumSize = new Size(m_Widest, (this.radDropDownList1.Items.Count * 16) + 2);

}

Hope that helps
Richard

answered on 19 Jan 2011, 10:51 AM

combo-disabled.JPG

Hello and thx for this code.

It works well but I had to add a delta with very long items texts.

Here is a little point on combo I would like to fix too:
When my combo is disabled, it's displayed like on screenshot attached (combo disabled.jpg)
I traced in yellow the problem. Basically the selected item text is "Société banque populaire".
I simply want to display "Société banque pop..." instead of "e banque populaire ".

Do you have any advices?

Thanks a lot.

Accepted

answered on 28 Jan 2011, 12:12 AM

Still no good.

I have created a simple demo to show you the behaviour. (I can only attach images - so here is the code)
i am using VS2010 with 4.0 framework and Telerik Controls 2010.3.10.1215

Create new windows app - add a RadDropdownlist and a button to the form set the size of the RadDropdown to 147, 21 and use the following code

Public Class Form1

Dim comboItems As List(Of ComboBoxItems)

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        Me.RadDropDownList1.DisplayMember = "Description"
        Me.RadDropDownList1.ValueMember = "ID"
        Me.RadDropDownList1.DataSource = comboItems

End Sub

Public Sub New()

InitializeComponent()

        comboItems = New List(Of ComboBoxItems)
        comboItems.Add(New ComboBoxItems With {.ID = 1, .Description = "Test"})
        comboItems.Add(New ComboBoxItems With {.ID = 2, .Description = "Silly String"})
        comboItems.Add(New ComboBoxItems With {.ID = 3, .Description = "Sometimes we have long text"})
        comboItems.Add(New ComboBoxItems With {.ID = 4, .Description = "I dont get paid enough"})

End Sub

Private Sub RadDropDownList1_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As Telerik.WinControls.UI.Data.PositionChangedEventArgs) Handles RadDropDownList1.SelectedIndexChanged

Me.RadDropDownList1.DropDownListElement.TextBox.TextBoxItem.SelectionStart = 0
Me.RadDropDownList1.DropDownListElement.TextBox.TextBoxItem.SelectionLength = 0

End Sub

End Class

Class ComboBoxItems
Property ID As Integer
Property Description As String
End Class

Select the 3rd item in the list and click the button - so the combo loses focus.

Alastair

answered on 28 Feb 2011, 05:36 PM

screenshot.png

Hello Richard,

I come back to you regarding the size of DropDown.
EVerythign is fine for this code, but when my combobox autocompleteMode property is set to suggestAppend, the dropdown seems still small.

I looked for some events which could help but I didn't find anything good.
How can I resize this suggestappend dropdown, which seems to not be the same as normal dropdown?
This dropdown looks different, it's resizable (see screenshot attached)

Thanks for your help

answered on 17 Mar 2011, 11:24 AM

I set the DropDownMinSize to the size I want, showing 20 items in the list. This works just fine when I press the arrow to open the dropdown. So far, so good.

But I also have set the AutoCompleteMode to SuggestAppend. This will automatically open the dropdown when I start typing a value in the box. But in this case, the DropDownMinSize does not seem to be applied. It only shows 6 items in the list. Furthermore a resize option is available in the list allthough DropDownSizingMode is set to "None".

Is there a way to keep the appearance of the AutoCompleteSuggest:DropDownList equal to the main DropDownList?

(I also posted this in the "Autocomplete list size" thread)

answered on 03 May 2011, 07:43 PM

I tried the autosizing code in VB (translated using the code converter on the Telerik site) and it worked fairly well, except for one quirk. I had to open the dropdownlist twice for the width to expand properly. I got around this by using the exact same code to handle the PopupOpening and PopupOpened events. I'm not sure if this is just do to something in our environment here, if this is just a VB thing or if it is a bug.

Here is the translated code from Richard's C# suggestion:

Private Sub DropDownListElement_PopupOpened(sender As [Object], e As EventArgs)

Dim container As DefaultListControlStackContainer = DirectCast(Me.radDropDownList1.DropDownListElement.ListElement.Children(0), DefaultListControlStackContainer)

For Each item As RadListVisualItem In container.Children

Dim tParams As New Telerik.WinControls.Primitives.TextParams()

tParams.text = item.Text

If item.GetTextSize(tParams).Width > m_Widest Then

m_Widest = item.GetTextSize(tParams).ToSize().Width

End If

Next

Me.radDropDownList1.Popup.MinimumSize = New Size(m_Widest, (Me.radDropDownList1.Items.Count * 16) + 2)

End Sub

'=======================================================

'Service provided by Telerik (www.telerik.com)

'Conversion powered by NRefactory.

'Twitter: @telerik, @toddanglin

'Facebook: facebook.com/telerik

'=======================================================

answered on 06 May 2011, 10:00 AM

AutosizingDropDown.zip

Hi Don,

Thank you for the question.

I tested the case using our latest release - Q1 2011 SP1 and I was not able to reproduce the issue.
Could you please try to modify the attached project in order to reproduce the experienced behavior? Please note that you should open a new support ticket in order to be able to attach files.

Thank you for your time and cooperation.

I am looking forward to your reply.

All the best,
Peter
the Telerik team

Q1’11 SP1 of RadControls for WinForms is available for download; also available is the Q2'11 Roadmap for Telerik Windows Forms controls.

answered on 04 Aug 2014, 10:55 AM

Hi Suresh,

Thank you for contacting us.

You need to subscribe to the CellEditorInitialized event and change the DropDownWidth and DropDownHeight. Please take a look at the following code snippet:

void radGridView1_CellEditorInitialized(object sender, GridViewCellEventArgs e)

{

if (e.ActiveEditor is RadDropDownListEditor)

{

RadDropDownListEditor editor = e.ActiveEditor as RadDropDownListEditor;

RadDropDownListEditorElement element = (RadDropDownListEditorElement)editor.EditorElement;

element.DropDownWidth = 150;

element.DropDownHeight = 100;

}

Should you have further questions, I would be glad to help.

Regards,
Ralitsa
Telerik

Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.

answered on 05 Aug 2014, 11:13 AM

385198-RadGridView-Modified.zip

Hi Suresh,

Thank you for writing back.

Yes, you can use the same approach which my colleague provided in this forum thread on 6th May 2011. I also attached you the modified sample project.

Should you have further questions, I would be glad to help.

Regards,
Ralitsa
Telerik

answered on 29 Jun 2016, 12:08 PM

Hello,

I'm DenisCL. Since I've lost my ids, i'll post from now with this account.

I have a simple question, regarding the code you previously gave me for the dropdownlist max sized popup.

I need the same but for ComboboxColumn in radgridview !

I found how to do it, but I find difficulties to get the current dropdownlist in the radgridview. I saw we can use the activeEditor for getting the elementEditor and then go ahead.

But the active editor is null, and I 'm stuck.

Any ideas?

Here is my code

RadDropDownListEditor editor = radGridView1.EditorManager.ActiveEditor as RadDropDownListEditor;
if (editor != null)
{
_element = editor.EditorElement as RadDropDownListEditorElement;
if (_element != null)
{
_element.PopupOpened += element_PopupOpened;
}
}

Can you tell me how to access to the dropdownlist in a cell properly please?

thanks

answered on 29 Jun 2016, 12:09 PM

Hello,
I'm DenisCL. Since I've lost my ids, i'll post from now with this account.
I have a simple question, regarding the code you previously gave me for the dropdownlist max sized popup.
I need the same but for ComboboxColumn in radgridview !
I found how to do it, but I find difficulties to get the current dropdownlist in the radgridview. I saw we can use the activeEditor for getting the elementEditor and then go ahead.
But the active editor is null, and I 'm stuck.
Any ideas?

Here is my code

RadDropDownListEditor editor = radGridView1.EditorManager.ActiveEditor as RadDropDownListEditor;
if (editor != null)
{
_element = editor.EditorElement as RadDropDownListEditorElement;
if (_element != null)
{
_element.PopupOpened += element_PopupOpened;
}
}

Can you tell me how to access the dropdownlist in a cell properly please?
Thanks

answered on 29 Jun 2016, 12:30 PM

Sorry for double post...

I could finally obtain what I need.

here is the code

This first function register events on popup and keypress asap the editor is initialized

void radGridView1_CellEditorInitialized(object sender, GridViewCellEventArgs e)
{
if (_element == null)
{
var editor = radGridView1.EditorManager.ActiveEditor as RadDropDownListEditor;
if (editor != null)
{
_element = editor.EditorElement as RadDropDownListEditorElement;
if (_element != null)
{
_element.PopupOpened += element_PopupOpened;
_element.KeyPress += _element_KeyPress;
}

}
}
}

Then when we open the dropdownlist, it checks the width of every item and take the biggest width. I add 50 for including scrollbar width

void element_PopupOpened(object sender, EventArgs e)
{
SetDropDownSize();
}

private void SetDropDownSize()
{
int choixPlusLarge = _element.Items.Select(item => TextRenderer.MeasureText(item.Text, item.Font).Width).Concat(new[] {0}).Max() + 40;
_element.Popup.MinimumSize = new Size(choixPlusLarge, _element.Popup.Height);
}

answered on 30 Jun 2016, 01:30 PM

Hi Rodolphe,

Thank you for contacting us.

The CellEditorInitialized event is fired when an editor element of a cell is initialized and visible. One of the event arguments gives information for the active editor. If RadGridView contains more than one GridViewComboBoxColumn, you can check for which column the event is fired. Please refer to the code snippet below how to achieve it:

RadDropDownListEditor editor;

RadDropDownListEditorElement listEditorElement;

void radGridView1_CellEditorInitialized(object sender, GridViewCellEventArgs e)

{

if (e.ColumnIndex == 0 && e.RowIndex == 2)

{

if (e.ActiveEditor is RadDropDownListEditor)

{

editor = e.ActiveEditor as RadDropDownListEditor;

listEditorElement = (RadDropDownListEditorElement)editor.EditorElement;

//listEditorElement.DropDownWidth = 150;

//listEditorElement.DropDownHeight = 100;

listEditorElement.PopupOpened += listEditorElement_PopupOpened;

}

If this is not what you want to achieve, I would kindly ask you to send me a more detailed explanation about your case. Any additional materials like code snippet or sketches would also be helpful.

Let me know if I can assist you further.

Regards,
Ralitsa
Telerik

Check out the Windows Forms project converter, which aids the conversion process from standard Windows Forms applications written in C# or VB to Telerik UI for WinForms.For more information check out this blog post and share your thoughts.