A very common design when displaying data grids with child data is to defer fetching the child data until the user expands the parent. The parent needs to know if it has children so the row expander can be initially displayed, but can fetch the actual children on demand.
Let's consider a grid that displays employees and, for employees that manage other employees, displays a child grid of those employees. The grid might look like this.
When we fetch the parent list of employees, we know Ian manages someone but we don't know who. Because it takes a few milliseconds to get the list of Ian's reports we only want to do it if the user clicks the row expander.
Infragistic's XamDataGrid does not support this common scenario. The ExpansionIndicatorDisplayMode attribute can take the following values.
- Default - used to make the developer think they're getting an extra option when they aren't
- Never - Never show a row expander
- Always - Always show a row expander
- CheckOnExpand - Show a row expander until the user clicks on it, try to fetch the children, then hide it if there are no children
- CheckOnDisplay - Try to fetch the children as soon as the row moves into view and hide the row expander if there are no children.
For 99% of scenarios only CheckOnDisplay is even remotely useful when a parent may or may not have children. Deferred scrolling is unacceptable. Unfortunately there is no way to bind the visibility of the row expander to data in the row.
When you use the CheckOnDisplay option the grid looks for children as rows are scrolled into view. If it takes even 100 ms to check for children the scrolling performance will be unacceptable.
Let's create a poorly scrolling page and see how we can fix it. Create a new WPF project in C# and call it ScrollingXamDataGrid.
Add project references to Infragistics like this.
The XAML is trivial.
<Window x:Class="ScrollingXamDataGrid.MainWindow"
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:local="clr-namespace:ScrollingXamDataGrid"
xmlns:igDP="http://infragistics.com/DataPresenter"
mc:Ignorable="d" DataContext="{Binding RelativeSource={RelativeSource Self}}"
Title="MainWindow" Height="200"
Width="300">
<Grid>
<igDP:XamDataGrid GroupByAreaLocation="None" DataSource="{Binding Employees}" ScrollingMode="Immediate">
<igDP:XamDataGrid.FieldLayoutSettings>
<igDP:FieldLayoutSettings SelectionTypeRecord="Single" AutoGenerateFields="False"
ExpansionIndicatorDisplayMode="CheckOnDisplay" AllowFieldMoving="No"/>
</igDP:XamDataGrid.FieldLayoutSettings>
<igDP:XamDataGrid.FieldSettings>
<igDP:FieldSettings AllowEdit="False"/>
</igDP:XamDataGrid.FieldSettings>
<igDP:XamDataGrid.FieldLayouts>
<igDP:FieldLayout Key="Employee">
<igDP:TextField Label="Name" Name="Name"/>
<igDP:Field Name="Reports"/>
</igDP:FieldLayout>
<igDP:FieldLayout ParentFieldLayoutKey="Employee" ParentFieldName="Reports">
<igDP:TextField Label="Manages" Name="Name" HorizontalContentAlignment="Right"/>
</igDP:FieldLayout>
</igDP:XamDataGrid.FieldLayouts>
</igDP:XamDataGrid>
</Grid>
</Window>
using System;
using System.Collections.ObjectModel;
using System.Threading;
using System.Windows;
namespace ScrollingXamDataGrid
{
public partial class MainWindow : Window
{
public class cEmployee
{
public String Name { get; set; }
public ObservableCollection<cEmployee> Reports
{
get
{
Thread.Sleep(100);
switch (this.Name)
{
case "Ian": return new ObservableCollection<cEmployee>() { new cEmployee("Xavier") };
case "Marge": return new ObservableCollection<cEmployee>() { new cEmployee("Yvette") };
case "Nancy": return new
ObservableCollection<cEmployee>() { new cEmployee("Zooks") };
default: return null;
}
}
}
public cEmployee(String
Name)
{
this.Name = Name;
}
}
private ObservableCollection<cEmployee> _Employees;
public ObservableCollection<cEmployee> Employees
{
get
{ return _Employees; }
set
{ _Employees = value; }
}
public MainWindow()
{
Employees = new ObservableCollection<cEmployee>();
Employees.Add(new cEmployee("Abby"));
Employees.Add(new cEmployee("Brian"));
Employees.Add(new cEmployee("Chris"));
Employees.Add(new cEmployee("Dan"));
Employees.Add(new cEmployee("Englebert"));
Employees.Add(new cEmployee("Frank"));
Employees.Add(new cEmployee("Gabby"));
Employees.Add(new cEmployee("Hortense"));
Employees.Add(new cEmployee("Ian"));
Employees.Add(new cEmployee("Jack"));
Employees.Add(new cEmployee("Kim"));
Employees.Add(new cEmployee("Lionel"));
Employees.Add(new cEmployee("Marge"));
Employees.Add(new cEmployee("Nancy"));
Employees.Add(new cEmployee("Ollie"));
Employees.Add(new cEmployee("Peter"));
Employees.Add(new cEmployee("Quincy"));
Employees.Add(new cEmployee("Rachael"));
Employees.Add(new cEmployee("Stephen"));
Employees.Add(new cEmployee("Tarquin"));
Employees.Add(new cEmployee("Ulla"));
Employees.Add(new cEmployee("Vince"));
Employees.Add(new cEmployee("Walter"));
Employees.Add(new cEmployee("Xavier"));
Employees.Add(new cEmployee("Yvette"));
Employees.Add(new cEmployee("Zolla"));
InitializeComponent();
}
}
}
public bool HasReports { get; set; }
Modify the existing constructor and add a new one.
public cEmployee(String
Name)
{
this.Name = Name;
this.HasReports = false;
}
public cEmployee(String
Name, bool HasReports)
{
this.Name = Name;
this.HasReports = HasReports;
}
Alter the initiators for Ian, Marge, and Nancy.
Employees.Add(new cEmployee("Ian", true));
Employees.Add(new cEmployee("Marge", true));
Employees.Add(new cEmployee("Nancy", true));
Normally this functionality would be implemented by adding CASE WHEN EXISTS (SELECT ...) THEN 1 ELSE 0 END AS HasReports to the SQL that populated the employee list.
<igDP:XamDataGrid.Resources>
<Style TargetType="igWindows:ExpansionIndicator">
<Style.Triggers>
<DataTrigger Binding="{Binding DataItem.HasReports}" Value="False">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="White"/>
</DataTrigger>
</Style.Triggers>
</Style>
</igDP:XamDataGrid.Resources>
