Step 2 of 3: Adding the C1DataGrid control

In the previous step you created a new Silverlight application with WCF RIA services enabled and added a new data source. In this step you'll set up your application and add the C1DataGrid control to the application. Complete the following steps:

1. In the Solution Explorer, right click the C1DataGridRIA project and choose Add Reference. The Add Reference dialog box will appear.

2. In the Add Reference dialog box, select the following assemblies and then click OK:

3. In the Solution Explorer, double-click the MainPage.xaml file to open it.

4. In the XAML window of the project, update the UserControl tag so it appears similar to the following:

<UserControl x:Class="C1DataGridRIA.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

xmlns:ria="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices"

xmlns:c1data="clr-namespace:C1.Silverlight.DataGrid;assembly=C1.Silverlight.DataGrid"

xmlns:adapter="clr-namespace:C1.Silverlight.DataGrid.Ria;assembly=C1.Silverlight.DataGrid.Ria"

xmlns:local="clr-namespace:C1DataGridRIA.Web"

mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

This markup will add references to the assemblies you added, and resize the UserControl.

5. Add the following markup just after the Grid tag to create a row definition:

6. Add the following markup within the Grid tag and just under the row definitions to create a C1RiaAdaptor:

<adapter:C1RiaAdapter x:Name="_adapter" DataGrid="{Binding ElementName=_dataGrid}">

<ria:DomainDataSource x:Name="_myDataSource" QueryName="GetProducts" PageSize="8">

<ria:DomainDataSource.DomainContext>

<local:NorthwindContext/>

</ria:DomainDataSource.DomainContext>

<ria:DomainDataSource.GroupDescriptors>

<ria:GroupDescriptor PropertyPath="CategoryID"/>

<ria:GroupDescriptor PropertyPath="Discontinued"/>

</ria:DomainDataSource.GroupDescriptors>

<ria:DomainDataSource.SortDescriptors>

<ria:SortDescriptor PropertyPath="ProductName" Direction="Descending"/>

</ria:DomainDataSource.SortDescriptors>

<ria:DomainDataSource.FilterDescriptors>

<ria:FilterDescriptor PropertyPath="UnitPrice" Operator="IsGreaterThanOrEqualTo" Value="18"/>

<ria:FilterDescriptor PropertyPath="ProductName" Operator="Contains" Value="C"/>

</ria:DomainDataSource.FilterDescriptors>

</ria:DomainDataSource>

</adapter:C1RiaAdapter>

7. Add the following markup within the Grid tag and under the C1RiaAdaptor tag to add a header to the page:

8. Add the following markup within the Grid tag and under the Header to add a layout Grid to the page:

9. Add the following markup within within the content layout Grid you just added (just above the </Grid> tag) to add a standard DataPager control to the page:

10. Add the following markup within within the content layout Grid and just after the DataPager to add a C1DataGrid control to the page:

<c1data:C1DataGrid x:Name="_dataGrid" CanUserGroup="True" AutoGenerateColumns="False" Grid.Row="1"

CanUserAddRows="True" CanUserEditRows="True" CanUserRemoveRows="True"

ItemsSource="{Binding Data, ElementName=_adapter}"

BeginningRowEdit="_dataGrid_BeginningRowEdit" CommittingRowEdit="_dataGrid_CommittingRowEdit"

CancelingRowEdit="_dataGrid_CancelingRowEdit" RowsDeleted="_dataGrid_RowsDeleted" >

<c1data:C1DataGrid.Columns>

<c1data:DataGridNumericColumn Binding="{Binding CategoryID, Mode=TwoWay}" SortMemberPath="CategoryID" FilterMemberPath="CategoryID" Header="CategoryID"/>

<c1data:DataGridCheckBoxColumn Binding="{Binding Discontinued, Mode=TwoWay}" SortMemberPath="Discontinued" FilterMemberPath="Discontinued" Header="Discontinued"/>

<c1data:DataGridTextColumn Binding="{Binding ProductName, Mode=TwoWay}" SortMemberPath="ProductName" FilterMemberPath="ProductName" Header="ProductName"/>

<c1data:DataGridTextColumn Binding="{Binding QuantityPerUnit, Mode=TwoWay}" SortMemberPath="QuantityPerUnit" FilterMemberPath="QuantityPerUnit" Header="QtyPerUnit"/>

<c1data:DataGridNumericColumn Binding="{Binding UnitPrice, Mode=TwoWay}" SortMemberPath="UnitPrice" FilterMemberPath="UnitPrice" Header="UnitPrice"/>

</c1data:C1DataGrid.Columns>

</c1data:C1DataGrid>

This C1DataGrid control is bound to the database added earlier and includes defined and bound columns.

11. Add the following markup within within the content layout Grid and just after the C1DataGrid to add a text box and two buttons to the page:

At run time, the text box will display the location of any changes made to the grid and the buttons will allow you to reject or apply any changes made to the grid at run time. In the next step you'll add code to implement the XAML you added to the application.

12. Right-click the MainPage.xaml page and choose View Code to open the MainPage.xaml.cs (or MainPage.xaml.vb) page in the Code Editor.

14. Add the following code within the MainPage class to implement the controls that were added in XAML:

Private Sub _submitButton_Click(sender As Object, e As RoutedEventArgs)

' Submit changes to the server

_dataGrid.IsLoading = True

_myDataSource.DomainContext.SubmitChanges(AddressOf OnSubmitCompleted, Nothing)

End Sub

Private Sub _rejectButton_Click(sender As Object, e As RoutedEventArgs)

' Reject changes

_myDataSource.DomainContext.RejectChanges()

CheckChanges()

_dataGrid.Reload(False)

End Sub

' Disable submit/reject buttons when there are pending changes in the row

Private Sub _dataGrid_BeginningRowEdit(sender As Object, e As DataGridEditingRowEventArgs)

_submitButton.IsEnabled = False

_rejectButton.IsEnabled = False

End Sub

' Enable/disable submit/reject buttons after pending changes are committed

Private Sub _dataGrid_CommittingRowEdit(sender As Object, e As DataGridEditingRowEventArgs)

CheckChanges()

End Sub

' Enable/disable submit/reject buttons after pending changes are canceled

Private Sub _dataGrid_CancelingRowEdit(sender As Object, e As DataGridEditingRowEventArgs)

CheckChanges()

End Sub

' Enable/disable submit/reject buttons after rows deleted

Private Sub _dataGrid_RowsDeleted(sender As Object, e As DataGridRowsDeletedEventArgs)

CheckChanges()

End Sub

' Check the pending changes to submit/reject and enable/disable buttons according to this.

Private Sub CheckChanges()

Dim changeSet As EntityChangeSet = _myDataSource.DomainContext.EntityContainer.GetChanges()

_changeText.Text = changeSet.ToString()

Dim hasChanges As Boolean = _myDataSource.HasChanges

_submitButton.IsEnabled = hasChanges

_rejectButton.IsEnabled = hasChanges

End Sub

' Check for errors when submitting changes to the server

Private Sub OnSubmitCompleted(so As SubmitOperation)

_dataGrid.IsLoading = False

If so.HasError Then

MessageBox.Show(String.Format("Submit Failed: {0}", so.[Error].Message))

so.MarkErrorAsHandled()

End If

CheckChanges()

End Sub

private void _submitButton_Click(object sender, RoutedEventArgs e)

{

// Submit changes to the server

_dataGrid.IsLoading = true;

_myDataSource.DomainContext.SubmitChanges(OnSubmitCompleted, null);

}

private void _rejectButton_Click(object sender, RoutedEventArgs e)

{

// Reject changes

_myDataSource.DomainContext.RejectChanges();

CheckChanges();

_dataGrid.Reload(false);

}

// Disable submit/reject buttons when there are pending changes in the row

private void _dataGrid_BeginningRowEdit(object sender, DataGridEditingRowEventArgs e)

{

_submitButton.IsEnabled = false;

_rejectButton.IsEnabled = false;

}

// Enable/disable submit/reject buttons after pending changes are committed

private void _dataGrid_CommittingRowEdit(object sender, DataGridEditingRowEventArgs e)

{

CheckChanges();

}

// Enable/disable submit/reject buttons after pending changes are canceled

private void _dataGrid_CancelingRowEdit(object sender, DataGridEditingRowEventArgs e)

{

CheckChanges();

}

// Enable/disable submit/reject buttons after rows deleted

private void _dataGrid_RowsDeleted(object sender, DataGridRowsDeletedEventArgs e)

{

CheckChanges();

}

// Check the pending changes to submit/reject and enable/disable buttons according to this.

private void CheckChanges()

{

EntityChangeSet changeSet = _myDataSource.DomainContext.EntityContainer.GetChanges();

_changeText.Text = changeSet.ToString();

bool hasChanges = _myDataSource.HasChanges;

_submitButton.IsEnabled = hasChanges;

_rejectButton.IsEnabled = hasChanges;

}

// Check for errors when submitting changes to the server

private void OnSubmitCompleted(SubmitOperation so)

{

_dataGrid.IsLoading = false;

if (so.HasError)

{

MessageBox.Show(string.Format("Submit Failed: {0}", so.Error.Message));

so.MarkErrorAsHandled();

}

CheckChanges();

}

You learned how to bind the C1DataGrid control to an RIA Services data source. You created a Silverlight application, added the data source, and added and implemented the C1DataGrid control. In the next step you'll run the application, to view its run time interactions.