Silverlight Telerik Editable GridView with MVVM – Part 1

Over last few days I’ve been working with the Telerik GridView control in a Silverligt 3 project. The goal was to implement an editable grid using MVVM (Model-View-View Model) pattern. A user must be able to Add/Edit/Delete rows from the grid.

I will be using the Telekik controls version 2009.3.1208.1030

I will start by creating my Model.

Model
  1. Imports System.Globalization
  2. Imports System.ComponentModel
  3. Imports System.ComponentModel.DataAnnotations
  4.  
  5. Public Class EmployeeModel
  6.     Implements INotifyPropertyChanged
  7.  
  8.     Public Sub New()
  9.  
  10.     End Sub
  11.  
  12.     Public Sub New()
  13.         ._isModified = False
  14.         ._isDeleted = False
  15.         ._isNew = False
  16.     End Sub
  17.  
  18.     Public Event PropertyChanged(ByVal sender As Object, ByVal e As System.ComponentModel.PropertyChangedEventArgs) Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged
  19.  
  20.     Protected Sub NotifyPropertyChanged(ByVal propertyName As String)
  21.         RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
  22.     End Sub
  23.  
  24.     Private _isModified As Boolean
  25.     Public Property IsModified() As Boolean
  26.         Get
  27.             Return (_isModified)
  28.         End Get
  29.         Set(ByVal value As Boolean)
  30.             _isModified = value
  31.             NotifyPropertyChanged("IsModified")
  32.         End Set
  33.     End Property
  34.  
  35.     Private _isDeleted As Boolean
  36.     Public Property IsDeleted() As Boolean
  37.         Get
  38.             Return _isDeleted
  39.         End Get
  40.         Set(ByVal value As Boolean)
  41.             _isDeleted = value
  42.             NotifyPropertyChanged("IsDeleted")
  43.         End Set
  44.     End Property
  45.  
  46.     Private _id As Integer
  47.     Public Property Id() As Integer
  48.         Get
  49.             Return _id
  50.         End Get
  51.         Set(ByVal value As Integer)
  52.             _id = value
  53.             NotifyPropertyChanged("Id")
  54.         End Set
  55.     End Property
  56.  
  57.     Private _firstName As String
  58.  
  59.     <Required(ErrorMessage:="First Name is Required.")> _
  60.     <StringLength(15, ErrorMessage:="First Name cannot be greater than 15 characters.")> _
  61.     Public Property FirstName() As String
  62.         Get
  63.             Return _firstName
  64.         End Get
  65.         Set(ByVal value As String)
  66.             _firstName = value
  67.             NotifyPropertyChanged("FirstName")
  68.         End Set
  69.     End Property
  70.  
  71.     Private _lastName As String
  72.  
  73.     <Required(ErrorMessage:="Last Name is Required.")> _
  74.     <StringLength(20, ErrorMessage:="Last Name cannot be greater than 20 characters.")> _
  75.     Public Property LastName() As String
  76.         Get
  77.             Return _lastName
  78.         End Get
  79.         Set(ByVal value As String)
  80.             _lastName = value
  81.             NotifyPropertyChanged("LastName")
  82.         End Set
  83.     End Property
  84.  
  85.     Private _uniqueId As Guid
  86.     Public Property UniqueId() As Guid
  87.         Get
  88.             Return _uniqueId
  89.         End Get
  90.         Set(ByVal value As Guid)
  91.             _uniqueId = value
  92.             NotifyPropertyChanged("UniqueId")
  93.         End Set
  94.     End Property
  95.  
  96.     Private _isActive As Boolean
  97.     Public Property IsActive() As Boolean
  98.         Get
  99.             Return _isActive
  100.         End Get
  101.         Set(ByVal value As Boolean)
  102.             _isActive = value
  103.             NotifyPropertyChanged("IsActive")
  104.         End Set
  105.     End Property
  106.  
  107.     Public Function Clone() As EmployeeModel
  108.         Return New EmployeeModel With { _
  109.         .Id = Id, _
  110.         .FirstName = FirstName, _
  111.         .LastName = LastName, _
  112.         .IsActive = IsActive, _
  113.         .UniqueId = UniqueId}
  114.     End Function
  115.  
  116. End Class


I added validation directly to my model for the First Name and Last Name using Attributes. I also implemented System.ComponentModel.INotifyPropertyChanged to notify my view when a property changes.

In Part 2 of the post I will go through creating a View Model.