Grouping items

[Abdullah Ahmed]

Hey guys,

I am trying to figure out how to display items grouped by category in the silverlight combobox control. The end result would look something like this. 

Group Header #1

Item #1

Item #2
Item #3

Item #4

Group Header #2

Item #1

Item #2
Item #3

Item #4

Group Header #2

Item #1

Item #2
Item #3

Item #4

The group headers wont be selectable (or do nothing if they are selected) and the combobox would also allow autocompletion for all the items there in. Is it possible to do this with the RadCombobox control? If so can you give me some pointers on how to approach and solve this problem?

Thanks in advance!

[Abdullah Ahmed]

I just spent some time looking around these forums and saw a few options for implementing grid inside the combobox and getting headers on each column, but I am not sure how I am going to make it so there's multiple headers in one single column.

Also I cant use dropdownbutton since I need the autocomplete functionality.

[Valeri Hristov]

Hi Abdullah,

Please, find attached a simple example how to group items in RadComboBox.

Greetings,
Valeri Hristov
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.

[Juliana]

Hi Valery,

The sample works great. And if I want the same functionality inside gridview, how can I bind SelectedValue of the combobox to DataMemberBinding of the column?

Best Regards,
Juliana.

[Pavel Pavlov]

Hi Juliana,

You can simply compy the XAML form Valery's sample  and place the combo inside the CellEditTemplate of a GridViewComboBox column.

In case you have troubles implementing this,  just let me know.

Regards,
Pavel Pavlov
the Telerik team

[Juliana]

Hello Pavel,

Yes, I have a problem with binding to selected value. Any recommendations?

Thanks,
Juliana

[Pavel Pavlov]

Hello Juliana,

When you place a RadComboBox in the CellEditTemplate,
the typical syntax would be :

<telerik:RadComboBox SelectedValue={Binding MyProperty, Mode=TwoWay} .../>

where you need to replace "MyProperty" , with the name of the property in your business object.

In case this does not help , you can paste me the implementation of your business object  and I will try to modify the example according to it.

Regards,
Pavel Pavlov
the Telerik team

[Juliana]

Hello again,

I write
 <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding AccommodationRoomID}" Header="Room" >
                    <telerikGrid:GridViewDataColumn.CellEditTemplate>
                        <DataTemplate>
                            <telerik:RadComboBox ItemsSource="{Binding Items.View.Groups, Converter={StaticResource FlattenGroupConverter}, Source={StaticResource detailsViewModel}}"
                                                 IsEditable="True" telerik:TextSearch.TextPath="RoomNumber"  SelectedValue="{Binding AccommodationRoomID}"
                                                 ItemContainerStyleSelector="{StaticResource ItemStyleSelector}" />
                        </DataTemplate>
                    </telerikGrid:GridViewDataColumn.CellEditTemplate>
                </telerikGrid:GridViewDataColumn>

and get a mistake when initializing the combobox

Attempt by method 'System.Linq.Expressions.Expression.CreateLambda(System.Type, System.Linq.Expressions.Expression, System.String, Boolean, System.Collections.ObjectModel.ReadOnlyCollection`1<System.Linq.Expressions.ParameterExpression>)' to access method 'System.Linq.Expressions.Expression`1<System.Func`2<MS.Internal.CollectionViewGroupInternal,MS.Internal.CollectionViewGroupInternal>>.Create(System.Linq.Expressions.Expression, System.String, Boolean, System.Collections.ObjectModel.ReadOnlyCollection`1<System.Linq.Expressions.ParameterExpression>)' failed.

   at System.RuntimeMethodHandle.PerformSecurityCheck(Object obj, RuntimeMethodHandleInternal method, RuntimeType parent, UInt32 invocationFlags)
   at System.RuntimeMethodHandle.PerformSecurityCheck(Object obj, IRuntimeMethodInfo method, RuntimeType parent, UInt32 invocationFlags)
   at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture, Boolean skipVisibilityChecks)
   at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture)
   at System.Linq.Expressions.Expression.CreateLambda(Type delegateType, Expression body, String name, Boolean tailCall, ReadOnlyCollection`1 parameters)
   at System.Linq.Expressions.Expression.Lambda(Expression body, String name, Boolean tailCall, IEnumerable`1 parameters)
   at System.Linq.Expressions.Expression.Lambda(Expression body, ParameterExpression[] parameters)
   at Telerik.Windows.Controls.BindingExpressionHelper.CreateGetValueFunc(Type itemType, String propertyPath)
   at Telerik.Windows.Controls.Selector.FindItemWithValue(Object value)
   at Telerik.Windows.Controls.Selector.SelectItemWithValue(Object value)
   at Telerik.Windows.Controls.Selector.CoerceSelectedValue(Object value)
   at Telerik.Windows.Controls.Selector.OnCoerceSelectedValue(DependencyObject sender, Object newValue)
   at Telerik.Windows.PropertyMetadata.CoerceValue(DependencyObject d, DependencyPropertyChangedEventArgs e, CoerceValueCallback callback)
   at Telerik.Windows.PropertyMetadata.<>c__DisplayClass1.<Create>b__0(DependencyObject d, DependencyPropertyChangedEventArgs e)
   at System.Windows.DependencyObject.RaisePropertyChangeNotifications(DependencyProperty dp, Object oldValue, Object newValue)
   at System.Windows.DependencyObject.UpdateEffectiveValue(DependencyProperty property, EffectiveValueEntry oldEntry, EffectiveValueEntry& newEntry, ValueOperation operation)
   at System.Windows.DependencyObject.RefreshExpression(DependencyProperty dp)
   at System.Windows.Data.BindingExpression.SendDataToTarget()
   at System.Windows.Data.BindingExpression.SourceAcquired()
   at System.Windows.Data.BindingExpression.System.Windows.IDataContextChangedListener.OnDataContextChanged(Object sender, DataContextChangedEventArgs e)
   at System.Windows.Data.BindingExpression.DataContextChanged(Object sender, DataContextChangedEventArgs e)
   at System.Windows.FrameworkElement.OnDataContextChanged(DataContextChangedEventArgs e)
   at System.Windows.FrameworkElement.OnTreeParentUpdated(DependencyObject newParent, Boolean bIsNewParentAlive)
   at System.Windows.DependencyObject.UpdateTreeParent(IManagedPeer oldParent, IManagedPeer newParent, Boolean bIsNewParentAlive, Boolean keepReferenceToParent)
   at MS.Internal.FrameworkCallbacks.ManagedPeerTreeUpdate(IntPtr oldParentElement, IntPtr parentElement, IntPtr childElement, Byte bIsParentAlive, Byte bKeepReferenceToParent, Byte bCanCreateParent)

BTW, when I remove SelectedValue="{Binding AccommodationRoomID}", combobox initializes fine, but no selected item is bound.

My business object is just a set of properties like  public int? AccommodationRoomID { get; set; }.

Best Regards,
Juliana

[Pavel Pavlov]

Hi Juliana,

While investigating the issue we have found it is a limitation of  RadComboBox. From a certain version  ahead the support for heterogenous items is limited. Since there is high demand lately for such support, I have talked to the team and we have decided to fix this for our next internal build.

So the solution would be to wait for the fresh dlls and upgrade once they are available in your Client.Net account.

I am thinking for a possible alternative - wrapping the items in a common object, so that all ( including the simulated groups) are of the same type. I am not sure this will work , but if it is urgent  ,we can give it a try.

All the best,
Pavel Pavlov
the Telerik team

[Juliana]

Hello Pavel,

For now we've decided to display items in another way (using gridview and its groups in the dropdown button content).
So let's wait for the upgrade.

Thanks,
Juliana

[Rahul]

Hi,

Great solution. However, group headers are lost when filtering is enabled and text search is done. Is it possible to retain group headers?
Require an urgent answer on this.

Thanks
Rahul Vig

[Rahul]

<-- Resolved-->
I am not using generic filtering property of control. On text change I am simply refining my source object assigned to the CollectionViewSource property. Hope this is helpful to others.

[Maruti]

I have some problem when trying to bind the "DataItem" class (as shown in above demo) from the WCF services the Convert() methods return error, thats why ComboBox is not populating with data. Please give the solution how to achieve this type combobox Grouping when using the DataBinding from WCF returned data.

[Rahul]

I did it this way - Keep the original WCF Data in a property but do not bind it to the RadComboBox. Assign it to the group property of another property of type CollectionViewSource as shown below. Set group descriptor for the CollectionViewSource property. When you receive data from WCF Service assign the data to the source.

public List<ReferenceDataType> ReferenceSource { get; set; }
public CollectionViewSource Reference { get; set; }
SeriesReference.GroupDescriptions.Add(new PropertyGroupDescription("Type"));
SeriesReference.Source = ReferenceSource;

On XAML side, bind the ItemsSource and ItemContainerStyleSelector property to static references as below

<telerik:RadComboBox ItemsSource="{Binding Reference.View.Groups, Converter={StaticResource FlattenGroupConverter}}"
ItemContainerStyleSelector="{StaticResource ItemStyleSelector}"

Set the static references as given below -

 

<helpers:FlattenGroupConverter x:Key="FlattenGroupConverter"/>
<helpers:ItemStyleSelector x:Key="ItemStyleSelector">
<helpers:ItemStyleSelector.GroupStyle>
<Style TargetType="ContentControl">
<Setter Property="IsEnabled" Value="False" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</helpers:ItemStyleSelector.GroupStyle>
<helpers:ItemStyleSelector.ItemStyle>
<Style TargetType="ContentControl">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock FontWeight="Bold" FontSize="7" FontFamily="Arial" Text="{Binding DisplayData}" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</helpers:ItemStyleSelector.ItemStyle>
</helpers:ItemStyleSelector>

Converter class is as follows -

public class FlattenGroupConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return (value as IEnumerable<object>).SelectMany(g => new object[] { g }.Union((g as CollectionViewGroup).Items));
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}

[W]

Hi Valeri Hristov,

The example worked well.

But why it no worked when the solution use Implicit Styles.

[Ivan Ivanov]

Hi,

I adapted the initial project to work with implicit style. I am attaching the modified version.

Regards,
Ivan Ivanov
Telerik

[W]

That's greate.It worked well.

Thanks a lot.