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

Size of DropDown

35 Answers 1499 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
DenisCL
Top achievements
Rank 1
DenisCL asked on 18 Jan 2011, 12:09 PM
Hello,

I would like to make the dropdown size bigger in order to display fully all the items. (please see screenshot attached)

I've check the post on this forum but I didn't find a way to do it.
Do you have any advice to give for this?.

Thanks a lot
Regards

35 Answers, 1 is accepted

Sort by
0
Richard Slade
Top achievements
Rank 2
answered on 18 Jan 2011, 12:31 PM
Hello,

You'd need to set the MinSize property of the drop down to see al litems. In the code below, I assume that the items are standard size (16px height) and then add a little padding

for (int i = 0; i < 20; i++)
{
    RadListDataItem item = new RadListDataItem("Item " + i.ToString());
    this.radDropDownList1.Items.Add(item);
}
// assuming you have standard size items (16px height) then set min height based on #items x 16 + a little padding
this.radDropDownList1.DropDownMinSize = new Size(0, (this.radDropDownList1.Items.Count * 16) + 2);

Hope that helps
Richard
0
DenisCL
Top achievements
Rank 1
answered on 18 Jan 2011, 03:18 PM
Hello and thanks for help.
In fact I would like to make the dropdown's width bigger for letting user to see the full item name

Thanks for help
Regards
0
Accepted
Richard Slade
Top achievements
Rank 2
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
0
DenisCL
Top achievements
Rank 1
answered on 19 Jan 2011, 10:51 AM
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.


0
Accepted
Richard Slade
Top achievements
Rank 2
answered on 19 Jan 2011, 11:58 AM
Hello,

In order to change the display text, you can do this in the following way

this.radDropDownList1.TextChanged += new System.EventHandler(this.radDropDownList1_TextChanged);

private void radDropDownList1_TextChanged(object sender, EventArgs e)
{
    if (radDropDownList1.Text.Length > 20) // make up your own text length here...
    {
        radDropDownList1.DropDownListElement.TextBox.Text = radDropDownList1.Text.Substring(0, 16); //.. and here
    }
}

Hope that helps
Richard
0
DenisCL
Top achievements
Rank 1
answered on 19 Jan 2011, 12:13 PM
Thanks for your help.

Everything is fine now regarding these points

best regards
0
Richard Slade
Top achievements
Rank 2
answered on 19 Jan 2011, 12:16 PM
You're welcome. Glad I could be of help
Richard
0
Alastair Waddell
Top achievements
Rank 1
answered on 25 Jan 2011, 11:09 AM
The above works as a default size, but if I have 2 drop down lists, and one is smaller than the other, then setting the text to only show 16 (or however many) chars will look odd in the longer box.

I did try Me.RadDropDownList1.SelectText(0, 0) but that didnt seem to work.


a
0
Richard Slade
Top achievements
Rank 2
answered on 25 Jan 2011, 12:00 PM
Hello,

Can you clarify what you mean please? If you have two drop down lists, then you can handle the text changed event, and therefore the length in different event handlers.
Regards,
Richard
0
Alastair Waddell
Top achievements
Rank 1
answered on 27 Jan 2011, 01:14 AM
I am trying to implement a "generic" solution where it doesnt matter what size the dropdown list is, it always goes to the left of the text.

eg. the list contails "foo" "bar" "family" "really long string" and the width is set wide enough to show "family".
When "really long string" is selected the displayed text in the box is "y long string" when I would prefer to see "really long s"

Alastair

0
Richard Slade
Top achievements
Rank 2
answered on 27 Jan 2011, 11:03 AM
Hello,

You would need to have the text "unselected" to do this. For example

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

Hope that helps
Richard
0
Alastair Waddell
Top achievements
Rank 1
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
0
Richard Slade
Top achievements
Rank 2
answered on 28 Jan 2011, 10:19 AM
Hello,

Just add the same code as above to the LostFocus event.

Private Sub RadDropDownList1_LostFocus(ByVal sender As System.Object, ByVal e As EventArgs) Handles RadDropDownList1.LostFocus
    Me.RadDropDownList1.DropDownListElement.TextBox.TextBoxItem.SelectionStart = 0
    Me.RadDropDownList1.DropDownListElement.TextBox.TextBoxItem.SelectionLength = 0
End Sub

Hope that helps but let me know if you need more information
Richard
0
Alastair Waddell
Top achievements
Rank 1
answered on 30 Jan 2011, 11:55 PM
That has worked.

I must have looked at everything but the LostFocus event - go figure....


Thanks, Alastair
0
Richard Slade
Top achievements
Rank 2
answered on 30 Jan 2011, 11:59 PM
You're welcome. Glad that it helped you.
All the best
Richard
0
DenisCL
Top achievements
Rank 1
answered on 28 Feb 2011, 05:36 PM
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
0
Richard Slade
Top achievements
Rank 2
answered on 28 Feb 2011, 05:53 PM
Hello,

For information on the size of the AutoCompleteDropDown please see the answers in this forum post
Thanks
Richard
0
Richard Slade
Top achievements
Rank 2
answered on 01 Mar 2011, 04:52 PM
Hello DenisCL,

Whilst this probably wasn't the answer you were looking for, it it answered your question, please remember to mark as answer. If you need further help please let me know
Thanks
Richard
0
Ivan Todorov
Telerik team
answered on 03 Mar 2011, 09:33 AM
Hello Denis,

The forum thread Richard gave link to is about our RadTextBox control. The case with the RadDropDownList is a bit different e.g. you can change the size of the auto suggest drop-down. This forum thread explains how.

Hope this will help you. Should you have any further questions, do not hesitate to ask.

Greetings,
Ivan Todorov
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Richard Slade
Top achievements
Rank 2
answered on 03 Mar 2011, 09:51 AM
@Ivan - thanks for correcting me about this
@Denis - My apologies for giving you the wrong information
Richard
0
Bruno
Top achievements
Rank 1
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)
0
Peter
Telerik team
answered on 22 Mar 2011, 01:00 PM
0
Don
Top achievements
Rank 1
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
'=======================================================
0
Peter
Telerik team
answered on 06 May 2011, 10:00 AM
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.
0
Don
Top achievements
Rank 1
answered on 06 May 2011, 03:24 PM
I figured out what was causing my issue. We have some in-house controls we derive from, rather than the Windows controls, and the in-house derivation is affecting the dropdown behavior. I'll just have to remember to take this into account when building dropdowns and potentially some other control types. Thanks for the help, Peter and Richard!
0
Peter
Telerik team
answered on 11 May 2011, 09:10 AM
Hello Don,

Feel free to write back, we will be glad to help.

Best wishes,
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.
0
Suresh
Top achievements
Rank 1
answered on 01 Aug 2014, 06:20 AM
Hello,
could you make GridViewComboBoxColumn popup size bigger in a radgridview...
Thanks in advance
0
Ralitsa
Telerik team
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.
 
0
Suresh
Top achievements
Rank 1
answered on 04 Aug 2014, 11:06 AM
Thanks for the reply, I don't want to fix the width of dropdown item, because it can be vary, it should be increased based on the character length like normal dropdownlist item, is it possible...
  
0
Ralitsa
Telerik team
answered on 05 Aug 2014, 11:13 AM
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
 
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.
 
0
Suresh
Top achievements
Rank 1
answered on 06 Aug 2014, 04:29 AM
Thank you so much, it works well...
0
Rodolphe Iainh
Top achievements
Rank 1
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

 

0
Rodolphe Iainh
Top achievements
Rank 1
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

0
Rodolphe Iainh
Top achievements
Rank 1
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);
        }

0
Ralitsa
Telerik team
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.
Tags
DropDownList
Asked by
DenisCL
Top achievements
Rank 1
Answers by
Richard Slade
Top achievements
Rank 2
DenisCL
Top achievements
Rank 1
Alastair Waddell
Top achievements
Rank 1
Ivan Todorov
Telerik team
Bruno
Top achievements
Rank 1
Peter
Telerik team
Don
Top achievements
Rank 1
Suresh
Top achievements
Rank 1
Ralitsa
Telerik team
Rodolphe Iainh
Top achievements
Rank 1
Share this question
or