Section | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
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 CommandWhen 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.
Update Behavior in Drag DropWhen 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 PropertyUsing UXTreeListUXTreeList 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 DataTo 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.
Handling Data OperationSimilar 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 OperationClient 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 OperationServer 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 OperationThe 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 PropertyBy 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.
|
...
The following table summarizes the members exposed in this class.
Public Constructors
UXTreeList Constructor() | Initializes a new instance of the UXTreeList class. |
Public Properties
AllowMoveItem | Gets or sets a value that determines whether the UXTreeListRow can be moved. |
CanDragItemCommand | Gets or sets command that will be invoked when try to drag an item. |
DropItemCommand | Gets or sets command that will be invoked when item is dropped. |
IDBinding | |
IndentSpacer | Gets or sets a value that determines the indent spacer for each row level. |
InitialTreeListState | Gets or sets a value that determines the initial state for tree list row. |
IsLoadOnDemand | Gets or sets a value that determines whether the item is load on demand or not. |
ParentIDBinding | |
ProcessedItem | Gets or sets a value that indicates the item that user process when load on demand is active. |
Fields
AllowMoveItemProperty | Identifies the AllowMoveItem dependency property. |
CanDragItemCommandProperty | Identifies the CanDragItemCommand dependency property. |
DropItemCommandProperty | Identifies the DropItemCommand dependency property. |
IndentSpacerProperty | Identifies the IndentSpacer dependency property. |
InitialTreeListStateProperty | Identifies the InitialTreeListState dependency property. |
IsLoadOnDemandProperty | Identifies the IsLoadOnDemand dependency property. |
ProcessedItemProperty | Identifies the ProcessedItem dependency property. |
Public Methods
...
Public Constructors
Anchor | ||||
---|---|---|---|---|
|
...
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 CapabilityUXTreeList 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 CapabilityUXTreeList 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. |
...