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

How to specify width of GridViewComboBoxColumn drop down

16 Answers 285 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Scott Waye
Top achievements
Rank 2
Veteran
Iron
Scott Waye asked on 18 Aug 2010, 09:57 PM
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

16 Answers, 1 is accepted

Sort by
0
Maya
Telerik team
answered on 19 Aug 2010, 01:46 PM
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
0
Scott Waye
Top achievements
Rank 2
Veteran
Iron
answered on 19 Aug 2010, 09:34 PM
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
0
Maya
Telerik team
answered on 20 Aug 2010, 08:15 AM
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
0
Scott Waye
Top achievements
Rank 2
Veteran
Iron
answered on 20 Aug 2010, 09:06 PM
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
0
Milan
Telerik team
answered on 23 Aug 2010, 01:47 PM
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
0
Scott Waye
Top achievements
Rank 2
Veteran
Iron
answered on 25 Aug 2010, 09:09 PM
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

 

0
Pavel Pavlov
Telerik team
answered on 26 Aug 2010, 06:43 AM
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
0
Scott Waye
Top achievements
Rank 2
Veteran
Iron
answered on 05 Sep 2010, 11:22 AM
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


0
Maya
Telerik team
answered on 07 Sep 2010, 09:29 AM
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
0
Scott Waye
Top achievements
Rank 2
Veteran
Iron
answered on 08 Sep 2010, 09:27 PM
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
0
Accepted
Maya
Telerik team
answered on 10 Sep 2010, 01:07 PM
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
0
Jeff
Top achievements
Rank 1
answered on 30 Nov 2012, 09:47 PM
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.
0
Jeff
Top achievements
Rank 1
answered on 30 Nov 2012, 10:00 PM
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" ... />
0
Maya
Telerik team
answered on 03 Dec 2012, 08:21 AM
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.

0
Jeff
Top achievements
Rank 1
answered on 08 Dec 2012, 05:32 PM
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?
0
Maya
Telerik team
answered on 10 Dec 2012, 07:44 AM
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.

Tags
GridView
Asked by
Scott Waye
Top achievements
Rank 2
Veteran
Iron
Answers by
Maya
Telerik team
Scott Waye
Top achievements
Rank 2
Veteran
Iron
Milan
Telerik team
Pavel Pavlov
Telerik team
Jeff
Top achievements
Rank 1
Share this question
or