CollectionEditors

CollectionEditor and CollectionEditorPicker are editor controls that provide UI for editing collections and their items. Currently they are used in the domain of RadPropertyGrid as default editors for IEnumerable type-compatible properties, but they can be successfully used out of this context as standalone editors:

Example 1: Defining CollectionEditor

• XAML

<Grid xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"> 
    <telerik:CollectionEditor Source="{Binding Players}"  
                          Header="Players" /> 
</Grid> 

If you want CollectionEditor to work with a custom collection, then the edited collection type should implement ICollectionView and IEditableCollectionView interfaces.

Dependencies

Both of them are located in the Telerik.Windows.Controls.Data assembly (Telerik.Windows.Controls.Data.PropertyGrid namespace) and depend on the following assemblies:

• Telerik.Windows.Data

• Telerik.Windows.Controls

• Telerik.Windows.Controls.Data

• Telerik.Windows.Control.Input

Internal Structure

CollectionEditor relies on the IEditableCollectionView interface. In case that the edited collection type implements ICollectionView and IEditableCollectionView, its custom implementation is utilized and if it does not, an instance of QueryableCollectionView is used instead.

The following listed commands, defined in the CollectionEditorCommands class, invoke their IEditableCollectionView method counterparts, when they are executed:

• MoveCurrentToNext

• MoveCurrentToPrevious

• AddNew

• Delete

Customizing Commands

It is possible to customize the default commands for the CollectionEditor and the CollectionEditorPicker in a MVVM-friendly way. The following examples are using the CollectionEditor control but the same changes can be applied for the CollectionEditorPicker as well.

“Execute logic” methods

The methods listed below identify the logic that is executed when a certain command’s invocation takes place.

Example 3: CollectionEditor's executable commands

• C#
• VB.NET

void MoveCurrentToNext(); 
void MoveCurrentToPrevious(); 
void Delete(); 
void AddNew(); 

Sub MoveCurrentToNext() 
Sub MoveCurrentToPrevious() 
Sub Delete() 
Sub AddNew() 

“Can-execute logic” methods

With the help of those methods you can identify whether a certain command can be executed or not.

Example 4: CollectionEditor's "can-execute" methods

• C#
• VB.NET

bool CanMoveCurrentToNextExecute(); 
bool CanMoveCurrentToPreviousExecute(); 
bool CanDeleteExecute(); 
bool CanAddNewExecute(); 

Function CanMoveCurrentToNextExecute() As Boolean 
Function CanMoveCurrentToPreviousExecute() As Boolean 
Function CanDeleteExecute() As Boolean 
Function CanAddNewExecute() As Boolean 

Designing a custom CommandProvider

The first step is to create your own class that inherits from CollectionNavigatorBaseCommandProvider:

Example 5: Creating a class that provides the custom commands

• C#
• VB.NET

public class CustomCommandProvider : CollectionNavigatorBaseCommandProvider 
{ 
    public CustomCommandProvider() : base(null) 
    { 
    } 
    public CustomCommandProvider(CollectionNavigatorBase collectionEditor) 
        : base(collectionEditor) 
    { 
        this.CollectionNavigator = collectionEditor; 
    } 
} 

Public Class CustomCommandProvider 
    Inherits CollectionNavigatorBaseCommandProvider 
    Public Sub New() 
        MyBase.New(Nothing) 
    End Sub 
    Public Sub New(ByVal collectionEditor As CollectionNavigatorBase) 
        MyBase.New(collectionEditor) 
        Me.CollectionNavigator = collectionEditor 
    End Sub 
End Class 

Those commands, which logic is up to get customized, should have their corresponding methods overridden. In the following example we will customize: MoveCurrentToNext, MoveCurrentToPrevious.

MoveCurrentToNext and MoveCurrentToPrevious

In case you have a requirement to ask for the customer`s approval when moving through items, you need to update the commands as in the following examples:

Example 6: Overriding the default commands

• C#
• VB.NET

public override void MoveCurrentToNext() 
{ 
    MessageBoxResult result = MessageBox.Show("MoveCurrentToNext ?", "MoveCurrentToNext", MessageBoxButton.OKCancel); 
    if (result == MessageBoxResult.OK) 
    { 
        this.CollectionNavigator.MoveCurrentToNext(); 
    } 
} 
public override void MoveCurrentToPrevious() 
{ 
    MessageBoxResult result = MessageBox.Show("MoveCurrentToPrevious ?", "MoveCurrentToPrevious", MessageBoxButton.OKCancel); 
    if (result == MessageBoxResult.OK) 
    { 
        this.CollectionNavigator.MoveCurrentToPrevious(); 
    } 
} 

Public Overrides Sub MoveCurrentToNext() 
    Dim result As MessageBoxResult = MessageBox.Show("MoveCurrentToNext ?", "MoveCurrentToNext", MessageBoxButton.OKCancel) 
    If result = MessageBoxResult.OK Then 
        Me.CollectionNavigator.MoveCurrentToNext() 
    End If 
End Sub 
Public Overrides Sub MoveCurrentToPrevious() 
    Dim result As MessageBoxResult = MessageBox.Show("MoveCurrentToPrevious ?", "MoveCurrentToPrevious", MessageBoxButton.OKCancel) 
    If result = MessageBoxResult.OK Then 
        Me.CollectionNavigator.MoveCurrentToPrevious() 
    End If 
End Sub 

The last thing to be done is to set CommandProvider Property of the CollectionEditor to be the newly-created CustomCommandProvider class:

Example 7: Assigning the CommandProvider

• XAML

<telerik:CollectionEditor x:Name="CollectionEditor" 
                  Source="{Binding Employees}"/> 

Example 8: Assigning the CommandProvider

• C#
• VB.NET

this.CollectionEditor.CommandProvider = new CustomCommandProvider(this.CollectionEditor); 

Me.CollectionEditor.CommandProvider = New CustomCommandProvider(Me.CollectionEditor) 

Modifying the methods will result in the following action when trying to move to the next item:

Add/Remove Items

CollectionEditor allows you to add and remove items to the underlying collection through the Add and Remove buttons. The availability of this functionality relies on the type of the bound collection and whether it supports such operations. Figure 1 and Figure 2 show the state of the buttons when the CollectionEditor is bound to an ObservableCollection and an Array respectively.

The business object should expose a default constructor in order to have the "Add" button enabled.

Figure 1: CollectionEditor bound to a collection that supports add/remove functionalities

Figure 2: CollectionEditor bound to a collection that does not support add/remove functionalities