Search results matching tags 'ASP.NET', 'XamGrid', and 'XamDataChart'

Using the Infragistics Control Persistence Framework with XamGrid

mmateev — Tue, 29 Jun 2010 12:58:00 GMT

This article describes how to use the Infragistics Control Persistence Framework with XamGrid.

There are many cases when customers want to go back to the saved state of the application layout or to save the state of the Silverlight application when they close it and use it again next way when they start this application.

Persistence Framework provides possibility to serialize and deserialize the state of the specified control or group of controls.

Most of Infragistics Line of Business and Microsoft Silverlight components works with the Control Persistence Framework. It is possible to control which of the component properties should be persistable and which shouldn't be.

For custom controls you need to maintain properties, which state will be saved or not implementing IProvidePropertyPersistenceSettings interface.

public interface IProvidePropertyPersistenceSettings

{

/// <summary>

/// Gets a List of properties that shouldn't be saved when the PersistenceManager goes to save them.

/// </summary>

List<string> PropertiesToIgnore { get; }

/// <summary>

/// Gets a List of properties that should be applied, before even trying to look at any other property on the object.

/// </summary>

List<string> PriorityProperties { get; }

/// <summary>

/// Allows an object to perform an operation, after it's been loaded.

/// </summary>

void FinishedLoadingPersistence();

}

For property, that are ignored in this implementation you need to add a custom implementation of the persistence support.

This article demonstrates the mentioned above cases with the Infragistics Control Persistence Framework and XamGrid.

Demo application is based on created in the part 1 and part 2 of article "Using the Infragistics XamGrid and XamDataChart with Hierarchical Data and WCF RIA Services".

In this application are used XamGrid and XamDataChart with WCF RIA Services. There is implementation of the XamGrid filtering.

When select specified bar from the chart

void XamDataChartSeriesMouseLeftButtonDown(object sender, Infragistics.Controls.Charts.DataChartMouseButtonEventArgs e)

{

Customer customer = e.Item as Customer;

if (customer == null)

{

return;

}

string value = customer.CustomerID;

Shape x = e.OriginalSource as Shape;

if (x != null)

{

_origBrush = x.Fill;

_isChanged = true;

x.Fill = new SolidColorBrush(Colors.Cyan);

}

Column col = customerXamGrid.Columns.DataColumns["CustomerID"];

RowsFilter rf = new RowsFilter(typeof(string), col);

if (ChkLowerFilter.IsChecked == true)

{

rf.Conditions.Add(new ComparisonCondition() { Operator = ComparisonOperator.GreaterThan, FilterValue = value});

}

else if (ChkUpperFilter.IsChecked == true)

{

rf.Conditions.Add(new ComparisonCondition() { Operator = ComparisonOperator.LessThan, FilterValue = value});

}

else

{

return;

}

customerXamGrid.FilteringSettings.RowFiltersCollection.Add(rf);

}

In this sample will be added Persistence Framework support to save the XamGrid layout and filtering settings. XamGrid don't persist some of properties like Rows, ActiveCell, SelectedCells, SelectedRows. It persist XamGrid layout - position and sizes of the columns , visible rows etc.

Developers can still save these properties by adding them to the PropertySettings collection.

Requirements:

You need to install trial version of NetAdvantage for Silverlight Line of Business 10.2 . Demo sample includes also XamDataChart from NetAdvantage for Silverlight Data Visualization 10.2 - it is not required when use an Infragistics Control Persistence Framework.

Create a Silverlight application with XamGrid and Persistence Framework:

1. Download the trial version of NetAdvantage for Silverlight LoB 10.2

Create a Silverlight application, hosted in an ASP.Net application (demo application also uses WCF RIA Services).
Create a Silverlight client with XamGrid and appropriate data (demo application data via RIA Services).
Reference the InfragisticsSL4.Persistence.v10.2 assembly
Implement save and load functionalities for XamGrid settings
Maintain additional controls with Persistence Framework via PersistenceGroup objects.

Steps to create a Silverlight application are described in the in the part 1 and part 2 of article "Using the Infragistics XamGrid and XamDataChart with Hierarchical Data and WCF RIA Services".

Reference the InfragisticsSL4.Persistence.v10.2 assembly

Implement Save and Load setting for XamGrid:

Add buttons to save and restore the XamGrid state:

Add member variables

private MemoryStream _memoryStream = new MemoryStream();

private PersistenceGroup _persistenceGroup = new PersistenceGroup();

Implement Save and Load in the event handlers:

private void BtnSaveState_Click(object sender, RoutedEventArgs e)

{

// Saves persisted object

_memoryStream = PersistenceManager.Save(customerXamGrid);

}

private void BtnRestoreState_Click(object sender, RoutedEventArgs e)

{

_memoryStream.Position = 0;

// Load persisted object

PersistenceManager.Load(customerXamGrid, _memoryStream);

}

Start the application and check Lower Limits CheckBox and select the bar with "FAMIA" CustomerID to set filtering options to XamGrid. Only Customers with CutomerID , greater than "FAMIA" will be appeared in the XamGrid.

Layout of the grid is saved, but filtering options will not:

Layout when save the XamGrid settings

Layout after reset the settings and load the saved one with Persistence Framework.

The reason to lose the filtering settings is that XamGrid don't persist some of properties like Rows, ActiveCell, SelectedCells, FilteringSettings by default.

Change the Filtering Settings

We will save FilteringSettings by adding them to the PropertySettings collection

<ig:XamGrid Grid.Row="1" Grid.Column="1" AutoGenerateColumns="False" HorizontalAlignment="Left" ItemsSource="{Binding ElementName=customerDomainDataSource, Path=Data}" Margin="20" Name="customerXamGrid" VerticalAlignment="Top">

<ig:PersistenceManager.Settings>

<ig:PersistenceSettings SavePersistenceOptions="AllButIgnored" >

<ig:PersistenceSettings.PropertySettings>

<ig:PropertyNamePersistenceInfo PropertyName="FilteringSettings"/>

</ig:PersistenceSettings.PropertySettings>

</ig:PersistenceSettings>

</ig:PersistenceManager.Settings>

<ig:XamGrid.FilteringSettings>

<ig:FilteringSettings>

<ig:PersistenceManager.Settings>

<ig:PersistenceSettings SavePersistenceOptions="AllButIgnored" >

<ig:PersistenceSettings.PropertySettings>

<ig:PropertyNamePersistenceInfo PropertyName="RowFiltersCollection"/>

</ig:PersistenceSettings.PropertySettings>

</ig:PersistenceSettings>

</ig:PersistenceManager.Settings>

</ig:FilteringSettings>

</ig:XamGrid.FilteringSettings>

…..

</ig:XamGrid>

The grid layout and filtering settings are the same when save the settings and when load it after reset to default layout:

Layout when save the XamGrid settings

Layout after reset the settings and load the saved one with Persistence Framework.

Persist the state of more controls using the PersistenceGroup object.

Add a PersistanceGroup object to resources:

<UserControl.Resources>

<ig:PersistenceGroup x:Key="igPG" />

</UserControl.Resources>

Set the attached property PersistenceManager.PersistenceGroup to XamGrid:

<ig:XamGrid Grid.Row="1" Grid.Column="1" AutoGenerateColumns="False" HorizontalAlignment="Left"

ItemsSource="{Binding ElementName=customerDomainDataSource, Path=Data}" Margin="20" Name="customerXamGrid"

VerticalAlignment="Top" ig:PersistenceManager.PersistenceGroup="{StaticResource igPG}"

Loaded="customerXamGrid_Loaded">

…

<ig:XamGrid>

Set the attached property PersistenceManager.PersistenceGroup to the TextBox controls, placed in the Grid with the detail data:

<Grid DataContext="{Binding ElementName=customerDomainDataSource1, Path=Data}" Grid.Row="1" HorizontalAlignment="Left" Margin="3"

Name="grid1" VerticalAlignment="Top">

….

…

</Grid>

Add a PersistaceGroup object to the application:

private bool _isSaveCompleted = false;

private PersistenceGroup _persistenceGroup = new PersistenceGroup();

public MainPage()

{

InitializeComponent();

….

this.customerXamGrid.SelectedRowsCollectionChanged += new EventHandler<SelectionCollectionChangedEventArgs<SelectedRowsCollection>>(CustomerXamGrid_SelectedRowsCollectionChanged);

_persistenceGroup = this.Resources[Group] as PersistenceGroup;

if (_persistenceGroup != null)

{

_persistenceGroup.Events.PersistenceSaved += new EventHandler<PersistenceSavedEventArgs>(PersistenceSaved);

}

Load and save setting for all controls from the group via PersistenceSettings object:

private void BtnSaveState_Click(object sender, RoutedEventArgs e)

{

// Saves persisted group

_memoryStream = PersistenceManager.Save(_persistenceGroup);

}

private void PersistenceSaved(object sender, PersistenceSavedEventArgs e)

{

// Flag for Save process completion

this._isSaveCompleted = true;

}

private void BtnRestoreState_Click(object sender, RoutedEventArgs e)

{

_memoryStream.Position = 0;

if (_isSaveCompleted)

{

PersistenceManager.Load(_persistenceGroup, _memoryStream);

}

Layout when save the PersistenceGroup members settings

Layout after reset the settings and load the saved one with Persistence Framework.

Save state to isolated storage and load it when starts the application:

private void SaveIntoISO(PersistenceGroup grp, string fileName)

{

this._memoryStream = PersistenceManager.Save(grp);

long requestedQuotaSize = this._memoryStream.Length + 524288;

using (IsolatedStorageFile iso = IsolatedStorageFile.GetUserStoreForApplication())

{

if (iso.Quota < requestedQuotaSize)

{

MessageBox.Show("Storage is not enough! Increase it to " + requestedQuotaSize.ToString());

TxtQuota.Text = requestedQuotaSize.ToString();

BtnIncreaseQuota.Focus();

return;

}

if (iso.FileExists(fileName))

iso.DeleteFile(fileName);

using (IsolatedStorageFileStream stream = new IsolatedStorageFileStream(fileName, FileMode.OpenOrCreate, iso))

{

stream.Write(this._memoryStream.ToArray(), 0, (int)this._memoryStream.Length);

}

private void LoadFromISO(PersistenceGroup grp, string fileName)

{

using (IsolatedStorageFile iso = IsolatedStorageFile.GetUserStoreForApplication())

{

if (iso.FileExists(fileName))

{

using (IsolatedStorageFileStream stream = new IsolatedStorageFileStream(fileName, FileMode.OpenOrCreate, iso))

{

if (stream.Length > 0)

{

try

{

PersistenceManager.Load(grp, stream);

}

catch (Exception)

{

}

private void BtnSaveState_Click(object sender, RoutedEventArgs e)

{

// Saves customerIDTextBox1 TextBox

_memoryStream2 = PersistenceManager.Save(customerIDTextBox1);

// Saves persisted group

this.SaveIntoISO(_persistenceGroup, IsoFile);

}

private void BtnRestoreState_Click(object sender, RoutedEventArgs e)

{

_memoryStream.Position = 0;

_memoryStream2.Position = 0;

if (_isSaveCompleted)

{

// Loads persistence group from MemoryStream

PersistenceManager.Load(_persistenceGroup, _memoryStream);

// Load customerIDTextBox1 TextBox

PersistenceManager.Load(customerIDTextBox1, _memoryStream2);

}

An event handler is added to the Loaded event of the XanGrid

private void customerXamGrid_Loaded(object sender, RoutedEventArgs e)

{

this.LoadFromISO(_persistenceGroup, IsoFile);

}

<ig:XamGrid Grid.Row="1" Grid.Column="1" AutoGenerateColumns="False" HorizontalAlignment="Left"

ItemsSource="{Binding ElementName=customerDomainDataSource, Path=Data}" Margin="20" Name="customerXamGrid" VerticalAlignment="Top" ig:PersistenceManager.PersistenceGroup="{StaticResource igPG}"

Loaded="customerXamGrid_Loaded">

…..

</ig:XamGrid>

Controls, bound with TwoWay mode to DomainDataSource can't load saved values when the application starts because their source is null. Controls , bound with OneWay mode can.

To keep the same behavior for all controls we will persist these controls in a separate MemoryStream that will not saved into an IsolatedStorage .

When there an IsolatedStorage quota is not enough code to increase the quota is added.

Changing of the quota must be user initialized - code is added in the event handler of the Button.Click event.

private void BtnIncreaseQuota_Click(object sender, RoutedEventArgs e)

{

if (!this.TxtQuota.Text.Equals(String.Empty))

{

try

{

long quota = System.Convert.ToInt64(this.TxtQuota.Text);

IncreaseStorage(quota);

}

catch (FormatException ex)

{

MessageBox.Show(ex.Message);

}

this.TxtQuota.Text = "";

}

private void IncreaseStorage(long spaceRequest)

{

using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())

{

try

{

if (true == isf.IncreaseQuotaTo(spaceRequest))

{

Results.Text = "Isolated Strorage Quota is " + isf.Quota.ToString();

}

else

{

Results.Text = "Insufficient Quota :" + isf.Quota.ToString();

}

catch (Exception e)

{

Results.Text = "An error occured: " + e.Message;

}

A XamGrid layout when save the settings of the PersistenceGroup members.

A XamGrid layout after reset the settings and load the saved one with Persistence Framework.

A XamGrid layout when the application is started and the settings are loaded from the Persistence Framework.

Source code of the demo application you could find here:(Please visit the site to view this media)

Using the Infragistics XamGrid and XamDataChart with Hierarchical Data and WCF RIA Services – Part 2

mmateev — Sun, 20 Jun 2010 13:53:00 GMT

This Article describes how to use the Infragistics XamGrid and the new XamDataChart with WCF RIA Services.

Important things, related with WCF RIA Services and the Infragistics XamGrid and RIA Services are described in the article "Using the Infragistics XamGrid with RIA Services" and the part 1 of this article.

To create an application you need to repeat first six steps from the previous article: "Using the Infragistics XamGrid with RIA Services":

Creating of a demo application includes the steps, mentioned in previous two articles"

Create a RIA Services enabled Silverlight application:

1. Download the trial version of NetAdvantage for Silverlight LoB 10.2
2. Install WCF RIA Services for Silverlight 4 and Visual Studio 2010 (it includes also WCF Ria Services)
3. Create a Silverlight application, hosted in an ASP.Net application with RIA Services link
4. Create Data Model
5. Create a Domain Service
6. Create a Silverlight Client

Steps are described in the "Using the Infragistics XamGrid with RIA Services" article

Use a hierarchical data with the Infragistics XamGrid:

Modify our Domain Service class NorthWindDomainService - add query GetCustomersWithOrders that returns data from table Customers with data from child table Orders.
Add data from Customers table via Data Sources window, represented via XamGrid.
Create a summary field Freight in the Customer class modifying NorthWindModel and NorthWindDomainService classes:

Steps are described in the part 1 of this article.

Requirements:

You need to install trial version of NetAdvantage for Silverlight Line of Business 10.2 and NetAdvantage for Silverlight Data Visualization 10.2.

In the part 2 of this article will be demonstrated the new Infragistics XamDataChart , used with WCF RIA Services.

Add XamDataChart to the Silverlight application:

To use XamDataChart you need:

Add XamDataChart from toolbox (it will automatically reference InfragisticsSL4.Controls.Charts.XamDataChart.v10.2.dll and InfragisticsSL4.DataVisualization.v10.2.dll libraries).

<ig:XamDataChart Grid.Column="1" Margin="20" Name="xamDataChart" VerticalAlignment="Top" />

Add as Data Context Data from the created cutomerDomainDataSource.
Add axes:

CategoryXAxis, named mxXAxis and binded with the CustomerID property from the Customers data source .

NumericYAxis, named xamYAxisFreight and used to visualize the Freight for each Customer.

Add Series, Binded to the DataContext and using created CategoryXAxis and NumericYAxis.

There is full XAML code:

<ig:XamDataChart Grid.Column="1" Margin="20" x:Name="xamDataChart" DataContext="{Binding ElementName=customerDomainDataSource, Path=Data}"

PanModifier="Shift"

DefaultInteraction="DragZoom"

HorizontalZoomable="True"

HorizontalZoombarVisibility="Visible"

VerticalZoomable="True"

<ig:XamDataChart.Axes>

<ig:CategoryXAxis x:Name="xmXAxis" ItemsSource="{Binding}" Label="{}{CustomerID}" />

<ig:NumericYAxis x:Name="xmYAxisFreight" />

</ig:XamDataChart.Axes>

<ig:XamDataChart.Series>

<ig:ColumnSeries Thickness="2"

ItemsSource="{Binding}"

ValueMemberPath="Freight"

XAxis="{Binding ElementName=xmXAxis}"

YAxis="{Binding ElementName=xmYAxisFreight}">

</ig:ColumnSeries>

</ig:XamDataChart.Series>

</ig:XamDataChart>

When run the application we will have both XamGrid and XamDataChart , used the same data source:

XamDataChart interactions:

Let’s make the chart interactive:

When click over a column from the XamDataChart series, column will be filled with different color and there will be filtering applied to XamGrid.

There will be added two check boxes, that will define to filter values , greater or lower than the value of the selected series column. A Button “Reset Limits” will remove the filter.

</StackPanel>

In the ctor there are added event handlers for SeriesMouseLeftButtonDown and XamDataChartSeriesMouseLeftButtonDown events.

public MainPage()

{

InitializeComponent();

this.xamDataChart.SeriesMouseLeftButtonDown += new Infragistics.Controls.Charts.DataChartMouseButtonEventHandler(XamDataChartSeriesMouseLeftButtonDown);

this.xamDataChart.SeriesMouseLeftButtonUp += new Infragistics.Controls.Charts.DataChartMouseButtonEventHandler(XamDataChartSeriesMouseLeftButtonUp);

}

void XamDataChartSeriesMouseLeftButtonDown(object sender, Infragistics.Controls.Charts.DataChartMouseButtonEventArgs e)

{

//Get the selected Item as Customer

Customer customer = e.Item as Customer;

if (customer == null)

{

return;

}

string value = customer.CustomerID;

Shape x = e.OriginalSource as Shape;

if (x != null)

{

_origBrush = x.Fill;

_isChanged = true;

x.Fill = new SolidColorBrush(Colors.Cyan);

}

//Applying the filter

Column col = customerXamGrid.Columns.DataColumns["CustomerID"];

RowsFilter rf = new RowsFilter(typeof(string), col);

if (ChkLowerFilter.IsChecked == true)

{

rf.Conditions.Add(new ComparisonCondition() { Operator = ComparisonOperator.GreaterThan, FilterValue = value});

}

else if (ChkUpperFilter.IsChecked == true)

{

rf.Conditions.Add(new ComparisonCondition() { Operator = ComparisonOperator.LessThan, FilterValue = value });

}

else

{

return;

}

customerXamGrid.FilteringSettings.RowFiltersCollection.Add(rf);

}

void XamDataChartSeriesMouseLeftButtonUp(object sender, Infragistics.Controls.Charts.DataChartMouseButtonEventArgs e)

{

if (_isChanged)

{

//Restore the color

Shape x = e.OriginalSource as Shape;

if (x != null)

{

x.Fill = _origBrush;

}

//remove the filter

private void BtnReset_Click(object sender, RoutedEventArgs e)

{

this.customerXamGrid.FilteringSettings.RowFiltersCollection.Clear();

}

Filter the values greater than selected value.

Filter the values, less than selected value.

Add a XamDataChart with details:

Create a chart with details - freights by date for the selected Customer object:

To be possible to get all orders for a specific Customer add in the NorthWindDomainService class method GetOrdersByCustomerId:

public IQueryable<Order> GetOrdersByCustomerId(string customerId)

{

return this.ObjectContext.Orders.Where(c => c.CustomerID == customerId);

}

Add a CheckBox control to maintain when the detail chart will be displayed.

Add an InfragisticsSL4.Controls.Interactions.XamDialogWindow.v10.2.dll reference
Add in XAML a XamDialogWindow with XamDataChart inside it. Chart will show the Freight by OrderDate value for a selected Customer.

<ig:XamDialogWindow Grid.ColumnSpan="2" x:Name="xamChartWindow" Header="Customer Orders" WindowState="Hidden"

RestrictInContainer="False" StartupPosition="Center" Width="450" Height="250">

<ig:XamDataChart Margin="20" x:Name="xamOrderDataChart"

PanModifier="Shift"

DefaultInteraction="DragZoom"

HorizontalZoomable="True"

HorizontalZoombarVisibility="Visible"

VerticalZoomable="True"

VerticalZoombarVisibility="Visible" >

<ig:XamDataChart.Axes>

<ig:CategoryXAxis x:Name="xmXAxis2" ItemsSource="{Binding}" Label="{}{OrderDate:MM/dd/yyyy}" />

<ig:NumericYAxis x:Name="xmYAxisFreight2" />

</ig:XamDataChart.Axes>

<ig:XamDataChart.Series>

<ig:ColumnSeries Thickness="2"

ItemsSource="{Binding}"

ValueMemberPath="Freight"

XAxis="{Binding ElementName=xmXAxis2}"

YAxis="{Binding ElementName=xmYAxisFreight2}">

</ig:ColumnSeries>

</ig:XamDataChart.Series>

</ig:XamDataChart>

</ig:XamDialogWindow>

Add an Event Handler to XamGrid.SelectedRowsCollectionChanged event in the ctor:

this.customerXamGrid.SelectedRowsCollectionChanged += new EventHandler<SelectionCollectionChangedEventArgs<SelectedRowsCollection>>(CustomerXamGrid_SelectedRowsCollectionChanged);

void CustomerXamGrid_SelectedRowsCollectionChanged(object sender, SelectionCollectionChangedEventArgs<SelectedRowsCollection> e)

{

if (this.ChkShowDetails.IsChecked != true || e.NewSelectedItems.Count == 0)

{

return;

}

Row selelctedRow = e.NewSelectedItems[0];

string customerId = selelctedRow.Cells["CustomerID"].Value.ToString();

NorthWindDomainContext context = this.customerDomainDataSource.DomainContext as NorthWindDomainContext;

if (context != null)

{

LoadOperation<Order> loadOp = context.Load(context.GetOrdersByCustomerIdQuery(customerId));

this.xamOrderDataChart.DataContext = loadOp.Entities;

this.xamChartWindow.Show();

}

Add detailed information to UI:

To detailed info for the selected customer :

Add a details form from Data Sources window for the Order and drag it to Silverlight application MainPage.xaml in design mode.
Select GetCustomersByCustomerIdQuery as query that is used to generate the data:

It will add a Gird with controls , displaying a detail information for the selected Customer:

Remove code that Executes query to fill the detail data:

<sdk:Label Content="Customer Id:" Margin="3" VerticalAlignment="Center" />

</StackPanel>

Keep other XAML code:

<riaControls:DomainDataSource AutoLoad="False" d:DesignData="{d:DesignInstance my:Customer, CreateList=true}" Height="0" LoadedData="CustomerDomainDataSource1_LoadedData" Name="customerDomainDataSource1" QueryName="GetCustomerByIdQuery" Width="0">

<riaControls:DomainDataSource.DomainContext>

<my:NorthWindDomainContext />

</riaControls:DomainDataSource.DomainContext>

<riaControls:DomainDataSource.QueryParameters>

<riaControls:Parameter ParameterName="customerId" Value="{Binding ElementName=customerIdTextBox, Path=Text}" />

</riaControls:DomainDataSource.QueryParameters>

</riaControls:DomainDataSource>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<sdk:Label Content="Address:" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" />

<sdk:Label Content="City:" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" />

<sdk:Label Content="Company Name:" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" />

<sdk:Label Content="Contact Name:" Grid.Column="0" Grid.Row="3" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" />

<sdk:Label Content="Contact Title:" Grid.Column="0" Grid.Row="4" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" />

<sdk:Label Content="Country:" Grid.Column="0" Grid.Row="5" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" />

<sdk:Label Content="Customer ID:" Grid.Column="0" Grid.Row="6" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" />

<sdk:Label Content="Fax:" Grid.Column="0" Grid.Row="7" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" />

<sdk:Label Content="Freight:" Grid.Column="0" Grid.Row="8" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" />

<sdk:Label Content="Phone:" Grid.Column="0" Grid.Row="9" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" />

<sdk:Label Content="Postal Code:" Grid.Column="0" Grid.Row="10" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" />

<sdk:Label Content="Region:" Grid.Column="0" Grid.Row="11" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" />

</Grid>

Modify the SelectedRowsCollectionChanged event handler to reload the details data:

void CustomerXamGrid_SelectedRowsCollectionChanged(object sender, SelectionCollectionChangedEventArgs<SelectedRowsCollection> e)

{

if (this.ChkShowDetails.IsChecked != true || e.NewSelectedItems.Count == 0)

{

return;

}

Row selelctedRow = e.NewSelectedItems[0];

string customerId = selelctedRow.Cells["CustomerID"].Value.ToString();

NorthWindDomainContext context = this.customerDomainDataSource.DomainContext as NorthWindDomainContext;

if (context != null)

{

LoadOperation<Order> loadOp = context.Load(context.GetOrdersByCustomerIdQuery(customerId));

this.xamOrderDataChart.DataContext = loadOp.Entities;

this.xamChartWindow.Show();

//Reload Details Data

customerDomainDataSource1.QueryParameters.Clear();

customerDomainDataSource1.QueryParameters.Add(new Parameter { ParameterName = "customerId", Value = customerId });

customerDomainDataSource1.Load();

}

Start the application:

Detailed data shows attribute information for the selected customer.

Source code of the demo application you could find here:(Please visit the site to view this media)

Using the Infragistics XamGrid and XamDataChart with Hierarchical Data and WCF RIA Services - Part1

mmateev — Thu, 17 Jun 2010 19:10:00 GMT

This Article describes how to use the Infragistics XamGrid and XamDataChart with WCF RIA Services.

Some of the most important things, related with WCF RIA Services and using the Infragistics XamGrid and RIA Services are described in the article "Using the Infragistics XamGrid with RIA Services".

One more interesting topic is using the hierarchical data with WCF RIA Services.

Part 1 of the article describes using the Infragistics XamGrid with hierarchical data.

To create an application you need to repeat first six steps from the previous article: "Using the Infragistics XamGrid with RIA Services":

Steps to create a RIA Services enabled Silverlight application:

1. Download the trial version of NetAdvantage for Silverlight LoB 10.2
2. Install WCF RIA Services for Silverlight 4 and Visual Studio 2010 (it includes also WCF Ria Services)
3. Create a Silverlight application, hosted in an ASP.Net application with RIA Services link
4. Create Data Model
5. Create a Domain Service
6. Create a Silverlight Client

You need to install trial version of NetAdvantage for Silverlight LoB 10.2

Data Connection used for this application use the NorthWind sample database. You could download it from there

ADO.Net Entity Data Model:

ADO.Net Entity Data Model is created from the NorthWind database and is named NorthWindModel (saved like NorthWindModel.admx).

Tables Customer and Order are included in this Entity Data Model.

Domain Services Class is created with the name NorthWindDomainService.

Create the Silverlight Client

Data Sources, presented classes Customer and Order from our Entity Data Model are available.

When XamGrid , bound to the Customer data is created from Data source c is no hierarchical data represented:

By default data from the child table is not included:

Let's look at our code:

<riaControls:DomainDataSource AutoLoad="True" d:DesignData="{d:DesignInstance my:Customer, CreateList=true}" Height="0" LoadedData="CustomerDomainDataSourceLoadedData" Name="customerDomainDataSource" QueryName="GetCustomersQuery" Width="0 <riaControls:DomainDataSource.DomainContext>

<my:NorthWindDomainContext />

</riaControls:DomainDataSource.DomainContext>

</riaControls:DomainDataSource>

Method GetCustomers() is declared in NortWindDomainService class:

public IQueryable<Customer> GetCustomers()

{

return this.ObjectContext.Customers;

}

To receive Orders

In the CustomerMetadata class there added Orders with Include attribute.

[Include]

public EntityCollection<Order> Orders { get; set; }

In the NortWindDomainService class add method GetCustomersWithOrders():

public IQueryable<Customer> GetCustomersWithOrders()

{

IQueryable<Customer> customers = this.ObjectContext.Customers.Include("Orders");

return customers;

}

In the customerDomainDataSource DomainDataSource change the QueryName from GetCustomersQuery to GetCustomersWithOrdersQuery:

<riaControls:DomainDataSource.DomainContext>

<my:NorthWindDomainContext />

</riaControls:DomainDataSource.DomainContext>

</riaControls:DomainDataSource>

Now hierarchical data is displayed on the XamGrid.

Create summary fields:

In the NortWindModel.Designer.cs add a Freight property the Customer class:

public Decimal Freight { get; set;}

In the CustomerMetadata class (NortWindDomainService.metadata.cs) add:

public decimal Freight { get; set; }

In the NortWindDomainService.cs add:

public decimal GetCustomersFreight(Customer customer)

{

return Enumerable.Sum(orders.Where(o => o.Freight != null && o.CustomerID == customer.CustomerID), o => (decimal)o.Freight);

}

Modify GetCustomersWithOrders() method:

public IQueryable<Customer> GetCustomersWithOrders()

{

IQueryable<Customer> customers = this.ObjectContext.Customers.Include("Orders");

foreach(Customer customer in customers)

{

customer.Freight = GetCustomersFreight(customer);

}

return customers;

}

Now Total of Freight is calculated:

In the part 2 of this article will be demonstrated the new Infragistics XamDataChart , used with WCF RIA Services.

The full code of the demo application you could find there: (Please visit the site to view this media)