On Demand Data Loading in XamGrid and XamDataTree

[Infragistics] Mihail Mateev / Wednesday, February 2, 2011

Loading data on demand is typical of applications that use hierarchical data. The article “On Demand Data Loading in XamTree” demonstrated an application using Infragistics XamTree. This article shows how they could benefit from hierarchical data XamGrid and XamDataTree as load only the data that is necessary to show.

Requirements:

Visual Studio 2010
Silverlight 4 Tools for Visual Studio 2010
Silverlight 4 (Silverlight Tools for Visual Studio 2010). WCF RIA Services are included in this installation.
Silverlight 4 Toolkit
One of these distributions:

Sample data:

Demo application uses a sample data from XML file.
Sample application uses the same like the data from the article “On Demand Data Loading in XamTree”

<?xml version="1.0" encoding="utf-8" ?>

<books>

  <book Title="The Elegant Universe" Author="Brian Greene" UnitPrice="15.95" Url="http://www.amazon.com/Elegant-Universe-Superstrings-Dimensions-Ultimate/dp/0393046885" ReleaseDate="02/01/1999" >

    <chapter Title="Tied Up with String" />

    <chapter Title="Space, Time, and the Eye of the Beholder" />

    <chapter Title="Of Warps and Ripples" />

    <chapter Title="Microscopic Weirdness" />

    <chapter Title="The Need for a New Theory: General Relativity vs. Quantum Mechanics" />

    <chapter Title="Nothing but Music: The Essentials of Superstring Theory" />

    <chapter Title="The &quot;Super&quot; in Superstrings" />

    <chapter Title="More Dimensions Than Meet the Eye" />

    <chapter Title="The Smoking Gun: Experimental Signatures" />

    <chapter Title="Quantum Gravity" />

    <chapter Title="Tearing the Fabric of Space" />

    <chapter Title="Beyond Strings: In Search of M-Theory" />

    <chapter Title="Black Holes: A String/M-Theory Perspective" />

    <chapter Title="Reflections on Cosmology" />

    <chapter Title="Prospects" />

  </book>

  

  <book Title="Dive Into Python" Author="Mark Pilgrim" UnitPrice="39.99" Url="http://www.amazon.com/Dive-Into-Python-Mark-Pilgrim/dp/1590593561" ReleaseDate="07/19/2004" >

    <chapter Title="Installing Python" />

    <chapter Title="Your First Python Program" />

    <chapter Title="Native Datatypes" />

    <chapter Title="The Power of Introspection" />

    <chapter Title="Objects and Object-Orientation" />

    <chapter Title="Exceptions and File Handling" />

    <chapter Title="Regular Expressions" />

    <chapter Title="HTML Processing" />

    <chapter Title="XML Processing" />

    <chapter Title="Scripts and Streams" />

    <chapter Title="HTTP Web Services" />

    <chapter Title="SOAP Web Services" />

    <chapter Title="Unit Testing" />

    <chapter Title="Test-First Programming" />

    <chapter Title="Refactoring" />

    <chapter Title="Functional Programming" />

    <chapter Title="Dynamic Functions" />

    <chapter Title="Performance Tuning" />

  </book>

  

  <book Title="The Selfish Gene (30th Anniversary Edition)" Author="Richard Dawkins" UnitPrice="15.95" Url="http://www.amazon.com/Selfish-Gene-Anniversary-Introduction/dp/0199291152" ReleaseDate="05/25/2006" >

    <chapter Title="Why are people?" />

    <chapter Title="The replicators" />

    <chapter Title="Immortal coils" />

    <chapter Title="The gene machine" />

    <chapter Title="Aggression: stability and the selfish machine" />

    <chapter Title="Genesmanship" />

    <chapter Title="Family planning" />

    <chapter Title="Battle of the generations" />

    <chapter Title="Battle of the sexes" />

    <chapter Title="You scratch my back, I'll ride on yours" />

    <chapter Title="Memes: the new replicators" />

    <chapter Title="Nice guys finish first" />

    <chapter Title="The long reach of the gene" />

  </book>

  

  <book Title="The Ideological Origins of the American Revolution (Enlarged Edition)" Author="Bernard Bailyn" UnitPrice="24.00" Url="http://www.amazon.com/Ideological-Origins-American-Revolution/dp/0674443020" ReleaseDate="03/01/1992" >

    <chapter Title="The Literature of Revolution" />

    <chapter Title="Sources and Traditions" />

    <chapter Title="Power and Liberty: A Theory of Politics" />

    <chapter Title="The Logic of Rebellion" />

    <chapter Title="Transformation" />

    <chapter Title="The Contagions of Liberty" />

    <chapter Title="Fulfillment: A Commentary on the Constitution" />

  </book>

  

  <book Title="Gödel, Escher, Bach: an Eternal Golden Braid" Author="Douglas R. Hofstadter" UnitPrice="20.00" Url="http://www.amazon.com/Godel-Escher-Bach-Douglas-Hofstadter/dp/B001IAM392" ReleaseDate="01/01/1999" >

    <chapter Title="The MU-puzzle." />

    <chapter Title="Meaning and Form in Mathematics." />

    <chapter Title="Figure and Ground." />

    <chapter Title="Consistency, Completeness, and Geometry." />

    <chapter Title="Recursive Structures and Processes." />

    <chapter Title="The Location of Meaning." />

    <chapter Title="The Propositional Calculus." />

    <chapter Title="Typographical Number Theory." />

    <chapter Title="Mumon and Gödel." />

    <chapter Title="Levels of Description, and Computer Systems." />

    <chapter Title="Brains and Thoughts." />

    <chapter Title="Minds and Thoughts." />

    <chapter Title="BlooP and FlooP and GlooP." />

    <chapter Title="On Formally Undecidable Propositions of TNT and Related Systems." />

    <chapter Title="Jumping out of the System." />

    <chapter Title="Self-Ref and Self-Rep." />

    <chapter Title="Church, Turing, Tarski, and Others." />

    <chapter Title="Artificial Intelligence: Retrospects." />

    <chapter Title="Artificial Intelligence: Prospects." />

    <chapter Title="Strange Loops, Or Tangled Hierarchies." />

  </book>

  

  <book Title="Silverlight 1.0" Author="Devin Rader, Jason Beres, J. Ambrose Little, Grant Hinkson" UnitPrice="23.37" Url="http://www.amazon.com/Silverlight-1-0-Devin-Rader/dp/0470228407" ReleaseDate="10/29/2007" >

   <chapter Title="Introduction to Silverlight" />

    <chapter Title="Building Silverlight Applications Using XAML" />

    <chapter Title="Designing Silverlight Applications Using Expression Blend 2"  />

    <chapter Title="Coding Silverlight Applications with JavaScript and XAML"  />

    <chapter Title="Using Silverlight with ASP.NET"  />

    <chapter Title="Silverlight 1.1 and the CLR"  />

    <chapter Title="Video Player: Silverlight 1.0 Case Example"  />

  </book>

  <book Title="Harry Potter and the Deathly Hallows" Author="J. K. Rowling" UnitPrice="20.99" Url="http://www.amazon.com/Harry-Potter-Deathly-Hallows-Book/dp/0545010225" ReleaseDate="07/21/2007" />

  <book Title="Silverlight 2 Silverlight 2 Programmer's Reference's Reference" Author="J. Ambrose Little, Jason Beres, Grant Hinkson, Devin Rader, Joe Croney" UnitPrice="31.49" Url="http://www.amazon.com/Silverlight-Programmers-Reference-Ambrose-Little/dp/0470385405" ReleaseDate="03/23/2009" />

  <book Title="Breaking Dawn (The Twilight Saga, Book 4)" Author="Stephenie Meyer" UnitPrice="12.64" Url="http://www.amazon.com/New-Moon-Twilight-Saga-Book/dp/0316024961" ReleaseDate="08/02/2008" />

  <book Title="The Last Lecture" Author="Randy Pausch and Jeffrey Zaslow" UnitPrice="13.17" Url="http://www.amazon.com/Last-Lecture-Randy-Pausch/dp/1401323251" ReleaseDate="04/08/2008" />

  <book Title="Brisingr" Author="Christopher Paolini" UnitPrice="16.50" Url="http://www.amzon.com/Brisingr-Inheritance-Book-Christopher-Paolini/dp/0375826726" ReleaseDate="09/20/2008" />

  <book Title="The Story of Edgar Sawtelle" Author="David Wroblewski" UnitPrice="14.27" Url="http://www.amazon.com/Story-Edgar-Sawtelle-Novel-Oprah/dp/0061768065" ReleaseDate="09/19/2008"  />

  <book Title="The Tales of Beedle the Bard" Author="J. K. Rowling" UnitPrice="7.14" Url="http://www.amazon.com/Tales-Beedle-Bard-Standard/dp/0545128285" ReleaseDate="12/04/2008" />

  <book Title="The Appeal" Author="John Grisham " UnitPrice="18.45" Url="http://www.amazon.com/Appeal-John-Grisham/dp/0385515049" ReleaseDate="01/29/2008" />

  <book Title="When You Are Engulfed in Flames" Author="David Sedaris" UnitPrice="15.59" Url="http://www.amazon.com/When-You-Are-Engulfed-Flames/dp/0316143472" ReleaseDate="06/03/2008" />

  <book Title="In Defense of Food: An Eater's Manifesto" Author="Michael Pollan" UnitPrice="13.17" Url="http://www.amazon.com/Defense-Food-Eaters-Manifesto/dp/1594201455" ReleaseDate="01/01/2008" />

  <book Title="The Revolution: A Manifesto" Author="Ron Paul" UnitPrice="13.17" Url="http://www.amazon.com/Host-Novel-Stephenie-Meyer/dp/031606804" ReleaseDate="04/01/2008" />

  <book Title="The Host: A Novel" Author="Stephenie Meyer " UnitPrice="13.17" Url="http://www.amazon.com/Host-Novel-Stephenie-Meyer/dp/031606804" ReleaseDate="05/06/2008" />

  <book Title="The Post-American World" Author="Fareed Zakaria" UnitPrice="17.13" Url="http://www.amazon.com/Post-American-World-Fareed-Zakaria/dp/039306235X" ReleaseDate="05/05/2008" />

  <book Title="Hungry Girl" Author="Lisa Lillien" UnitPrice="12.21" Url="http://www.amazon.com/Hungry-Girl-Survival-Strategies-Guilt-Free/dp/0312377428" ReleaseDate="04/29/2008" />

  <book Title="Fearless Fourteen (Stephanie Plum, No. 14)" Author="Janet Evanovich" UnitPrice="18.45" Url="http://www.amazon.com/Fearless-Fourteen-Stephanie-Plum-No/dp/0312349513" ReleaseDate="06/17/2008" />

  <book Title="The Tales of Beedle the Bard, Collector's Edition" Author="J. K. Rowling" UnitPrice="100.00" Url="http://www.amazon.com/Beedle-Collectors-Offered-Exclusively-Amazon/dp/0956010903" ReleaseDate="12/04/2008" />

  <book Title="Unaccustomed Earth" Author="Jhumpa Lahiri" UnitPrice="16.50" Url="http://www.amazon.com/Unaccustomed-Earth-Jhumpa-Lahiri/dp/0307265730" ReleaseDate="04/01/2008" />

  <book Title="sTORI Telling" Author="Tori Spelling" UnitPrice="16.47" Url="http://www.amazon.com/sTORI-Telling-Tori-Spelling/dp/1416950737" ReleaseDate="03/11/2008" />

  <book Title="Audition: A Memoir" Author="Barbara Walters" UnitPrice="19.77" Url="http://www.amazon.com/Audition-Memoir-Barbara-Walters/dp/030726646X"  ReleaseDate="05/06/2008" />

</books>

Steps to reproduce:

Download sample data
Create a sample Silverlight Navigation Application, hosted in an ASP.Net application.
Imeplement a Silverlight-enabled WCF service that returns collections of book and book chapters.
Create in the Silverlight application a MVVM using for data custom collections that inherits VirtualCollection<T>

WCF Service implementation:
WCF service implementation is almost the same like in the article: “On Demand Data Loading in XamTree”

Create a new Silverlight-enabled WCF service, named BookDataSourceService :

BookDataSourceService implementation:

#region BookDataSourceService

[ServiceContract(Namespace = "")]

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

public class BookDataSourceService

{

  

    #region Member Variables

  

    static string dataPath = HttpContext.Current.Server.MapPath(".") + Path.DirectorySeparatorChar +

   ConfigurationManager.AppSettings["DataDirectory"] + Path.DirectorySeparatorChar +

                   ConfigurationManager.AppSettings["DataFile"];

  

    static XDocument doc = XDocument.Load(dataPath);

  

    #region GetBookCount

    [OperationContract]

    public int GetBookCount()

    {

        try

        {

            return doc.Descendants("book").Count();

        }

        catch (Exception)

        {

            return 0;

        }

    }

    #endregion //GetBookCount

  

  

    #endregion //Member Variables

  

    #region Methods

  

    #region GetBooks

    /// <summary>

    /// Gets the books.

    /// </summary>

    /// <returns></returns>

    private static IEnumerable<Book> GetBooks()

    {

        //Return books as IEnumerable

        if (doc != null)

        {

  

            var dataSource = (from d in doc.Descendants("book")

                              where (d.Descendants("chapter") != null || d.Descendants("chapter").Count() >= 0)

                              select new Book

                              {

                                  Author = d.Attribute("Author").Value,

                                  Title = d.Attribute("Title").Value,

                                  UnitPrice = d.Attribute("UnitPrice").GetDecimalValue(),

                                  Url = d.Attribute("Url").Value,

                                  ReleaseDate = d.Attribute("ReleaseDate").Value,

                                  ChaptersCount = d.Descendants("chapter").Count()

                              });

  

            return dataSource.ToList();

        }

        return null;

    }

  

    /// <summary>

    /// Gets the books.

    /// </summary>

    /// <param name="startIndex">The start index.</param>

    /// <param name="itemsCount">The items count.</param>

    /// <returns></returns>

    private static IEnumerable<Book> GetBooks(int startIndex, int itemsCount)

    {

        //Return range of books as IEnumerable

        if (doc != null)

        {

  

            var dataSource = (from d in doc.Descendants("book")

                              where (d.Descendants("chapter") != null || d.Descendants("chapter").Count() >= 0)

                              select new Book

                              {

                                  Author = d.Attribute("Author").Value,

                                  Title = d.Attribute("Title").Value,

                                  UnitPrice = d.Attribute("UnitPrice").GetDecimalValue(),

                                  Url = d.Attribute("Url").Value,

                                  ReleaseDate = d.Attribute("ReleaseDate").Value,

                                  ChaptersCount = d.Descendants("chapter").Count(),

                              });

  

  

            List<Book> lst = dataSource.ToList();

  

            itemsCount = Math.Min(lst.Count - 1 - startIndex, itemsCount);

  

            return lst.GetRange(startIndex, itemsCount);

        }

        return null;

    }

    #endregion //GetBooks

  

    #region GetChapters

  

    /// <summary>

    /// Gets the chapters.

    /// </summary>

    /// <param name="url">The URL.</param>

    /// <returns></returns>

    private static IEnumerable<Chapter> GetChapters(string url)

    {

        //Return the chapters for a specified book

        if (doc != null)

        {

            var chapters = (from d in doc.Descendants("book")

                            where

                                (d.Attribute("Url").Value.Equals(url) && d.Descendants("chapter") != null &&

                                 d.Descendants("chapter").Count() > 0)

                            select GetChapters(d));

  

            return chapters.First().ToList();

        }

  

        return null;

    }

  

    /// <summary>

    /// Gets the chapters.

    /// </summary>

    /// <param name="url">The URL.</param>

    /// <param name="startIndex">The start index.</param>

    /// <param name="itemsCount">The items count.</param>

    /// <returns></returns>

    private IEnumerable<Chapter> GetChapters(string url, int startIndex, int itemsCount)

    {

  

  

        //Return the range of chapters for a specified book

        if (doc != null)

        {

  

  

            var chapters = (from d in doc.Descendants("book")

                            where

                                (d.Attribute("Url").Value.Equals(url) && d.Descendants("chapter") != null &&

                                 d.Descendants("chapter").Count() > 0)

                            select GetChapters(d).ToList());

  

            if (chapters.Count() > 0 && chapters.First().Count > 0)

            {

                List<Chapter> lst = chapters.First();

  

                List<Chapter> result = new List<Chapter>();

  

                for (int i = startIndex; i < startIndex + itemsCount; i++)

                {

                    try

                    {

                        Chapter ch = lst[i];

                        result.Add(ch);

                    }

                    catch (Exception)

                    {

                        continue;

                    }

                }

  

                return result;

                //return lst;

                //itemsCount = Math.Min(lst.Count - 1 - startIndex, itemsCount);

                //itemsCount = Math.Min(lst.Count - startIndex, itemsCount);

                //var x1 = new Chapter[itemsCount];

  

                //try

                //{

                //    lst.CopyTo(startIndex, x1, 0, itemsCount);

  

                //    //return lst;

  

                //    return x1;

                //}

                //catch (Exception)

                //{

                //    return null;

                //}

  

            }

  

  

        }

  

        return null;

    }

  

    /// <summary>

    /// Gets the chapters.

    /// </summary>

    /// <param name="parent">The parent.</param>

    /// <returns></returns>

    private static IEnumerable<Chapter> GetChapters(XElement parent)

    {

        return (from d in parent.Descendants("chapter")

                select new Chapter

                {

                    Title = d.Attribute("Title").Value

                }).ToList<Chapter>();

    }

  

    #endregion //GetChapters

  

    #region GetBookDataSource

    /// <summary>

    /// Gets the book data source.

    /// </summary>

    /// <returns></returns>

    [OperationContract]

    public IEnumerable<Book> GetBookDataSource()

    {

  

        return GetBooks();

  

    }

  

    /// <summary>

    /// Gets the book data source.

    /// </summary>

    /// <param name="startIndex">The start index.</param>

    /// <param name="itemsCount">The items count.</param>

    /// <returns></returns>

    [OperationContract(Name = "GetRangeBookDataSource")]

    public IEnumerable<Book> GetBookDataSource(int startIndex, int itemsCount)

    {

        return GetBooks(startIndex, itemsCount);

  

    }

  

    #endregion //GetBookDataSource

  

    #region GetBookChapters

    /// <summary>

    /// Gets the book data source.

    /// </summary>

    /// <returns></returns>

    [OperationContract]

    public IEnumerable<Chapter> GetBookChapters(string url)

    {

        return GetChapters(url);

    }

  

    /// <summary>

    /// Gets the book chapters.

    /// </summary>

    /// <param name="url">The URL.</param>

    /// <param name="startIndex">The start index.</param>

    /// <param name="itemsCount">The items count.</param>

    /// <returns></returns>

    [OperationContract(Name = "GetRangeBookChapters")]

    public IEnumerable<Chapter> GetBookChapters(string url, int startIndex, int itemsCount)

    {

        return GetChapters(url, startIndex, itemsCount);

    }

  

    #endregion //GetBookChapters

  

    #endregion //Methods

}

#endregion //BookDataSourceService

Client implementation:

The client application is a Silverlight navigation application, that implements the Model-View-ViewModel design pattern (MVVM). ViewModels uses custom collections, that inherits VirtualCollection<T>. In the application there are two views: one with XamGrid and another with XamDataTree.

ViewModels implementation:

Implementation is a very similar to the one used in the article “On Demand Data Loading in XamTree”

In the BookChaptersData collection load size is a smaller – fixed to 5 items

BookChaptersData implementation

#region BookChaptersData

public class BookChaptersData : VirtualCollection<Chapter>

{

    #region Member Variables

  

    private int _loadSize = 5;

    private int _startIndex;

  

    #endregion //Member Variables

  

    #region Constructors

  

    public BookChaptersData()

    {

        this.LoadSize = _loadSize;

        this.AnticipatedCount = _itemsCount;

        this.ItemDataRequested += new EventHandler<ItemDataRequestedEventArgs>(BookChaptersData_ItemDataRequested);

    }

  

    #endregion //Constructors

  

    #region Properties

  

    #region Client

    private BookDataSourceServiceClient _client;

    public BookDataSourceServiceClient Client

    {

        get

        {

            if (this._client == null)

            {

                this._client = new BookDataSourceServiceClient();

            }

            return this._client;

        }

        set

        {

            this._client = value;

            this.OnPropertyChanged("Client");

        }

    }

    #endregion //Client

  

    #region ChapterBook

    /// <summary>

    /// local variable _ChapterBook

    /// </summary>

    private BookViewModel _chapterBook;

  

    /// <summary>

    /// Identifies the ChapterBook property.

    /// </summary>        

    public BookViewModel ChapterBook

    {

        get { return _chapterBook; }

        set

        {

            _chapterBook = value;

            OnPropertyChanged("ChapterBook");

        }

    }

    #endregion  //ChapterBook

  

    #region ItemsCount

    /// <summary>

    /// local variable _ItemsCount

    /// </summary>

    private int _itemsCount = 5;

  

    /// <summary>

    /// Identifies the ItemsCount property.

    /// </summary>        

    public int ItemsCount

    {

        get { return _itemsCount; }

        set

        {

            _itemsCount = value;

            this.AnticipatedCount = _itemsCount;

            OnPropertyChanged("ItemsCount");

        }

    }

    #endregion  //ItemsCount

  

    #endregion //Properties

  

    #region EventHandlers

  

    #region BookChaptersData_ItemDataRequested

    void BookChaptersData_ItemDataRequested(object sender, ItemDataRequestedEventArgs e)

    {

        if (this.ChapterBook == null)

        {

            return;

        }

  

        this._startIndex = e.StartIndex;

  

        this._client.GetRangeBookChaptersAsync(this.ChapterBook.Url, e.StartIndex, e.ItemsCount);

        if (this._client != null)

        {

            this._client.GetRangeBookChaptersCompleted -= ClientGetRangeBookChaptersCompleted;

            this._client.GetRangeBookChaptersCompleted += new EventHandler<GetRangeBookChaptersCompletedEventArgs>(ClientGetRangeBookChaptersCompleted);

            

        }

  

    }

    #endregion //BookChaptersData_ItemDataRequested

  

    #region ClientGetRangeBookChaptersCompleted

    void ClientGetRangeBookChaptersCompleted(object sender, GetRangeBookChaptersCompletedEventArgs e)

    {

        if (e.Result != null)

        {

  

            this.LoadItems(this._startIndex, e.Result);

  

        }

    }

    #endregion //ClientGetRangeBookChaptersCompleted

  

    #endregion //EventHandlers

}

#endregion //BookChaptersData

In some cases when the client application needs to receive quicker data (like when expand a XamDataTreeNode with many child nodes) we could force receiving the whole data moving to the last page(last part of data) in the collection. In the BookViewModel there is added a method GetBookChapters that receives all additional data using a VirtualCollection method MoveToLastPage().

BookViewModel implementation:

#region BookViewModel

public class BookViewModel : Book

{

    #region Constructors

  

    public BookViewModel()

    {

    }

  

    public BookViewModel(Book book)

    {

        this.Author = book.Author;

        this.Title = book.Title;

        this.Url = book.Url;

        this.ReleaseDate = book.ReleaseDate;

        this.UnitPrice = book.UnitPrice;

        this.Chapters = book.Chapters;

        this.ChaptersCount = book.ChaptersCount;

    }

    #endregion //Constructors

  

    #region Properties

  

    #region Client

    private BookDataSourceServiceClient _client;

    public BookDataSourceServiceClient Client

    {

        get

        {

            if (this._client == null)

            {

                this._client = new BookDataSourceServiceClient();

            }

            return this._client;

        }

        set

        {

            this._client = value;

            this.RaisePropertyChanged("Client");

        }

    }

  

    #endregion //Client

  

  

    #region BookChapters

    /// <summary>

    /// local variable _bookChapters

    /// </summary>

    private BookChaptersData _bookChapters;

  

    /// <summary>

    /// Identifies the Chapters property.

    /// </summary>        

    public BookChaptersData BookChapters

    {

        get

        {

            if (_bookChapters == null)

            {

                this._bookChapters = new BookChaptersData { Client = this.Client, ItemsCount = this.ChaptersCount, ChapterBook = this };

                this.RaisePropertyChanged("BookChapters");

            }

            return _bookChapters;

        }

        set

        {

            _bookChapters = value;

            this.RaisePropertyChanged("BookChapters");

        }

    }

  

    #endregion  //BookChapters

  

    #endregion //Properties

  

    #region Methods

  

    #region GetBookChapters

    public void GetBookChapters(int size)

    {

        if (this.BookChapters != null)

        {

            this.BookChapters.LoadSize = size;

            this.BookChapters.MoveToLastPage();

            this.RaisePropertyChanged("BookChapters");

        }

    }

    #endregion //GetBookChapters

  

    #endregion //Methods

  

}

#endregion //BookViewModel

View model are added as static resources on the application level. To see difference for both XamDataTree and XamGrid components in the application there are used two different instances of the BookDataVcViewModel (BookDataVcViewModel is a ViewModel, used as DataContext for views).

<Application   

  x:Class="XamGridLazyLoadingDemoApp.App"

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

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

  xmlns:vm="clr-namespace:XamGridLazyLoadingDemoApp.ViewModels">

  

  <Application.Resources>

    <ResourceDictionary>

      <ResourceDictionary.MergedDictionaries>

        <ResourceDictionary Source="Assets/Styles.xaml"/>

      </ResourceDictionary.MergedDictionaries>

    </ResourceDictionary>

        <vm:BookDataViewModel x:Key="BookDataViewModel" />

        <vm:BookDataVcViewModel x:Key="BookDataViewModelVC" />

        <vm:BookDataVcViewModel x:Key="BookDataViewModelVC2" />

    </Application.Resources>

  

</Application>

Views implementation:

XamGridVcLazyLoadingView implementation

Cerate a page, named XamGridVcLazyLoadingView with a XamGrid instance inside it:

<Grid x:Name="LayoutRoot" DataContext="{StaticResource BookDataViewModelVC}" >

    <Grid.RowDefinitions>

        <RowDefinition Height="300" />

        <RowDefinition/>

    </Grid.RowDefinitions>

    <ig:XamGrid x:Name="TestXamWebGrid"  AutoGenerateColumns="False" ItemsSource="{Binding Books}" SelectedRowsCollectionChanged="TestXamWebGrid_SelectedRowsCollectionChanged">

        <ig:XamGrid.ExpansionIndicatorSettings>

            <ig:ExpansionIndicatorSettings Visibility="Visible"/>

        </ig:XamGrid.ExpansionIndicatorSettings>

        <ig:XamGrid.SelectionSettings>

            <ig:SelectionSettings  CellClickAction="SelectRow"

            CellSelection="None" ColumnSelection="None"

            RowSelection="Single" />

        </ig:XamGrid.SelectionSettings>

        <ig:XamGrid.RowSelectorSettings>

            <ig:RowSelectorSettings Visibility="Visible" EnableRowNumbering="True"/>

        </ig:XamGrid.RowSelectorSettings>

        <ig:XamGrid.Columns>

            <ig:TextColumn Key="Title" Width="200" HeaderText="Title:"/>

            <ig:TextColumn Key="Author" Width="200" HeaderText="Author:"/>

            <ig:TextColumn Key="UnitPrice" HeaderText="Unit Price:"/>

            <ig:TextColumn Key="ChaptersCount" Width="70" HeaderText="Chapters Count:"/>

            <ig:HyperlinkColumn Key="Url" Width="300" HeaderText="Url:"/>               

            <ig:ColumnLayout Key="BookChapters">

                <ig:ColumnLayout.Columns>

                    <ig:TextColumn Key="Title" HeaderText="Chapter Title:"/>

                </ig:ColumnLayout.Columns>                        

            </ig:ColumnLayout>

        </ig:XamGrid.Columns>

        

    </ig:XamGrid>

    <Grid  Grid.Row="1" Visibility="Collapsed"

              HorizontalAlignment="Stretch" Margin="0,10,0,0" Name="bookGrid" VerticalAlignment="Top">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto" />

            <ColumnDefinition Width="Auto" />

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto" />

            <RowDefinition Height="Auto" />

            <RowDefinition Height="Auto" />

            <RowDefinition Height="Auto" />

            <RowDefinition Height="Auto" />

        </Grid.RowDefinitions>

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

        <TextBox Grid.Column="1" Grid.Row="0" Height="23" HorizontalAlignment="Left" Margin="3" Name="authorTextBox" Text="{Binding Path=Author, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center" Width="120" />

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

        <TextBox Grid.Column="1" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="3" Name="releaseDateTextBox" Text="{Binding Path=ReleaseDate, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center" Width="120" />

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

        <TextBox Grid.Column="1" Grid.Row="2" Height="23" HorizontalAlignment="Left" Margin="3" Name="titleTextBox" TextWrapping="Wrap" Text="{Binding Path=Title, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center"  MinWidth="120" />

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

        <TextBox Grid.Column="1" Grid.Row="3" Height="23" HorizontalAlignment="Left" Margin="3" Name="unitPriceTextBox" Text="{Binding Path=UnitPrice, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center" Width="120" />

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

        <TextBox Grid.Column="1" Grid.Row="4" Height="23" HorizontalAlignment="Left" Margin="3" Name="urlTextBox" Text="{Binding Path=Url, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center" Width="120" />

    </Grid>

</Grid>

Column layouts are used to display only part of the properties from the hierarchical data.

public partial class XamGridVcLazyLoadingView : Page

{

  

    #region Constructors

    public XamGridVcLazyLoadingView()

    {

        InitializeComponent();

    }

    #endregion //Constructors

  

    #region Methods

  

    #region OnNavigatedTo

    // Executes when the user navigates to this page.

    protected override void OnNavigatedTo(NavigationEventArgs e)

    {

    }

    #endregion //OnNavigatedTo 

  

    #endregion //Methods

  

    #region EventHandlers

  

    #region TestXamWebGrid_SelectedRowsCollectionChanged

    private void TestXamWebGrid_SelectedRowsCollectionChanged(object sender, Infragistics.Controls.Grids.SelectionCollectionChangedEventArgs<Infragistics.Controls.Grids.SelectedRowsCollection> e)

    {

  

        if (e.NewSelectedItems != null && e.NewSelectedItems.Count > 0)

        {

            Row row = e.NewSelectedItems[0];

            var book = row.Data as BookViewModel;

            if (book != null)

            {

                if (bookGrid.Visibility == System.Windows.Visibility.Collapsed)

                {

                    bookGrid.Visibility = System.Windows.Visibility.Visible;

                }

                bookGrid.DataContext = book;

                book.GetBookChapters(book.ChaptersCount);

            }

        }

  

    }

    #endregion //TestXamWebGrid_SelectedRowsCollectionChanged

  

    #endregion //EventHandlers

}

First time when data is loaded there are loaded only first 5 chapters from each book where are chapters available. All other chapters are loaded part by part when a parent row is expanded. Expansion indicators are visible only for the rows, representing books with available chapters.

XamDataTreeVcLazyLoadingView implementation

Cerate a page, named XamDataTreeVcLazyLoadingView with a XamDataTree instance inside it:

<Grid x:Name="LayoutRoot" DataContext="{StaticResource BookDataViewModelVC2}">

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="380"/>

        <ColumnDefinition/>

    </Grid.ColumnDefinitions>

    <ig:XamDataTree x:Name="BookDataTree" NodeExpansionChanged="BookDataTree_NodeExpansionChanged" ItemsSource="{Binding Books}" SelectedNodesCollectionChanged="BookDataTree_SelectedNodesCollectionChanged" >

        <ig:XamDataTree.SelectionSettings>

            <ig:TreeSelectionSettings NodeSelection="Single"/>

        </ig:XamDataTree.SelectionSettings>

        <ig:XamDataTree.GlobalNodeLayouts>

            <ig:NodeLayout Key="BookChapters" TargetTypeName="BookViewModel" DisplayMemberPath="Title"/>

        </ig:XamDataTree.GlobalNodeLayouts>

    </ig:XamDataTree>

    <Grid Grid.Column="1">

        <Grid.RowDefinitions>

            <RowDefinition Height="60"/>

            <RowDefinition/>

        </Grid.RowDefinitions>

        <StackPanel Orientation="Vertical">

            <TextBlock x:Name="TxtTitleBook" >

                <Run Text="XamDataTree and VirtualCollection"/>

                <LineBreak/>

                <Run Text="lazy Loading Sample:"/>

            </TextBlock>

            <TextBlock x:Name="TxtSelectedBook" Text="Select Book:"/>

        </StackPanel>

  

        <Grid Grid.Row="1" Visibility="Collapsed"

              HorizontalAlignment="Stretch" Margin="0,10,0,0" Name="bookGrid" VerticalAlignment="Top">

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="Auto" />

                <ColumnDefinition Width="Auto" />

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto" />

                <RowDefinition Height="Auto" />

                <RowDefinition Height="Auto" />

                <RowDefinition Height="Auto" />

                <RowDefinition Height="Auto" />

            </Grid.RowDefinitions>

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

            <TextBox Grid.Column="1" Grid.Row="0" Height="23" HorizontalAlignment="Left" Margin="3" Name="authorTextBox" Text="{Binding Path=Author, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center" Width="120" />

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

            <TextBox Grid.Column="1" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="3" Name="releaseDateTextBox" Text="{Binding Path=ReleaseDate, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center" Width="120" />

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

            <TextBox Grid.Column="1" Grid.Row="2" Height="23" HorizontalAlignment="Left" Margin="3" Name="titleTextBox" TextWrapping="Wrap" Text="{Binding Path=Title, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center"  MinWidth="120" />

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

            <TextBox Grid.Column="1" Grid.Row="3" Height="23" HorizontalAlignment="Left" Margin="3" Name="unitPriceTextBox" Text="{Binding Path=UnitPrice, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center" Width="120" />

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

            <TextBox Grid.Column="1" Grid.Row="4" Height="23" HorizontalAlignment="Left" Margin="3" Name="urlTextBox" Text="{Binding Path=Url, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" VerticalAlignment="Center" Width="120" />

        </Grid>

    </Grid>

</Grid>

When some XamDataTreeNode instance, representing a book was expanded, all additional data for the book chapters is loaded from the server, calling GetBookChapters method:

#region XamDataTreeVcLazyLoadingView

public partial class XamDataTreeVcLazyLoadingView : Page

{

    #region Constructors

    public XamDataTreeVcLazyLoadingView()

    {

        InitializeComponent();

    }

    #endregion //Constructors

  

    #region Methods

    #region OnNavigatedTo

    /// <summary>

    /// Called when a page becomes the active page in a frame.

    /// </summary>

    /// <param name="e">An object that contains the event data.</param>

    protected override void OnNavigatedTo(NavigationEventArgs e)

    {

    }

    #endregion //OnNavigatedTo 

    #endregion //Methods

  

    #region EventHandlers

    #region BookDataTree_SelectedNodesCollectionChanged

    private void BookDataTree_SelectedNodesCollectionChanged(object sender, Infragistics.Controls.Menus.NodeSelectionEventArgs e)

    {

  

        if (e.CurrentSelectedNodes != null && e.CurrentSelectedNodes.Count > 0)

        {

            XamDataTreeNode node = e.CurrentSelectedNodes[0];

  

            var book = node.Data as BookViewModel;

            if (book != null)

            {

                if (bookGrid.Visibility == System.Windows.Visibility.Collapsed)

                {

                    bookGrid.Visibility = System.Windows.Visibility.Visible;

                }

                bookGrid.DataContext = book;

            }

        }

  

    }

    #endregion //BookDataTree_SelectedNodesCollectionChanged

  

    #region BookDataTree_NodeExpansionChanged

    private void BookDataTree_NodeExpansionChanged(object sender, NodeExpansionChangedEventArgs e)

    {

        XamDataTreeNode node = e.Node;

        if (node != null && node.IsExpanded)

        {

            var book = node.Data as BookViewModel;

            if (book != null)

            {

                book.BookChapters.LoadSize = book.ChaptersCount;

                book.GetBookChapters(book.ChaptersCount);

            }

        }

  

    }

    #endregion //BookDataTree_NodeExpansionChanged 

    #endregion //EventHandlers

  

}

#endregion //XamDataTreeVcLazyLoadingView

Run the application:

The home page is a XamGridVcLazyLoadingView.
Data for the visible rows is loaded. Only first 5 chapters for books where is available data for book chapters are loaded. This is enough to recognize where are child records via expansion indicators.

Select a row. Data for the selected book is visible below the XamGrid.

Expand the selected row. Only data for the visible rows will be loaded.

Scroll down to see other chapters. Data is loaded part by part.

Select a page “XamDataTree with VirtualCollection” ( XamDataTreeVcLazyLoadingView ).

Select some node - data for the selected book is visible right the XamDataTree.

Expand the selected node - all additional data for the book chapters is loaded.

Sample code could be downloaded here: