Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Section
Section

Working with AllowMoveItem Property, CanDragItemCommand Property and DropItemCommand Property

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.

Code Block
titleC#
languagec#
    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.

EmployeeIDLast NameFirst NameTitleDate of BirthReports To
1DavolioNancySales Representative12/8/19482
2FullerAndrewVice President, Sales2/9/1952NULL
3LeverlingJanetSales Representative8/30/19632
4PeacockMargaretSales Representative9/19/19372
5BuchananSteveSales Manager3/4/19552
6SuyamaMichaelSales Representative7/2/19635
7KingRobertSales Representative5/29/19605
8CallahanLauraInside Sales Coordinator1/9/19585
9DodsworthAnneSales Representative1/27/19662

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

Code Block
titleXAML
languagexml
<Intersoft:UXTreeList ItemsSource="{Binding Items}"
	ParentIDBinding="{Binding ReportsTo}" IDBinding="{Binding EmployeeID}"/>
Code Block
titleC#
languagec#
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 FilterDescriptorsSortDescriptors 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.

Modern note

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.

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.

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

Modern note

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

...

The following table summarizes the members exposed in this class.

Public Constructors

UXTreeList Constructor()Initializes a new instance of the UXTreeList class.

Public Properties

AllowMoveItemGets or sets a value that determines whether the UXTreeListRow can be moved.
CanDragItemCommandGets or sets command that will be invoked when try to drag an item.
DropItemCommandGets or sets command that will be invoked when item is dropped.
IDBinding 
IndentSpacerGets or sets a value that determines the indent spacer for each row level.
InitialTreeListStateGets or sets a value that determines the initial state for tree list row.
IsLoadOnDemandGets or sets a value that determines whether the item is load on demand or not.
ParentIDBinding 
ProcessedItemGets or sets a value that indicates the item that user process when load on demand is active.

Fields

AllowMoveItemPropertyIdentifies the AllowMoveItem dependency property.
CanDragItemCommandPropertyIdentifies the CanDragItemCommand dependency property.
DropItemCommandPropertyIdentifies the DropItemCommand dependency property.
IndentSpacerPropertyIdentifies the IndentSpacer dependency property.
InitialTreeListStatePropertyIdentifies the InitialTreeListState dependency property.
IsLoadOnDemandPropertyIdentifies the IsLoadOnDemand dependency property.
ProcessedItemPropertyIdentifies the ProcessedItem dependency property.

Public Methods

...

Public Constructors

Anchor
M:Intersoft.Client.UI.Data.UXTreeList.#ctor
M:Intersoft.Client.UI.Data.UXTreeList.#ctor

...

public bool IsLoadOnDemand { get; set; }

Gets or sets a value that determines whether the item is load on demand or not.

Remarks

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 UXGridView and UXTreeList properties to appropriate binding in your ViewModel. The UXGridView 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 UXTreeList 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.

 

...

public object ProcessedItem { get; set; }

Gets or sets a value that indicates the item that user process when load on demand is active.

Remarks

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 UXTreeList property of the control to true, and set the UXGridView and ProcessedItem properties to appropriate binding in your ViewModel. The UXGridView 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.

 

...