How to: Load data in a hierarchical grid with RIA Services

Generally, there are a couple of options for filling up a hierarchical RadGridView when using RIA Services and domain data source. In the examples below we will use the RadDomainDataSource control, but the approaches are the same when working with the DomainDataSource as well.

• Using ElementName binding

In this case each of the controls is defined in the main Grid and the ElementName binding is used. However, the declaration of the RadDomainDataSource should be in the same level as the one of the corresponding RadGridView;

<Grid> 
    <telerik:RadDomainDataSource x:Name="customersDomainDataSource1" QueryName="GetCustomers" AutoLoad="True"> 
        <telerik:RadDomainDataSource.DomainContext> 
            <local:CustomerDomainContext /> 
        </telerik:RadDomainDataSource.DomainContext> 
    </telerik:RadDomainDataSource> 
    <telerik:RadGridView x:Name="customersGrid" ItemsSource="{Binding DataView, ElementName=customersDomainDataSource1}"> 
        <telerik:RadGridView.ChildTableDefinitions> 
            <telerik:GridViewTableDefinition /> 
        </telerik:RadGridView.ChildTableDefinitions> 
        <telerik:RadGridView.HierarchyChildTemplate> 
            <DataTemplate> 
                <Grid> 
                    <telerik:RadDomainDataSource x:Name="ordersDomainDataSource1" QueryName="GetOrders" AutoLoad="True"> 
                        <telerik:RadDomainDataSource.DomainContext> 
                            <local:CustomerDomainContext /> 
                        </telerik:RadDomainDataSource.DomainContext> 
                    </telerik:RadDomainDataSource> 
                    <telerik:RadGridView ItemsSource="{Binding DataView, ElementName=ordersDomainDataSource1}" /> 
                </Grid> 
            </DataTemplate> 
        </telerik:RadGridView.HierarchyChildTemplate> 
    </telerik:RadGridView> 
</Grid> 

• Using StaticResource

Following this approach, you have to define the two RadDomainDataSource-s in the Resources section and use them as StaticResouce-s afterwards:

<UserControl.Resources> 
    <telerik:RadDomainDataSource x:Name="customersDomainDataSource2" QueryName="GetCustomers" AutoLoad="True"> 
        <telerik:RadDomainDataSource.DomainContext> 
            <local:CustomerDomainContext /> 
        </telerik:RadDomainDataSource.DomainContext> 
    </telerik:RadDomainDataSource> 
    <telerik:RadDomainDataSource x:Name="ordersDomainDataSource2" QueryName="GetOrders" AutoLoad="True"> 
        <telerik:RadDomainDataSource.DomainContext> 
            <local:CustomerDomainContext /> 
        </telerik:RadDomainDataSource.DomainContext> 
    </telerik:RadDomainDataSource> 
</UserControl.Resources> 
 
<Grid> 
    <telerik:RadGridView ItemsSource="{Binding DataView, Source={StaticResource customersDomainDataSource2}}"> 
        <telerik:RadGridView.ChildTableDefinitions> 
            <telerik:GridViewTableDefinition /> 
        </telerik:RadGridView.ChildTableDefinitions> 
        <telerik:RadGridView.HierarchyChildTemplate> 
            <DataTemplate> 
                <telerik:RadGridView ItemsSource="{Binding DataView, Source={StaticResource ordersDomainDataSource2}}" /> 
            </DataTemplate> 
        </telerik:RadGridView.HierarchyChildTemplate> 
    </telerik:RadGridView> 
</Grid> 

In both cases the RadGridView will be visualized as follows:

As it can be seen, all objects of type Order are displayed in the child grid. If you want to visualize only the items that correspond to the parent item, you have to create a new query and pass the required parameter. This can be done as demonstrated below:

public IQueryable<Order> GetOrdersByCustomerID(string customerID) 
{ 
    var orders = from o in ObjectContext.Orders where o.CustomerID.StartsWith(customerID) select o; 
    return orders; 
} 

<UserControl.Resources> 
    <telerik:RadDomainDataSource x:Key="customers" QueryName="GetCustomers" AutoLoad="True"> 
        <telerik:RadDomainDataSource.DomainContext> 
            <local:CustomerDomainContext /> 
        </telerik:RadDomainDataSource.DomainContext> 
    </telerik:RadDomainDataSource> 
</UserControl.Resources> 
 
<Grid> 
    <telerik:RadGridView ItemsSource="{Binding DataView, Source={StaticResource customers}}"> 
        <telerik:RadGridView.ChildTableDefinitions> 
            <telerik:GridViewTableDefinition /> 
        </telerik:RadGridView.ChildTableDefinitions> 
        <telerik:RadGridView.HierarchyChildTemplate> 
            <DataTemplate> 
                <StackPanel> 
                    <telerik:RadDomainDataSource x:Name="orders" QueryName="GetOrdersByCustomerID" AutoLoad="True"> 
                        <telerik:RadDomainDataSource.DomainContext> 
                            <local:CustomerDomainContext /> 
                        </telerik:RadDomainDataSource.DomainContext> 
                        <telerik:RadDomainDataSource.QueryParameters> 
                            <telerik:QueryParameter ParameterName="customerID" Value="{Binding CustomerID}" /> 
                        </telerik:RadDomainDataSource.QueryParameters> 
                    </telerik:RadDomainDataSource> 
                    <telerik:RadGridView x:Name="ordersGrid" ItemsSource="{Binding DataView, ElementName=orders}" /> 
                </StackPanel> 
            </DataTemplate> 
        </telerik:RadGridView.HierarchyChildTemplate> 
    </telerik:RadGridView> 
</Grid> 

In this case the RadGridView will be visualized like follows: