How to specify width of GridViewComboBoxColumn drop down

[Scott Waye]

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]

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

[Scott Waye]

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]

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

[Scott Waye]

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

[Milan]

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

[Scott Waye]

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]

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

[Scott Waye]

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]

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

[Scott Waye]

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

[Maya]

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

[Jeff]

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]

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]

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

[Jeff]

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]

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