Silverlight

Feb 19

Silverlight Telerik Transitions with User Controls

I was looking to implement Silverlight Telerik Transitions in my Silverlight 5 application with User Controls to walk a user through a wizard. My initial approach was to use a Visual State Manager, which would allow me to keep all the UI logic in the XAML. This did not work well with Telerik Transitions. I decided to use DataTriggers that modified the state of the UI based on a WizardState enumeration on my View Model.

View Model

 
Namespace ViewModels.Employee
 
    Public Class EmployeeViewModel
        Inherits BaseViewModel
 
 
#Region "Properties"
 
        Private _employeeSetupState As EmployeeSetupStateEnum
 
        Public Property EmployeeSetupState As EmployeeSetupStateEnum
            Get
                Return _employeeSetupState
            End Get
            Set(ByVal value As EmployeeSetupStateEnum)
                If _employeeSetupState <> value Then
                    _employeeSetupState = value
                    NotifyPropertyChanged("CanMoveForward")
                    NotifyPropertyChanged("CanMoveBack")
                    NotifyPropertyChanged("EmployeeSetupState")
                End If
            End Set
        End Property
 
        Public ReadOnly Property CanMoveForward() As Boolean
            Get
                Dim newState As Integer = EmployeeSetupState + 1
                If [Enum].IsDefined(GetType(EmployeeSetupStateEnum), newState) Then
                    Return True
                End If
 
                Return False
            End Get
        End Property
 
        Public ReadOnly Property CanMoveBack() As Boolean
            Get
                Dim newState As Integer = EmployeeSetupState - 1
                If [Enum].IsDefined(GetType(EmployeeSetupStateEnum), newState) Then
                    Return True
                End If
 
                Return False
            End Get
        End Property
 
        ' The Properties for the View Models are defined here.
 
#End Region
 
#Region "Base Overrides/Overloads"
 
        Public Overrides Sub Initialize()
            MyBase.Initialize()
 
            EmployeeSetupState = 0
            InitializeStep()
        End Sub
 
#End Region
 
#Region "Public Methods"
 
        Public Sub NextStep()
 
            If CanMoveForward Then
                EmployeeSetupState = CType(EmployeeSetupState + 1, EmployeeSetupStateEnum)
                InitializeStep()
            End If
 
        End Sub
 
        Public Sub PreviousStep()
 
            If CanMoveBack Then
                EmployeeSetupState = CType(EmployeeSetupState - 1, EmployeeSetupStateEnum)
                InitializeStep()
            End If
 
        End Sub
 
#End Region
 
#Region "Private Methods"
 
        Private Sub InitializeStep()
 
            Select Case EmployeeSetupState
                Case EmployeeSetupStateEnum.EmployeeGeneralInformationState
                    EmployeeGeneralInformationViewModel.Initialize()
                Case EmployeeSetupStateEnum.EmployeeAddressInformationState
                    EmployeeAddressInformationViewModel.Initialize()
                Case EmployeeSetupStateEnum.EmployeeContactInformationState
                    EmployeeContactInformationViewModel.Initialize()
                Case EmployeeSetupStateEnum.EmployeeCommentsState
                    EmployeeCommentsViewModel.Initialize()
            End Select
 
        End Sub
 
#End Region
 
    End Class
 
    ''' <summary>
    ''' States of the Employee setup process. These steps
    ''' are executed in the order specified.
    ''' </summary>
    ''' <remarks></remarks>
    Public Enum EmployeeSetupStateEnum
        EmployeeGeneralInformationState
        EmployeeAddressInformationState
        EmployeeContactInformationState
        EmployeeCommentsState
    End Enum
 
End Namespace

In the code above, I have an enumeration that specifies valid states for my employee setup process (specified in the order I want to show these states) and a property in my View Model that holds the current state of the employee setup process. I have a trigger that calls the Initialize() method on my View Model when the page loads. During the initialization process, my EmployeeSetupState is set to the first step and the view model for that step is initialized by calling the InitializeStep() method. I have a property that determines if the current EmployeeSetupState has a previous or next step. My View Model also holds a reference to the View Models for each of the User Controls that make up my employee setup states (not shown in the code above).

View

<UserControl.Resources>
    <vm:EmployeeViewModel x:Name="ViewModel"/>
</UserControl.Resources>
 
<Grid xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Name="LayoutRoot">
 
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" MinHeight="250" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
 
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Loaded">
            <ic:CallMethodAction MethodName="Initialize"
                                 TargetObject="{Binding Mode=OneWay}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
 
    <telerik:RadTransitionControl Content="{Binding EmployeeSetupState}">
        <telerik:RadTransitionControl.Transition>
            <telerik:FadeTransition />
        </telerik:RadTransitionControl.Transition>
        <telerik:RadTransitionControl.ContentTemplate>
            <DataTemplate>
                <Grid Margin="5,10,5,10">
 
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
 
 
                    <uc:EmployeeGeneralInformationView x:Name="EmployeeGeneralInformationView"
                        Visibility="Collapsed"
                        DataContext="{Binding Source=ViewModel, Path=EmployeeGeneralInformationViewModel, Mode=TwoWay}" />
                    <uc:EmployeeAddressInformationView x:Name="EmployeeAddressInformationView"
                        Visibility="Collapsed"
                        DataContext="{Binding Source=ViewModel, Path=EmployeeAddressInformationViewModel, Mode=TwoWay}" />
                    <uc:EmployeeContactInformationView x:Name="EmployeeContactInformationView"
                        Visibility="Collapsed"
                        DataContext="{Binding Source=ViewModel, Path=EmployeeContactInformationViewModel, Mode=TwoWay}" />
                    <uc:EmployeeCommentsView x:Name="EmployeeCommentsView"
                        Visibility="Collapsed"
                        DataContext="{Binding Source=ViewModel, Path=EmployeeCommentsViewModel, Mode=TwoWay}" />
 
                    <i:Interaction.Triggers>
                        <ei:DataTrigger Binding="{Binding Converter={StaticResource EnumToStringConverter}}"
                                        Value="EmployeeGeneralInformationState">
                            <ic:ChangePropertyAction
                                PropertyName="Visibility" Value="Visible"
                                TargetName="EmployeeGeneralInformationView" />
                            <ic:ChangePropertyAction
                                PropertyName="Visibility" Value="Collapsed"
                                TargetName="EmployeeAddressInformationView" />
                            <ic:ChangePropertyAction
                                PropertyName="Visibility" Value="Collapsed"
                                TargetName="EmployeeContactInformationView" />
                            <ic:ChangePropertyAction
                                PropertyName="Visibility" Value="Collapsed"
                                TargetName="EmployeeCommentsView" />
                        </ei:DataTrigger>
                        <ic:DataTrigger Binding="{Binding Converter={StaticResource EnumToStringConverter}}"
                                        Value="EmployeeAddressInformationState">
                            <ic:ChangePropertyAction
                                PropertyName="Visibility" Value="Collapsed"
                                TargetName="EmployeeGeneralInformationView" />
                            <ic:ChangePropertyAction
                                PropertyName="Visibility" Value="Visible"
                                TargetName="EmployeeAddressInformationView" />
                            <ic:ChangePropertyAction
                                PropertyName="Visibility" Value="Collapsed"
                                TargetName="EmployeeContactInformationView" />
                            <ic:ChangePropertyAction
                                PropertyName="Visibility" Value="Collapsed"
                                TargetName="EmployeeCommentsView" />
                        </ic:DataTrigger>
                        <ic:DataTrigger Binding="{Binding Converter={StaticResource EnumToStringConverter}}"
                                        Value="EmployeeContactInformationState">
                            <ic:ChangePropertyAction
                                PropertyName="Visibility" Value="Collapsed"
                                TargetName="EmployeeGeneralInformationView" />
                            <ic:ChangePropertyAction
                                PropertyName="Visibility" Value="Collapsed"
                                TargetName="EmployeeAddressInformationView" />
                            <ic:ChangePropertyAction
                                PropertyName="Visibility" Value="Visible"
                                TargetName="EmployeeContactInformationView" />
                            <ic:ChangePropertyAction
                                PropertyName="Visibility" Value="Collapsed"
                                TargetName="EmployeeCommentsView" />
                        </ic:DataTrigger>
                        <ic:DataTrigger Binding="{Binding Converter={StaticResource EnumToStringConverter}}"
                                        Value="EmployeeCommentsState">
                            <ic:ChangePropertyAction
                                PropertyName="Visibility" Value="Collapsed"
                                TargetName="EmployeeGeneralInformationView" />
                            <ic:ChangePropertyAction
                                PropertyName="Visibility" Value="Collapsed"
                                TargetName="EmployeeAddressInformationView" />
                            <ic:ChangePropertyAction
                                PropertyName="Visibility" Value="Collapsed"
                                TargetName="EmployeeContactInformationView" />
                            <ic:ChangePropertyAction
                                PropertyName="Visibility" Value="Visible"
                                TargetName="EmployeeCommentsView" />
                        </ic:DataTrigger>
                    </i:Interaction.Triggers>
 
                </Grid>
            </DataTemplate>
        </telerik:RadTransitionControl.ContentTemplate>
    </telerik:RadTransitionControl>

    <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right">
        <Button x:Name="PreviousButton" Content="&lt; Previous"  HorizontalAlignment="Right"
                Visibility="{Binding CanMoveBack, Converter={StaticResource BoolToVisibilityConverter}}"
                Margin="5"  Style="{StaticResource ButtonPrimaryStyle}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ic:CallMethodAction MethodName="PreviousStep"
                                         TargetObject="{Binding Mode=OneWay}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <Button x:Name="NextButton" Content="Next &gt;" Width="70" HorizontalAlignment="Right"
                Visibility="{Binding CanMoveForward, Converter={StaticResource BoolToVisibilityConverter}}"
                Margin="5" Style="{StaticResource ButtonPrimaryStyle}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ic:CallMethodAction MethodName="NextStep"
                                         TargetObject="{Binding Mode=OneWay}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
 
    </StackPanel>
 
</Grid>

In my View, I bind the Content property of RadTransitionControl to the EmployeeSetupState from my View Model. The transitions happen each time the state change occurs. The data triggers control what view displays depending on the current employee setup state. In the data triggers I use the ChangePropertyAction to set the Visibility of the User Controls. This separates my View Model code to only determine and set the state of the setup process and my View handles the display.

Jun 13

Silverlight 4 Telerik Scheduler Issue

Silverlight No Comments »

Telerik controls version 2010.1.422.1040

I recently took over a Silverlight Telerik scheduler which was having an issue with displaying appointments on a resource view. The only way I could get appointments to display is if “DisplayEmptyGroup” property on the scheduler was set to true. All the appointments were assigned to a resource, but would not display on the scheduler.

The issue was the assignment of the resources to appointments. The appointments were loaded and added to the Telerik appointment collection. Then each appointment in the collection was looped through and assigned to the resource. So as the appointments were added to the collection, they defaulted to an empty resource group since it was not yet assigned to the resource. For some reason, since the empty group is not displayed (“DisplayEmptyGroup” set to false), the appointments did not show up on the scheduler when the resource was eventually assigned to the appointment.

To fix the problem, I assigned the resource to an appointment before adding it to the collection. Problem solved!!!

Tagged with: appointment • appointments not showing • radScheduler • Silverlight • Silverlight 4 • silverlight scheduler • telerik issue • telerik scheduler • telerik scheduler issue • telerik silverlight 4

Jun 12

LINQ Lazy Loading

LINQ No Comments »

I was experiencing some performance issues in my Silverlight application and got it narrowed down to the mapping of the domain objects. After running SQL profiler and doing some research I figured out that it was due to Linq lazy loading.

As an example if I have the following data structure:

I would have an “EmployeePosition” domain object and an “Employee” domain object. I will use the following Linq statement to bring back all Employee Positions:

using (var dc = new DataClasses1DataContext())
{
    var postiions = dc.EmployeePositions.ToList();
}

Linq lazy loading is enabled by default, so by executing the above query Linq will only bring back Employee Positions. If I am only looking for Employee Positions everything works as expected. The issue appears if I want to bring back the Employee information for each position. Since I have a foreign key relationship between “Employee” and “EmployeePosition”, my dbml has “one to many” association between them. This allows me to write the following mapping to my object that I return to my Silverlight application:

var myEmployees = postiions.Select(x => new EmployeeWithPosition
                    {
                        FirstName = x.Employee.FirstName,
                        LastName = x.Employee.LastName,
                        Position = x.Position
                    }).ToList();

When executing above code, there is a separate call made to the database to get the “FirstName” then another call to get the “LastName” for each of the “EmployeePosition” objects due to LINQ lazy loading (default). So if I have 10 employee positions, there are 20 additional calls made to the database.

There are a few solutions to solve this issue:

Disable lazy loading for the entire dbml file.
Specify “DataLoadOptions” on the Data Context. This is a valid option if you do not re-use the Data Context.
Use projection to load only necessary data.

The best option for my situation was to use projection to load my data. To do this I extended my existing Employee domain object by creating a partial “Employee” class and adding a string “Position” property. Then I used projection to load my data to the Employee domain object.

using (var dc = new DataClasses1DataContext())
{
    var myEmployees = dc.EmployeePositions.Select(x => new Employee
    {                    
        FirstName = x.Employee.FirstName,
        LastName = x.Employee.LastName,                    
        Position = x.Position
    }).ToList();
}

When I executed above code I got the following run-time error:

Explicit construction of entity type ‘Employee’ in query is not allowed.

After doing a little research I discovered that projection to a domain object is not allowed. As a work around, I used my “EmployeeWithPosition” custom object which only contains properties that I am interested in from the “Employee” and “EmployeePosition” domain objects to project my data.

 using (var dc = new DataClasses1DataContext())
            {
                var myEmployees = dc.EmployeePositions.Select(x => new EmployeeWithPosition
                {                    
                    FirstName = x.Employee.FirstName,
                    LastName = x.Employee.LastName,                    
                    Position = x.Position
                }).ToList();
            }

Tagged with: data context • data load options • dataloadoption • Explicit construction of entity type • lazy linq • lazy loading • LINQ • linq lazy loading • linq projection • linq to sql • linq2sql • projection • Silverlight

Feb 19

Silverlight Telerik Editable GridView with MVVM – Part 3

Silverlight 8 Comments »

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.



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



<telerikGridView:RadGridView x:Name="EmployeeGridView" VerticalAlignment="Top"  
  ItemsSource="{Binding EmployeeList, Mode=TwoWay}" ColumnsWidthMode="Auto" 
  CanUserInsertRows="True" CanUserResizeColumns="True" ShowColumnHeaders="True" 
  ShowColumnFooters="False" AutoGenerateColumns="False" CanUserReorderColumns="True" 
  ShowGroupPanel="False" IsReadOnly="False" ScrollMode="RealTime" RowEditEnded="EmployeeGridView_RowEditEnded" 
  AddingNewDataItem="EmployeeGridView_AddingNewDataItem" SelectionMode="Single" UseAlternateRowStyle="False" 
  CanUserDeleteRows="True" Deleting="EmployeeGridView_Deleting" 
  SelectionChanged="EmployeeGridView_SelectionChanged" ValidationMode="Row">
    <telerikGridView:RadGridView.Columns>
        <telerikGridView:GridViewDataColumn Header="Last Name" IsReadOnly="False" 
		DataMemberBinding="{Binding LastName}" ></telerikGridView:GridViewDataColumn>
        <telerikGridView:GridViewDataColumn Header="First Name" IsReadOnly="False" 
		DataMemberBinding="{Binding FirstName}" ></telerikGridView:GridViewDataColumn>                                                       
        <telerikGridView:GridViewDataColumn HeaderTextAlignment="Center" 
		DataMemberBinding="{Binding IsActive}" Header="Active" IsReadOnly="False" >
        <telerikGridView:GridViewDataColumn.CellEditTemplate>
           <DataTemplate>
              <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" 
			VerticalAlignment="Center">
                 <CheckBox IsChecked="{Binding IsActive, Mode=TwoWay}"></CheckBox>
              </StackPanel>
           </DataTemplate>
        </telerikGridView:GridViewDataColumn.CellEditTemplate>
        <telerikGridView:GridViewDataColumn.CellTemplate>
           <DataTemplate>
              <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" 
			VerticalAlignment="Center">
                 <CheckBox IsChecked="{Binding IsActive, Mode=OneWay}" 
			IsEnabled="False" ></CheckBox>
              </StackPanel>
           </DataTemplate>
        </telerikGridView:GridViewDataColumn.CellTemplate>                                
    </telerikGridView:RadGridView.Columns>
</telerikGridView:RadGridView>

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.



Partial Public Class EmployeeMaintenancePage
    Inherits UserControl


    Private _vm As EmployeeMaintenanceViewModel

    ''' <summary>
    ''' Constructor
    ''' </summary>
    ''' <remarks></remarks>
    Public Sub New()
        InitializeComponent()
    End Sub

#Region "Event Handlers"

    ''' <summary>
    ''' 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. 
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    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

    ''' <summary>
    ''' Reload from the row cache if edit was cancelled, otherwise
    ''' save to the database.
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    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

    ''' <summary>
    ''' 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.
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    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

    ''' <summary>
    ''' 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.
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    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"

    ''' <summary>
    ''' Load the View Model and bind it to the View.
    ''' </summary>
    ''' <remarks></remarks>
    Public Sub Load()
        _vm = New EmployeeMaintenanceViewModel()
        _vm.Load()
        Me.DataContext = _vm
    End Sub

#End Region

End Class

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.

Tagged with: editable grid • editable gridview • mvvm • radGridview • Silverlight • telerik grid • telerik gridview • view model

Jan 23

Silverlight Telerik Editable GridView with MVVM – Part 2

Silverlight 2 Comments »

This is the continuation from Part 1 where I walked through creating my Model. The next step is to create a View and a View Model. There should only be one View Model per View. I will try to take advantage of xaml binding where possible.

Following is my View Model.

View Model

Imports System.Collections.ObjectModel
Imports System.ComponentModel
 
Public Class EmployeeMaintenanceViewModel
    Implements INotifyPropertyChanged
 
    Public Event PropertyChanged( _
            ByVal sender As Object, ByVal e As System.ComponentModel.PropertyChangedEventArgs) Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged
 
    Protected Sub NotifyPropertyChanged(ByVal propertyName As String)
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
    End Sub
 
#Region "Private Members"
 
    Private _employeeGateway As EmployeeGateway
    Private _currentRowCache As EmployeeModel
    Private _employeeList As ObservableCollection(Of EmployeeModel) =  _
            New ObservableCollection(Of EmployeeModel)
 
#End Region
 
#Region "Constructors"
 
    Public Sub New()
 
    End Sub
 
#End Region
 
#Region "Properties"
 
    Public Property CurrentRowCache() As EmployeeModel
        Get
            Return _currentRowCache
        End Get
        Set(ByVal value As EmployeeModel)
            _currentRowCache = value
        End Set
    End Property
 
    Public Property EmployeeList() As ObservableCollection(Of EmployeeModel)
        Get
            Return _employeeList
        End Get
        Set(ByVal value As ObservableCollection(Of EmployeeModel))
            _employeeList = value
        End Set
    End Property
 
#End Region
 
#Region "Public Methods"
 
    'use WCF to load all employees.
    Public Sub Load()
        'clear the list prior to loading.
        EmployeeList.Clear()
 
        _employeeGateway = New EmployeeGateway()
        _employeeGateway.FindAllEmployees(AddressOf OnEmployeesLoaded)
 
    End Sub
 
    Public Function GetNewEmployee() As EmployeeModel
        Dim emp As New EmployeeModel()
 
        'default to active, set uniqueId to map employee back
        'when returned from a save
        emp.IsActive = True
        emp.UniqueId = Guid.NewGuid
        Return emp
    End Function
 
    Public Sub UpdateEmployee(ByVal emp As EmployeeModel)
        emp.IsModified = True
        SaveEmployee(emp)
    End Sub
 
    Public Sub DeleteEmployee(ByVal id As Integer)
        Dim emp As EmployeeModel = EmployeeList.Where(Function(x) x.Id = id).SingleOrDefault()
        If id > 0 Then
            emp.IsDeleted = True
            SaveEmployee(emp)
        Else
            EmployeeList.Remove(emp)
        End If
 
    End Sub
 
    'in a case of a cancel edit, i reload employee with the values stored in the
    'row cache before edit.
    Public Sub ReloadEmployeeFromCache(ByVal emp As EmployeeModel)
        If CurrentRowCache Is Nothing Then
            Exit Sub
        End If
 
        With emp
            .IsActive = CurrentRowCache.IsActive
            .FirstName = CurrentRowCache.FirstName
            .LastName = CurrentRowCache.LastName
        End With
    End Sub
 
#End Region
 
#Region "Private Methods"
 
    'Call WCF to save employee
    Private Sub SaveEmployee(ByVal emp As EmployeeModel)
        _employeeGateway = New EmployeeGateway()
        _lookupGateway.SaveEmployee(AddressOf OnEmployeeSaved, emp)
    End Sub
 
    Private Sub UpdateRecord(ByVal updatedEmployee As EmployeeModel)
        Dim emp As EmployeeModel
 
        'if uniqueId is not Guid.Empty, it's a new add, use the guid to find it in the list.
        If updatedEmployee.UniqueId <> Guid.Empty Then
            emp = EmployeeList.Where(Function(l) l.UniqueId = _
                                         updatedEmployee.UniqueId).SingleOrDefault
        Else
            emp = EmployeeList.Where(Function(l) l.Id = _
                                         updatedEmployee.Id).SingleOrDefault
        End If
 
        'check if employee was found
        If emp IsNot Nothing Then
            If updatedEmployee.IsDeleted Then
                EmployeeList.Remove(emp)
            Else
                'This data will be updated on the grid since I implemented 
                'INotifiyPropertyChanged interface on my Model.
                With emp
                    .Id = updatedEmployee.Id
                    .FirstName = updatedEmployee.FirstName
                    .LastName = updatedEmployee.LastName
                    .IsActive = updatedEmployee.IsActive
                End With
            End If
        End If
    End Sub
 
#End Region
 
#Region "Event Handlers"
 
    Private Sub OnEmployeesLoaded(ByVal employees As ObservableCollection(Of EmployeeModel))
 
        'each employee must be added to the observable collection so that 
        'it is reflected on the Grid.
        For Each emp As EmployeeModel In employees
            EmployeeList.Add(emp)
        Next
 
    End Sub
 
    Public Sub OnEmployeeSaved(ByVal updatedEmployee As EmployeeModel)
        If updatedEmployee IsNot Nothing Then
            UpdateRecord(updatedEmployee)
        End If
    End Sub
 
#End Region
 
End Class

Review the comments in the code snippet for explanation. The goal is to place all the logic specific to UI in the View Model. The View Model should not be accessing any controls directly. The View knows about the View Model, but the View Model does not have a reference back to the View. The View Model basically bridges the gap between the View and the Model.

The View code behind will access controls in a case where direct binding is not available, but any logic should still be placed in the View Model. The View code behind will generaly handle events and make calls to the View Model. I will cover that in Part 3 of the post.

Tagged with: editable gridview • mvvm • radGridview • Silverlight • telerik gridview • view model

iDev stream

Silverlight Telerik Transitions with User Controls

Silverlight 4 Telerik Scheduler Issue

LINQ Lazy Loading

Silverlight Telerik Editable GridView with MVVM – Part 3

Silverlight Telerik Editable GridView with MVVM – Part 2

Categories

Tag Cloud

Archives

Links

Meta