Grouping item inside ComboBoxColumn

[Guillaume]

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?

[Dimitrina]

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

 

 

[Guillaume]

Hi, GroupStyle is an readOnly property, so I dont have acces to it.

[Guillaume]

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>

[Dimitrina]

Hi,

Thank you for sharing the approach with the community. 

Regards,
Dimitrina
Telerik

 

 

[Guillaume]

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>

[Guillaume]

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

-Guillaume