How to specify width of GridViewComboBoxColumn drop down

17 posts, 1 answers
  1. Scott Waye
    Scott Waye avatar
    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
  2. Maya
    Admin
    Maya avatar
    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
  3. Scott Waye
    Scott Waye avatar
    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
  4. Maya
    Admin
    Maya avatar
    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
  5. Scott Waye
    Scott Waye avatar
    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
  6. Milan
    Admin
    Milan avatar
    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
  7. Scott Waye
    Scott Waye avatar
    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

     

  8. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    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
  9. Scott Waye
    Scott Waye avatar
    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


  10. Maya
    Admin
    Maya avatar
    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
  11. Scott Waye
    Scott Waye avatar
    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
  12. Answer
    Maya
    Admin
    Maya avatar
    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
  13. Jeff
    Jeff avatar
    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.
  14. Jeff
    Jeff avatar
    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" ... />
  15. Maya
    Admin
    Maya avatar
    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.

  16. Jeff
    Jeff avatar
    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?
  17. Maya
    Admin
    Maya avatar
    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.

Back to Top