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.

Working with IDBinding Property and ParentIDBinding Property

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.

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.

Working with InitialTreeListState Property

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"/>