How To: Silverlight grid hierarchy load on demand using MVVM and RIA services

Thursday, October 22, 2009 by Vladimir Enchev | Comments 4

I’ve made small example on how to load on demand RadGridView hierarchy child data using MVVM and RIA service: 

   Untitled

Using partial classes you can extend very easily generated code with desired load on demand logic:

    public partial class Customer
    {
        bool ordersLoaded = false;
        public IEnumerable<Order> CustomerOrders
        {
            get
            {
                if (!ordersLoaded)
                {
                    var query = from o in MyDataContext.DomainContext.GetOrdersQuery()
                                where o.CustomerID == CustomerID
                                select o;
                    MyDataContext.DomainContext.Load(query);

                    ordersLoaded = true;
                }

                return Orders;
            }
        }
    }

and if you create your own data context you can bind all these completely codeless:

<telerik:RadGridView Name="RadGridView1" IsReadOnly="True" AutoGenerateColumns="False" ItemsSource="{Binding Customers}">
    <telerik:RadGridView.ChildTableDefinitions>
        <telerik:GridViewTableDefinition />
    </telerik:RadGridView.ChildTableDefinitions>
    <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn Header="Customer ID" DataMemberBinding="{Binding CustomerID}" />
        <telerik:GridViewDataColumn Header="Company Name" DataMemberBinding="{Binding CompanyName}" />
        <telerik:GridViewDataColumn Header="Contact Name" DataMemberBinding="{Binding ContactName}" />
        <telerik:GridViewDataColumn Header="City" DataMemberBinding="{Binding City}" />
        <telerik:GridViewDataColumn Header="Country" DataMemberBinding="{Binding Country}" />
    </telerik:RadGridView.Columns>
    <telerik:RadGridView.HierarchyChildTemplate>
        <DataTemplate>
            <telerik:RadGridView IsReadOnly="True" AutoGenerateColumns="False" ItemsSource="{Binding CustomerOrders}">
                <telerik:RadGridView.ChildTableDefinitions>
                    <telerik:GridViewTableDefinition />
                </telerik:RadGridView.ChildTableDefinitions>
                <telerik:RadGridView.Columns>
                    <telerik:GridViewDataColumn Header="Order ID" DataMemberBinding="{Binding OrderID}" />
                    <telerik:GridViewDataColumn Header="Order Date" DataMemberBinding="{Binding OrderDate}" />
                </telerik:RadGridView.Columns>
                <telerik:RadGridView.HierarchyChildTemplate>
                    <DataTemplate>
                        <telerik:RadGridView IsReadOnly="True" AutoGenerateColumns="False" ItemsSource="{Binding Details}">
                            <telerik:RadGridView.Columns>
                                <telerik:GridViewDataColumn Header="Unit Price" DataMemberBinding="{Binding UnitPrice}" />
                                <telerik:GridViewDataColumn Header="Quantity" DataMemberBinding="{Binding Quantity}" />
                                <telerik:GridViewDataColumn Header="Discount" DataMemberBinding="{Binding Discount}" />
                            </telerik:RadGridView.Columns>
                        </telerik:RadGridView>
                    </DataTemplate>
                </telerik:RadGridView.HierarchyChildTemplate>
            </telerik:RadGridView>
        </DataTemplate>
    </telerik:RadGridView.HierarchyChildTemplate>
</telerik:RadGridView>

Enjoy!

[Download]

4 Comments

  • Roy Halvorsen 21 Jan 2010
    How is this done when using WPF and properties in the ViewModel? I have tried this, but using your example doesn't work for me. The child grid never loads any data. 
  • Vlad 21 Jan 2010
    Hi Roy,

    You can check the application attached in your forum thread for more info:
    http://www.telerik.com/community/forums/wpf/gridview/hierarchy-and-mvvm.aspx#1067032

    Vlad
  • tricos 19 Jul 2010
    Hi

    Do you have a sample of hierarchal grid with add/delete/update features. I donot want to use RIA or any other service. Just custom objects.

  • ps_prakash 14 Jul 2011
    Hi,
    Please share me an example on "Loading on demand" child using wcf service. instead of RIA services.
    We have Employee records which we will show it in parent grid. on expanding the parent grid row. i need to invoke a wcf service method and bind the results (employee details) to the child grid.  I've gone through link http://www.telerik.com/community/forums/silverlight/gridview/load-on-demand-gridview.aspx but in that they are taking a reference of the selected child grid in a variable. so when we select row and then again select another row before the WCF service call completes. The reference in the variable changed to next grid. thats creating issue.
    Thanks,
    Prakash

Add comment

  1. Formatting options
       
     
     
     
     
       
  2. (optional, emails won't be shown on public pages)
  3. (optional)