Paging in WPF TreeGrid (SfTreeGrid)

18 Nov 201817 minutes to read

SfTreeGrid provides support to manipulate the nodes using SfDataPager control. You can refer SfDataPager control user guide for more information.

Getting started

Follow the below steps to bind SfTreeGrid with SfDataPager.

  1. Create IEnumerable collection that you want to bind and set it to SfDataPager.Source property.

  2. Set SfDataPager.PageSize property to specify the number of RootNodes to be displayed per page.

  3. Bind SfDataPager.PagedSource to SfTreeGrid.ItemsSource property. So whenever the page is changed, PagedSource will be update based on current page.

NOTE

Paging supports all types of TreeGridView, except when using SfTreeGrid in unbound mode (TreeGridUnBoundView). The following code snippet demonstrates the TreeGridSelfRelationalView type.
Similarly, paging support can be implemented for TreeGridNestedView.

<Grid>
       <Grid.RowDefinitions>
           <RowDefinition Height="*" />
           <RowDefinition Height="Auto" />
       </Grid.RowDefinitions>
   
       <syncfusion:SfTreeGrid 
               x:Name="treeGrid"
               Grid.Row="0"
               AutoGenerateColumns="True"
               ItemsSource="{Binding ElementName=sfDataPager, Path=PagedSource}"
               SelfRelationRootValue="-1"
               ParentPropertyName="ID" 
               ChildPropertyName="ReportsTo">
       </syncfusion:SfTreeGrid>
   
       <datapager:SfDataPager
               x:Name="sfDataPager"
               Grid.Row="1"
               Orientation="Horizontal"
               NumericButtonCount="7"
               PageSize="3"
               Source="{Binding Employees}" />
   </Grid>
public class ViewModel
   {
       public ViewModel()
       {
           this.Employees = this.GetEmployees();
       }
       
       private ObservableCollection<EmployeeInfo> _employees;
   
       public ObservableCollection<EmployeeInfo> Employees
       {
           get { return _employees; }
           set { _employees = value; }
       }
   
       internal ObservableCollection<EmployeeInfo> GetEmployees()
       {
           ObservableCollection<EmployeeInfo> employeeDetails = new ObservableCollection<EmployeeInfo>();
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Ferando", LastName = "Joseph", Title = "Management", Salary = 2000000, ReportsTo = -1, ID = 2 });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "John", LastName = "Adams", Title = "Accounts", Salary = 2000000, ReportsTo = -1, ID = 3 });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Thomas", LastName = "Jefferson", Title = "Sales", Salary = 300000, ReportsTo = -1, ID = 4 });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Andrew", LastName = "Madison", Title = "Marketing", Salary = 4000000, ReportsTo = -1, ID = 5 });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Ulysses", LastName = "Pierce", Title = "HumanResource", Salary = 1500000, ReportsTo = -1, ID = 6 });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Jimmy", LastName = "Harrison", Title = "Purchasing", Salary = 200000, ReportsTo = -1, ID = 7 });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Ronald", LastName = "Fillmore", Title = "Production", Salary = 2800000, ReportsTo = -1, ID = 8 });
       
           //Management
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Andrew", LastName = "Fuller", ID = 9, Salary = 1200000, ReportsTo = 2, Title = "Vice President" });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Janet", LastName = "Leverling", ID = 10, Salary = 1000000, ReportsTo = 2, Title = "GM" });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Steven", LastName = "Buchanan", ID = 11, Salary = 900000, ReportsTo = 2, Title = "Manager" });
   
           //Accounts
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Nancy", LastName = "Davolio", ID = 12, Salary = 850000, ReportsTo = 3, Title = "Accounts Manager" });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Margaret", LastName = "Peacock", ID = 13, Salary = 700000, ReportsTo = 3, Title = "Accountant" });
   
           //Sales
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Laura", LastName = "Callahan", ID = 16, Salary = 900000, ReportsTo = 4, Title = "Sales Manager" });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Anne", LastName = "Dodsworth", ID = 17, Salary = 800000, ReportsTo = 4, Title = "Sales Representative" });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Albert", LastName = "Hellstern", ID = 18, Salary = 750000, ReportsTo = 16, Title = "Sales Representative" });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Tim", LastName = "Smith", ID = 19, Salary = 700000, ReportsTo = 17, Title = "Sales Representative" });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Justin", LastName = "Brid", ID = 20, Salary = 700000, ReportsTo = 17, Title = "Sales Representative" });
   
           //Back Office
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Caroline", LastName = "Patterson", ID = 21, Salary = 800000, ReportsTo = 5, Title = "Receptionist" });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Xavier", LastName = "Martin", ID = 22, Salary = 700000, ReportsTo = 5, Title = "Mail Clerk" });
   
           //HR
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Laurent", LastName = "Pereira", ID = 23, Salary = 900000, ReportsTo = 6, Title = "HR Manager" });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Syed", LastName = "Abbas", ID = 24, Salary = 650000, ReportsTo = 6, Title = "HR Assistant" });
   
           //Purchasing
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Pamela", LastName = "Ansman-Wolfe", ID = 26, Salary = 600000, ReportsTo = 7, Title = "Purchase Manager" });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Michael", LastName = "Blythe", ID = 27, Salary = 550000, ReportsTo = 7, Title = "Store Keeper" });
   
           //Production
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Jillian", LastName = "Carson", ID = 29, Salary = 600000, ReportsTo = 8, Title = "Production Manager" });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Shu", LastName = "Ito", ID = 30, Salary = 550000, ReportsTo = 8, Title = "Production Engineer" });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Stephen", LastName = "Jiang", ID = 31, Salary = 450000, ReportsTo = 30, Title = "Production Engineer" });
   
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Albert", LastName = "Hellstern", ID = 32, Salary = 750000, ReportsTo = 9, Title = "Sales Representative" });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Tim", LastName = "Smith", ID = 33, Salary = 700000, ReportsTo = 9, Title = "Sales Representative" });
   
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Laura", LastName = "Callahan", ID = 36, Salary = 900000, ReportsTo = 12, Title = "Sales" });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Anne", LastName = "Dodsworth", ID = 37, Salary = 800000, ReportsTo = 12, Title = "Sales" });
           employeeDetails.Add(new EmployeeInfo() { FirstName = "Albert", LastName = "Hellstern", ID = 38, Salary = 750000, ReportsTo = 37, Title = "Sales" });
   
           return employeeDetails;
       }
   }
   
   public class EmployeeInfo
   {
       int _id;
       string _firstName;
       string _lastName;
       private string _title;
       double? _salary;
       int _reportsTo;
   
       public string FirstName
       {
           get { return _firstName; }
           set { _firstName = value; }
       }
   
       public string LastName
       {
           get { return _lastName; }
           set { _lastName = value; }
       }
   
       public int ID
       {
           get { return _id; }
           set { _id = value; }
       }
   
       public int ReportsTo
       {
           get { return _reportsTo; }
           set { _reportsTo = value; }
       }
   
       public string Title
       {
           get { return _title; }
           set { _title = value; }
       }
   
       public double? Salary
       {
           get { return _salary; }
           set { _salary = value; }
       }
   
   }

WPF TreeGrid diplays Multiple Pages using SfDataPager

Limitations

  1. Paging is not supported when using SfTreeGrid in unbound mode (TreeGridUnBoundView).
  2. SfDataPager’s on‑demand loading functionality is not supported.
  3. Child nodes are not considered in page size calculation.
  4. Selection should not be maintained when moving from one page to another.
  5. Sorting and Filtering are applied across all pages. However, node reordering occurs only within each individual page.
  6. The data operations such as Add, Replace, Remove, Insert, and Move are not supported.