Silverlight Telerik Editable GridView with MVVM – Part 3

This is the final part of the Telerik Editable GridView Series. In Part 1 I talked about the Model and in Part 2 I covered the View Model. In this post I will be discussing the View portion of the MVVM pattern.

I will start out with the xaml for the GridView.

[sourcecode language=’vb’]

xmlns:telerikGridView=”clr-namespace:Telerik.Windows.Controls;
assembly=Telerik.Windows.Controls.GridView”
xmlns:telerikData=”clr-namespace:Telerik.Windows.Controls;
assembly=Telerik.Windows.Controls.Data”

[/sourcecode]

[sourcecode language=’xml’]





















[/sourcecode]

I bind the GridView item source to the “EmployeeList” in the View Model. Each column is bound to a property on the Employee Model. Since my model implements System.ComponentModel.INotifyPropertyChanged, the GridView is updated each time any property that I am bound to on the model changes. I used a templated column to represent the “IsActive” boolean column. For the templated column I specify binding in each of the cell templates and on the column. The binding on the column is used by the GridView for filtering and sorting.

Next, I will go through the code-behind of the View.

[sourcecode language=’vb’]

Partial Public Class EmployeeMaintenancePage
Inherits UserControl

Private _vm As EmployeeMaintenanceViewModel

”’

”’ Constructor
”’

”’
Public Sub New()
InitializeComponent()
End Sub

#Region “Event Handlers”

”’

”’ I clear my sort and filter before adding a new Employee. This is
”’ necessary because if the new row does not fit the current filter, it
”’ will not display. Also, by clearing the sort, we force the newly added
”’ row to the bottom of the grid.
”’

”’ ”’ ”’
Private Sub EmployeeGridView_AddingNewDataItem(ByVal sender As System.Object, ByVal e As Telerik.Windows.Controls.GridView.GridViewAddingNewEventArgs)
EmployeeGridView.FilterDescriptors.Clear()
EmployeeGridView.SortDescriptors.Clear()
e.NewObject = _vm.GetNewEmployee()
End Sub

”’

”’ Reload from the row cache if edit was cancelled, otherwise
”’ save to the database.
”’

”’ ”’ ”’
Private Sub EmployeeGridView_RowEditEnded(ByVal sender As System.Object, ByVal e As Telerik.Windows.Controls.GridViewRowEditEndedEventArgs)
If e.EditAction = Telerik.Windows.Controls.GridView.GridViewEditAction.Cancel Then
_vm.ReloadEmployeeFromCache(CType(e.Row.DataContext, EmployeeModel))
Else
_vm.UpdateEmployee(TryCast(e.Row.DataContext, EmployeeModel))
End If
End Sub

”’

”’ Call the delete method on the View Model to delete employee. GridView will get
”’ updated when the item is removed from the “EmployeeList” on the view model.
”’

”’ ”’ ”’
Private Sub EmployeeGridView_Deleting(ByVal sender As System.Object, ByVal e As Telerik.Windows.Controls.GridViewDeletingEventArgs)
_vm.DeleteEmployee(CType(e.Items(0), EmployeeModel).Id)
e.Cancel = True
End Sub

”’

”’ Store the current copy of the row on Selection Changed. In a case when an edit
”’ is cancelled, the stored value is used to reload row with original values.
”’

”’ ”’ ”’
Private Sub EmployeeGridView_SelectionChanged(ByVal sender As System.Object, ByVal e As Telerik.Windows.Controls.SelectionChangeEventArgs)
If e.AddedItems.Count > 0 Then
_vm.CurrentRowCache = CType(e.AddedItems(0), EmployeeModel).Clone()
End If
End Sub
#End Region

#Region “Public Methods”

”’

”’ Load the View Model and bind it to the View.
”’

”’
Public Sub Load()
_vm = New EmployeeMaintenanceViewModel()
_vm.Load()
Me.DataContext = _vm
End Sub

#End Region

End Class

[/sourcecode]

In the code-behind of the View, I mainly handle the events and call my View Model to process the logic. This allows me to unit test the logic in my View Model.

8 thoughts on “Silverlight Telerik Editable GridView with MVVM – Part 3

  1. I find you “view” not really 100% because it also has business entity types like LastName, FirstName etc and I think somehow it should also come from the viewmodel.

    Let me know if you dont agree.

  2. The FirstName and LastName in the xaml do come from the ViewModel. The GridView is bound to the EmployeeList, which is a property on the ViewModel. The EmployeeList is the Observable Collection of the EmployeeModel objects.The xaml for each column indicates the property names on the EmployeeModel to bind to.

  3. How do you bind a column header to the modelview in your example above? I use this code on my modelview:

    public string ColumnHeaderCol1
    {
    get
    {
    return GLOBALS.Labels.Col1;
    }
    }

    It seems because the grid’s itemsource is bound to the collection, that the header is trying to bind to a column in the collection as well. We need it to bind to the ModelView at the same level as the collection.

    Thanks in advanced

  4. You would have to define your View Model in XAML as a Resource:

    <UserControl.Resources>
    <Models:MyViewModel x:Key=”MyViewModel”></Models:MyViewModel >
    </UserControl.Resources>

    Then bind your grid column header by specifying your View Model as a source.

    Header=”{Binding ColumnHeaderCol1, Source={StaticResource MyViewModel}}”

  5. Hello,
    I don’t find this 100% MVVM implementatio.If you can bind the gridview_editrowend to your VM will be perfect.

    Regards

  6. This is still binding directly to the model and letting the view edit the model with the VM doing nothing but offering a passthrough collection. In the case of an inline editable grid it should still follow the same pattern as if you had an edit form, the edit form would bind to a VM of a single entity and any editing would be done through the VM, not directly to the entity. Mirror this to an in-line edit grid, your mainVM has a collection of rowVM’s.

    Each row is a View but its virtualized by the fact that its in this “gridview” and its easy to overlook.

    I went down this road before and it ended with an MVVM mess. Once you use a RowViewModel for each item it becomes clean and respects the pattern and the concept more cleanly.

  7. I agree… If I was to rework this today I would definetly take an approach of having a collection of Row View Models. One of these days I will post an updated version.

Leave a Reply

Your email address will not be published. Required fields are marked *