Telerik Forums / UI for Silverlight Forum / GridView /

How to specify width of GridViewComboBoxColumn drop down

Telerik UI for Silverlight
Resources Buy Try

17 posts, 1 answers

Scott Waye

168 posts

Member since:
Nov 2009

Posted 18 Aug 2010 Link to this post

The drop down's width varies as I scroll up and down to accomodate the widest visible width. This looks a bit ugly. How do I fix the width of the drop down. I see MinDropDownWidth for RadComboBox but it is read only:

public double MinDropDownWidth { get; }
Member of Telerik.Windows.Controls.RadComboBox

Thanks,

Scott
Maya
Admin

4062 posts
Posted 19 Aug 2010 Link to this post

Hi Scott Waye,
In order to escape the auto-sizing of the ComboBox, you need to set both the Width Property of theGridViewComboBoxColumn and the Width property of the ScrollViewer enclosing the ItemsPresenter:

<ScrollViewer x:Name="PART_ScrollViewer"

              BorderThickness="0"

              telerik:ScrollViewerExtensions.EnableMouseWheel="True"

              Padding="1 1 1 0" Grid.Row="1"

   telerik:StyleManager.Theme="{StaticResource Theme}"

              VerticalScrollBarVisibility="Auto"

              HorizontalScrollBarVisibility="Auto"

              Width="96">

   <ItemsPresenter/>

</ScrollViewer>

The Width property of the GridViewComboBoxColumn should be like:

<telerik:GridViewComboBoxColumn Header="Nationality"

              Width="100"

              DataMemberBinding="{Binding CountryID, Mode=TwoWay}"

   DisplayMemberPath="Name"     SelectedValueMemberPath="ID"

              SortMemberPath="Name" >

Here the deviation of 4 pixel is necessary as the EditTemplate is slightly different than the ComboBox shown. In case you want a Horizontal Scroll Bar, you may set the property of the ScrollViewer:

HorizontalScrollBarVisibility="Auto"

I am sending you a sample project illustrating the proposed solution.

Regards,
Maya
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

resizecombobox.zip
Scott Waye

168 posts

Member since:
Nov 2009

Posted 19 Aug 2010 Link to this post

HI thanks for that. Thats a lot of code :-)

However it doesn't seem to work for me. Change the Countries to this and scroll down, the drop down will get wider when you get to the last item:

        public static List<Country> GetCountries()
        {
            List<Country> countries = new List<Country>();
            countries.Add(new Country(1, "United "));
            countries.Add(new Country(2, "Germany"));
            countries.Add(new Country(3, "France"));
            countries.Add(new Country(4, "Spain"));
            countries.Add(new Country(5, "The Ne"));
            countries.Add(new Country(6, "The Ne"));
            countries.Add(new Country(7, "The Ne"));
            countries.Add(new Country(8, "The Ne"));
            countries.Add(new Country(9, "The Ne"));
            countries.Add(new Country(10, "The Ne"));
            countries.Add(new Country(11, "The Ne"));
            countries.Add(new Country(12, "The Ne"));
            countries.Add(new Country(13, "The Ne"));
            countries.Add(new Country(14, "The Ne"));
            countries.Add(new Country(15, "The Ne"));
            countries.Add(new Country(16, "The Ne"));
            countries.Add(new Country(17, "The Ne"));
            countries.Add(new Country(18, "The Ne"));
            countries.Add(new Country(19, "The Ne"));
            countries.Add(new Country(20, "The Ne"));
            countries.Add(new Country(21, "The Ne"));
            countries.Add(new Country(22, "The Netherlands is a long name"));


            return countries;
        }

Thanks,

Scott
Maya
Admin

4062 posts

Posted 20 Aug 2010 Link to this post

Hi Scott Waye,
I have implemented the exact code-snippet you sent about the definition of the GetCountries() method. However, everything works as expected on my side and the drop-down of the GridViewComboBoxColumn is not resized even when the "The Netherlands is a long name" item is visible. So, in order to be more helpful, I would need additional details about your project. Are you reproducing the issue in the sample project I have sent to you?

Best wishes,
Maya
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Scott Waye

168 posts

Member since:
Nov 2009
Posted 20 Aug 2010 Link to this post

Yes, I am using your example but just with different countries. I am on Windows 7 64-bit using IE8. Telerik controls version 2010 SP1. I've attached 2 screenshots.

Thanks,

Scott

tk2.png

tk1.png
Milan
Admin

1989 posts

Posted 23 Aug 2010 Link to this post

Hello Scott Waye,

Hum, that is very strange. Could you please try an alternative approach - remove all RadComboBox related styles and and a very simple one that targets RadComboBoxItem:

<Style TargetType="telerik:RadComboBoxItem">

<Setter Property="MaxWidth" Value="130"/>

</Style>

Kind regards,
Milan
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Scott Waye

168 posts

Member since:
Nov 2009

Posted 25 Aug 2010 Link to this post

Milan,

Thanks for that, I should really have seen that property, MaxWidth almost does the trick and combined with MinWidth I can get the desired result of a drop down that is wider than the column and does not resize as you scroll:

<Style TargetType="telerik:RadComboBoxItem">

<Setter Property="MaxWidth" Value="190"/>

<Setter Property="MinWidth" Value="190"/>

</Style>

Thanks again,

Scott
Pavel Pavlov
Admin

2039 posts

Posted 26 Aug 2010 Link to this post

Hi Scott,

Just a tought :
In case the combination of max and min width does the trick , I believe you can substitute both by just setting the Width property.

Kind regards,
Pavel Pavlov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Scott Waye

168 posts

Member since:
Nov 2009

Posted 05 Sep 2010 Link to this post

Yes, just the width on its own is fine. How can I selectively apply this style to a particular column, as it currently applies to all RadComboBoxItems? And if I do this, will I lose the ability to virtualize the drop down stack panel?

Thanks,
--
Scott
Maya
Admin

4062 posts

Posted 07 Sep 2010 Link to this post

Hi Scott Waye,

Once you set the "x:Key" value of the Style you want to use, you will escape from it being applied to all items of the ComboBox. Afterwards, you may apply it only to those elements you want by using its "Key".

Regards,
Maya
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Scott Waye

168 posts

Member since:
Nov 2009

Posted 08 Sep 2010 Link to this post

I presume you mean through something like Style="{StaticResource .....}".

If so, I'm not sure its as easy as that as the combo is in a grid so the RadComboBoxItem does not appear in the xaml and therefore I am unable to put a key on it. GridViewComboBoxColumn does not appear to have a property that lets me style the RadComboBoxItem.

THanks,

Scott
Answer
Maya
Admin

4062 posts

Posted 10 Sep 2010 Link to this post

Hello Scott Waye,
You may set the style in the Resources section as follows:

<UserControl.Resources>

    <Style x:Key="comboBoxItemStyle" TargetType="telerik:RadComboBoxItem">

            <Setter Property="Width" Value="70" />

    </Style>

    <Style x:Key="ComboStyle" TargetType="telerik:RadComboBox">

        <Setter Property="ItemContainerStyle" Value="{StaticResource comboBoxItemStyle}"/>

    </Style>

</UserControl.Resources>

Afterwards, you can set the EditorStyle Property of the GridViewComboBoxColumn you want:

<telerik:GridViewComboBoxColumn Header="Nationality"
   x:Name="Combo"

DataMemberBinding="{Binding CountryID, Mode=TwoWay}"

DisplayMemberPath="Name"
   EditorStyle="{StaticResource ComboStyle}"
   SelectedValueMemberPath="ID"
   SortMemberPath="Name"
   SortingState="Ascending">

All the best,
Maya
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Jeff

25 posts

Member since:
Feb 2009

Posted 30 Nov 2012 Link to this post

What if one wanted to have the width of the ComboBox bound to the width of the corresponding column. Could the column be reached through RelativeSource binding from the EditorStyle so that we could set the width dynamically according to the column's width? I'm pretty sure this can be done but it's not clear to me without reviewing the structure of the template what the binding will need to traverse to reach the column.
Jeff

25 posts

Member since:
Feb 2009

Posted 30 Nov 2012 Link to this post

I'm using the the Windows 7 theme on my RadGridView control and using this technique specified here reverts my theme for the particular column that I apply it to so that it is using the default theme instead with the yellow thumbs. How do I use this technique while preserving the theme that I've set on my RadGridView?

<telerik:RadGridView telerikControls:StyleManager.Theme="Windows7" ... />
Maya
Admin

4062 posts

Posted 03 Dec 2012 Link to this post

Hi Jeff,
You need to set the theme on which the custom style is based on:

<Style x:Key="comboBoxItemStyle" TargetType="telerik:RadComboBoxItem" telerik:StyleManager.BasedOn="Windows7">

                <Setter Property="Width" Value="70" />

            </Style>

            <Style x:Key="ComboStyle" TargetType="telerik:RadComboBox" telerik:StyleManager.BasedOn="Windows7">

                <Setter Property="ItemContainerStyle" Value="{StaticResource comboBoxItemStyle}"/>

            </Style>

Another possible approach is to set the ApplicationTheme:

StyleManager.ApplicationTheme = new Windows7Theme();

In this case you do not need to set the theme to RadGridView or the style for the combo box.

Regards,
Maya
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.
Jeff

25 posts

Member since:
Feb 2009

Posted 08 Dec 2012 Link to this post

Thanks Maya, I'm guessing that the second approach only works when developing a true WPF application? I happen to be working on a project that uses ElementHost to embed WPF user controls into an existing WinForms based product so I believe the first option you showed is probably my only option. If you have a chance could please confirm this?
Maya
Admin

4062 posts

Posted 10 Dec 2012 Link to this post

Hello Scrott,
Setting up the application theme would not necessarily break anything in your whole application, but probably the more appropriate thing to do here is to work with the first approach and set the theme to the style of the combo box.
Let me know in case you have any troubles with the implementation.

Greetings,
Maya
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

How to specify width of GridViewComboBoxColumn drop down

Scott Waye

Maya

Scott Waye

Maya

Scott Waye

Milan

Scott Waye

Pavel Pavlov

Scott Waye

Maya

Scott Waye

Maya

Jeff

Jeff

Maya

Jeff

Maya