Grouping item inside ComboBoxColumn

7 posts, 0 answers
  1. Guillaume
    Guillaume avatar
    6 posts
    Member since:
    Feb 2015

    Posted 16 Feb 2015 Link to this post

    Hi, I have been searching the web to find an answer and I didn't found anything.

    I want to group my itemsource by GroupName inside the GridViewComboBoxColumn but I don't seem to find a way to do it.
    I achieve grouping via GroupStyle with a simple ComboBox.

    See attached png.

    Also, if I want to filter GridViewComboBoxColumn when I add an itemTemplate to display 2 value, how can I filter it?


  2. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 17 Feb 2015 Link to this post

    Hello,

    The editor of GridViewComboBoxColumn is RadComboBox. It is possible to extend the functionality exposed by the column applying a style targeting the RadComboBox element and set is as EditorStyle of GridViewComboBoxColumn. You can also check this help article for further reference.

    Regards,
    Dimitrina
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Guillaume
    Guillaume avatar
    6 posts
    Member since:
    Feb 2015

    Posted 17 Feb 2015 in reply to Dimitrina Link to this post

    Hi, GroupStyle is an readOnly property, so I dont have acces to it.
  4. Guillaume
    Guillaume avatar
    6 posts
    Member since:
    Feb 2015

    Posted 17 Feb 2015 in reply to Dimitrina Link to this post

    So I found a solution to fix this problems,  I create a class that iheritance of GridViewComboBoxColumn

    Which contains an property GroupStyle and create a CellTemplate.

    C# Class
    public class GridViewComboBoxColumnGroupStyle : GridViewComboBoxColumn
        {
            private ObservableCollection<GroupStyle> _groupStyle = new ObservableCollection<GroupStyle>();
            public ObservableCollection<GroupStyle> GroupStyle
            {
                get { return _groupStyle; }
            }
     
            public override FrameworkElement CreateCellEditElement(GridViewCell cell, object dataItem)
            {
                RadComboBox objBox;
                objBox = (RadComboBox)base.CreateCellEditElement(cell, dataItem);
                foreach (GroupStyle group in _groupStyle)
                {
                    objBox.GroupStyle.Add(group);
                }
                return objBox;
            }
        }
    XAML
    LocalRessource
    <local:GridViewComboBoxColumnGroupStyle x:Key="GridViewComboBoxColumnGroupStyle"/>
    Using it inside GridView
    <local:GridViewComboBoxColumnGroupStyle Header="Essaie" Width="250"
                                                           UniqueName="ExpenseAccount"
                                                           DataMemberBinding="{Binding ExpenseAccount,Mode=TwoWay}"
                                                           ItemsSource="{Binding Path=DataContext.ExpenseAccountListView,
                                                           RelativeSource={RelativeSource Mode=FindAncestor,
                                                           AncestorType={x:Type telerik:RadGridView}}}" IsComboBoxEditable="True"
                                                           FilterMemberPath="Name" AllowDrop="True" >
                               <local:GridViewComboBoxColumnGroupStyle.GroupStyle>
                                   <GroupStyle>
                                       <GroupStyle.HeaderTemplate>
                                           <DataTemplate>
                                               <TextBlock Text="{Binding Name}"/>
                                           </DataTemplate>
                                       </GroupStyle.HeaderTemplate>                            
                                   </GroupStyle>
                               </local:GridViewComboBoxColumnGroupStyle.GroupStyle>
                           </local:GridViewComboBoxColumnGroupStyle>

  5. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 18 Feb 2015 Link to this post

    Hi,

    Thank you for sharing the approach with the community. 

    Regards,
    Dimitrina
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Guillaume
    Guillaume avatar
    6 posts
    Member since:
    Feb 2015

    Posted 18 Feb 2015 Link to this post

    Hi, I have found a new problem with the RadComboBox which I dont seem to know why it doenst work. I dunno if I should post a new thread but ill post the problem here.

    I found a weird behavior of the ScrollBar when grouping items inside RadComboBox.
    I can only see 10items of each groupkey.
    If I had an MaxDropDownHeight = 1000 I can see more elements inside each group.
    I tried to replicate this with ComboBox and the scrolling work perfectly fine and I can see all the elements inside the dropDownList.

    I have attached screenshot of actual behavior for RadComboBox and ComboBox
    PopulateData
    private void PopulateXAS()
           {
               ListCollectionView listPaymentAccount;
               List<GroupedAccountInfo> listGrouped = new List<GroupedAccountInfo>();
               GroupedAccountInfo gp = new GroupedAccountInfo{ Amount="100", GroupKey="Allo",GroupName="Salut", Id="1", Name="LES ROIS LES ROIS LES ROIS"};
               GroupedAccountInfo gp1 = new GroupedAccountInfo{ Amount="100", GroupKey="Yup",GroupName="Salut", Id="1", Name="LES ASD LES ASD LES ASD"};
               GroupedAccountInfo gp3 = new GroupedAccountInfo { Amount = "100", GroupKey = "MOOO", GroupName = "Salut", Id = "1", Name = "LES MOO LES MOO LES MOO" };
               for(int i=0;i<30;i++)
               {
                   listGrouped.Add(gp);
               }
               for (int i = 0; i < 30; i++)
               {
                   listGrouped.Add(gp1);
               }
               for (int i = 0; i < 30; i++)
               {
                   listGrouped.Add(gp3);
               }
     
               listPaymentAccount = new ListCollectionView(listGrouped);
               listPaymentAccount.GroupDescriptions.Add(new PropertyGroupDescription("GroupKey"));
               ExpenseAccountListView2 = listPaymentAccount;
            
           }
    Xaml RadComboBox
    <telerik:RadComboBox Grid.Column="1" Width="150" ItemsSource="{Binding ExpenseAccountListView2,Mode=TwoWay}"  DisplayMemberPath="Name">
                   <telerik:RadComboBox.GroupStyle>
                       <GroupStyle>
                           <GroupStyle.HeaderTemplate>
                               <DataTemplate>
                                   <TextBlock Text="{Binding Name}"/>
                               </DataTemplate>
                           </GroupStyle.HeaderTemplate>
                       </GroupStyle>
                   </telerik:RadComboBox.GroupStyle>
               </telerik:RadComboBox>
  7. Guillaume
    Guillaume avatar
    6 posts
    Member since:
    Feb 2015

    Posted 18 Feb 2015 in reply to Guillaume Link to this post

    I found out! I did not check the property right... I knew I was missing something.
    VirtualizingPanel.IsVirtualizingWhenGrouping="True"

    -Guillaume
Back to Top