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

Grouping item inside ComboBoxColumn

6 Answers 109 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Guillaume
Top achievements
Rank 1
Guillaume asked on 16 Feb 2015, 05:08 PM
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?


6 Answers, 1 is accepted

Sort by
0
Dimitrina
Telerik team
answered on 17 Feb 2015, 02:30 PM
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.

 
0
Guillaume
Top achievements
Rank 1
answered on 17 Feb 2015, 07:24 PM
Hi, GroupStyle is an readOnly property, so I dont have acces to it.
0
Guillaume
Top achievements
Rank 1
answered on 17 Feb 2015, 08:14 PM
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>

0
Dimitrina
Telerik team
answered on 18 Feb 2015, 08:48 AM
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.

 
0
Guillaume
Top achievements
Rank 1
answered on 18 Feb 2015, 04:02 PM
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>
0
Guillaume
Top achievements
Rank 1
answered on 18 Feb 2015, 04:31 PM
I found out! I did not check the property right... I knew I was missing something.
VirtualizingPanel.IsVirtualizingWhenGrouping="True"

-Guillaume
Tags
GridView
Asked by
Guillaume
Top achievements
Rank 1
Answers by
Dimitrina
Telerik team
Guillaume
Top achievements
Rank 1
Share this question
or