Intersoft UXTreeList is a powerful MVVM-ready data control that represent data in tree like structure. It inherits all innovative features from UXGridView such as various column types, built-in column filtering, data grouping, data aggregation, data exporting, value list, customize editing controls, ISO standards user experiences and much more.

Using UXTreeList

UXTreeList derives from UXGridView which represents a data grid control. This means that it shares all the innovative feature from UXGridView. To learn more about UXGridView, see UXGridView Overview.

Binding Data

To bind data to UXTreeList, you need to set the ItemsSource property with an object of type HierarchicalCollectionView and set the ParentIDBinding and IDBinding properties in UXTreeList to appropriate the column in your data source.

The HierarchicalCollectionView expects linear data source similar to how you store the data in a relational database where you have the ID as primary key and ParentID as the foreign key.

The following is an example of data source accepted by HierarchicalCollectionView.

The following code shows how to implement a simple UXTreeList with data binding in XAML.

<Intersoft:UXTreeList ItemsSource="{Binding Items}" ParentIDBinding="{Binding ReportsTo}" IDBinding="{Binding EmployeeID}"/>

this.Items = new HierarchicalCollectionView(new ObservableCollection<Employee>(items.Cast<Employee>()));

Handling Data Operation

Similar to UXGridView, you can view or interact with information in UXTreeList by performing grouping, sorting and filtering. However, paging is not supported due to the nature of the tree list control.

To handle this data operation UXTreeList provides two approaches that you can choose from by setting the QueryOperation property.

Client Data Operation

Client data operation means that the data operation, such as sorting, and filtering; are executed in the client side against the data source provided to the UXTreeList. To use this operation, you set the QueryOperation property to Client.

It's highly recommended to use the Client data operation for the best user experiences, such as automatic persistence of the expanded state.

Server Data Operation

Server data operation means that the data operation, such as sorting, and filtering; are processed in the server side. In this mode, UXTreeList does not handle the data operation by its own. It will simply provide the query information allowing you to process it further to a data service.

To use this mode, you set the QueryOperation property to Server. When this mode is selected, UXTreeList will not attempt to perform the data operation on the given data source. Instead, it will store and distribute the query information on several properties such as FilterDescriptors, SortDescriptors and PageDescriptor property. When one of these properties change, the QueryChanged event of the associated QueryDescriptor will be raised. This allows you to streamline the query processing in a centralized function, which is one of the strong benefits of QueryDescriptor. For more information about QueryDescriptor, see QueryDescriptor Overview

Using this approach the ItemsSource will always be updated every time perform a data operation which will reset all the expanded state to the original states determined by InitialTreeListState.

It is recommended to load all the data first and use the QueryOperation = Client for better user experiences. You can opted to use the QueryOperation = Server when the data is relatively large and you always play around with filtering since paging is not supported in UXTreeList.

Persist Expanded State When Performing Client Data Operation

The benefit of doing client data operation in UXTreeList is that all the expanded state of each item will be persisted. This applies to all client data operations such as sorting, filtering and grouping.

Inherited Features from UXGridView

Since UXTreeList is derived from UXGridView, it inherits all sophisticated features from UXGridView. To learn more about these inherited features see the following:

• UXGridView Overview
• Sorting Data with UXGridView
• Grouping Data with UXGridView
• Filtering Data with UXGridView
• Exporting Data with UXGridView
• Editing Data with UXGridView
• Customizing Edit Controls in UXGridView
• UXGridView Walkthroughs
• UXGridView How-to Topics 

Understanding UXTreeListTreeColumn

UXTreeListTreeColumn represents the tree column in UXTreeList which contains the expand and collapse button. UXTreeListTreeColumn derives from UXGridViewTextColumn, therefore you can utilize all the features available in UXGridViewTextColumn such as DisplayMode, TextAndImageRelation, CellTemplate, and CellEditTemplate.

<Intersoft:UXTreeList AutoGenerateColumns="False" IsBusy="{Binding IsBusy, Mode=TwoWay}"
                         ItemsSource="{Binding Items}" IDBinding="{Binding EmployeeID}" ParentIDBinding="{Binding ReportsTo}">
    <Intersoft:UXTreeList.Columns>
        <Intersoft:UXTreeListTreeColumn Header="Employee ID" Binding="{Binding EmployeeID}" 
            ImageBinding="{Binding PhotoPath}" 
            DisplayMode="Image" ImageHeight="64" ImageWidth="64"/>
        <Intersoft:UXGridViewTextColumn Header="First Name" Binding="{Binding FirstName}"/>
        <Intersoft:UXGridViewTextColumn Header="Last Name" Binding="{Binding LastName}"/>
        <Intersoft:UXGridViewTextColumn Header="Address" Binding="{Binding Address}"/>
        <Intersoft:UXGridViewTextColumn Header="Home Phone" Binding="{Binding HomePhone}"/>
    </Intersoft:UXTreeList.Columns>
</Intersoft:UXTreeList>

Understanding Load-on-Demand Capability

UXTreeList supports load on demand scenario using MVVM pattern where only the root items are loaded initially. The children will be loaded on demand as users expanded the item for the first time. This feature is particularly useful to improve the overall performance when the assigned data source is relatively large.

To enable load-on-demand, you set the IsLoadOnDemand property of the control to true, and set the ExpandedItem and ProcessedItem properties to appropriate binding in your ViewModel.

The ExpandedItem property allows you to interact with the entity being expanded and write your own logic to retrieve the child items in the ViewModel. Once the child items become available, you assign the original entity to the ProcessedItem property to notify the control that the loading process is completed.

In this mode, a busy indicator will be automatically displayed in each expanded item during the loading progress.

To learn more how to enable load on demand in UXTreeList, see How-to: Enable Load On Demand Behavior In UXTreeList.

Modifying Initial Tree List State

By default all the loaded item in UXTreeList will be in Collapsed state. You can instruct UXTreeList to open all the loaded item by setting the InitialTreeListState property to Visible.

The following code shows how a set the initial tree list state in UXTreeList.

<Intersoft:UXTreeList ItemsSource="{Binding Items}" ParentIDBinding="{Binding ReportsTo}" IDBinding="{Binding EmployeeID}" InitialTreeListState="Visible"/>

Note that this feature is not supported for Load on Demand scenario.

Working with Smart Data Filtering

Smart Data Filtering is an extended feature for UXGridView filtering which allows users to filter the item based on certain filter criteria. In UXTreeList, the filtering process will done in two phase.

• The first phase is to find out all items that match the given filter criteria.
• The second phase is to find out all the parent items of item found in the first phase up to the root item.

The result of this process is the parent items and the root item of the filtered item will still be shown regardless of whether the filter criteria actually match the parent items and the root item.

See the following illustrations to understand how Smart Data Filtering works.

As seen above, the root and parent items with In Progress status will still be displayed eventhough the filtering is set to Completed. In this case, the Completed filter is applied only to the leaf nodes which provides more intuitive results for users when analyzing the filtered data.

Implementing Drag and Drop Behavior

UXTreeList also supports item moving through an intuitive drag-and-drop behavior. To enable this behavior, you set the AllowMoveItem property to true.

When enabled, users can drag an item in UXTreeList and drop it into another item to make it the child of the target item.

The drag-and-drop behavior in UXTreeList supports two-way item moving through automatic mouse gesture detection. This means that users can either move an item into another child by dropping it within the target item's boundary, or move a child item out to the root by dropping it to the empty space in the UXTreeList control area.

Handling Drop Item Command and Can Drag Item Command

When you drop an item, whether to the root item or to another parent item, UXTreeList will automatically assign the ParentID based on the position where the item is dropped.

If you would like to add additional actions when the drop action occurred, you can do that through DropItemCommand. Additionally, you can also use CanDragItemCommand to determine whether the item can be dragged.

The following code shows how to handle DropItemCommand and CanDragItemCommand.

    public class TreeListDragDropViewModel: TreeListViewModel
    {
        public TreeListDragDropViewModel()
        {
            this.CanDragItemCommand = new DelegateCommand(ExecuteCanDragItem, CanDragItem);
            this.DropItemCommand = new DelegateCommand(ExecuteDropItem);
        }

        public DelegateCommand CanDragItemCommand { get; set; }
        public DelegateCommand DropItemCommand { get; set; }

        private bool CanDragItem(object parameter)
        {
            Employee employee = parameter as Employee;
            if (employee != null && employee.ReportsTo == null)
                return false;

            return true;
        }

        private void ExecuteDropItem(object parameter)
        {
            object[] parameters = (object[])parameter;
            Employee sourceObject = parameters[0] as Employee;
            Employee targetObject = parameters[1] as Employee;

            // do some logic
        }

        private void ExecuteCanDragItem(object parameter)
        {
            throw new NotImplementedException();
        }
    }

Update Behavior in Drag Drop

When the parent of an item is changed through the drag-drop operation, UXTreeList will call the UpdateRowCommand command immediately. Consequently, the drag-drop operation will seamlessly perform the save operation to the database. You can, however, enable collective updates by setting the CanUserBatchUpdate property to true.

For more information about data editing and update behavior, see Editing Data with UXGridView.