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.