Intersoft Community - ClientUI - TreeView Drag Drop

TreeView Drag Drop

handy@intersoftpt.com — Mon, 19 Dec 2011 20:45:53 GMT

Hello,

Please try to zoom the browser. In simple sample, some scenarios are not handled automatically.

Regards,
Handy

TreeView Drag Drop

terrell.jm@gmail.com — Mon, 19 Dec 2011 14:55:42 GMT

Sorry for another question, but what do you mean by 'zoom scenario'. Thanks, Jonathan

TreeView Drag Drop

handy@intersoftpt.com — Sun, 18 Dec 2011 21:50:45 GMT

Hello Jonathan,

I am sorry for the late reply. Yes, you were correct. My previous solution was only for a simple scenario. There are some uncover scenarios, such as yours or in zoom scenario. You would need to use that drop event to cover up the rest things.

Regards,
Handy

TreeView Drag Drop

terrell.jm@gmail.com — Fri, 16 Dec 2011 19:06:32 GMT

Hi, do you have an update regarding my last reply, or should I close the issue. Thanks, Jonathan

TreeView Drag Drop

terrell.jm@gmail.com — Thu, 01 Dec 2011 03:52:51 GMT

Hi, thank you very much for the detailed response. We are very impressed with the level of assistance we have received during our evaluation.

The example you attached works well, but does not allow an item to be dragged and dropped to an empty sub-folder. If you remove all the items from a sub-folder then try and drag one back, it is not allowed. This is why I included the AllowDragObject and DragObjectCommand references in the original example. I assume trapping the Drop event would also work. Maybe there is a simpler way to do this? All the best, Jonathan

TreeView Drag Drop

handy@intersoftpt.com — Wed, 30 Nov 2011 23:56:12 GMT

Hello Jonathan,

Actually in order to use drag n drop between UXTreeView, you only need to turn on property AllowDropItem, AllowMoveItem, AllowRemoveItem, AllowReorderItem.
All of them should be handled by our DargDrop framework. I also attached a simple sample to show how to do it. Hope this helps.

Regards,
Handy

TreeView Drag Drop

handy@intersoftpt.com — Tue, 29 Nov 2011 04:34:46 GMT

Hello Jonathan,

We are very sorry for the late reply due to our priority to release R2. Regarding your question, I will forward it to our developer teams. I would need to discuss whether they have a better approach or not.
While waiting, please feel free to download and evaluate our R2, ClientUI6.

Regards,
Handy

TreeView Drag Drop

terrell.jm@gmail.com — Thu, 24 Nov 2011 10:57:13 GMT

Hi, spent some time investigating options. Have attached a small sample that supports drag and drop between two UXTreeViewControl. Would this be the best approach? The first control is declared in xaml, the second created in code-behind. Thanks, Jonathan

XAML code:

<UserControl x:Class="SilverlightApplication15.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:UXCollection="clr-namespace:Intersoft.Client.UI.Aqua.UXCollection;assembly=Intersoft.Client.UI.Aqua.UXCollection">
 <Grid>
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="*" />
 <ColumnDefinition Width="*" />
 </Grid.ColumnDefinitions>
 <UXCollection:UXTreeView x:Name="tree1" Grid.Column="0" BorderThickness="0">
 <UXCollection:UXTreeViewItem Header="Top" AllowDropItem="True" AllowDropObject="True" AllowMoveItem="True" AllowReorderItem="True"
 DropObjectCommand="{Binding DropObjectCommand}" IsExpanded="True">
 <UXCollection:UXTreeViewItem Header="Item 1" />
 <UXCollection:UXTreeViewItem Header="Item 2" />
 <UXCollection:UXTreeViewItem Header="Folder 1" AllowDropItem="True" AllowDropObject="True" AllowMoveItem="True" AllowReorderItem="True"
 DropObjectCommand="{Binding DropObjectCommand}" IsExpanded="True">
 <UXCollection:UXTreeViewItem Header="Item 1.1" />
 <UXCollection:UXTreeViewItem Header="Item 1.2" />
 <UXCollection:UXTreeViewItem Header="Item 1.3" />
 <UXCollection:UXTreeViewItem Header="Item 1.4" />
 <UXCollection:UXTreeViewItem Header="Item 1.5" />
 </UXCollection:UXTreeViewItem>
 <UXCollection:UXTreeViewItem Header="Item 3" />
 <UXCollection:UXTreeViewItem Header="Folder 2" AllowDropObject="True" DropObjectCommand="{Binding DropObjectCommand}" />
 </UXCollection:UXTreeViewItem>
 </UXCollection:UXTreeView>
 <UXCollection:UXTreeView x:Name="tree2" Grid.Column="1" BorderThickness="1,0,0,0" />
 </Grid>
</UserControl>

C# code:

using System;
using Intersoft.Client.Framework.Input;
using Intersoft.Client.UI.Aqua.UXCollection;
using Intersoft.Client.UI.Controls.Interactivity;
namespace SilverlightApplication15 {
 public partial class MainPage {
 public MainPage() {
 DropObjectCommand = new DelegateCommand(ExecuteDropObjectCommand);
 InitializeComponent();
 DataContext = this;
 AMBuildTree();
 }
 public DelegateCommand DropObjectCommand { get; set; }
 public void ExecuteDropObjectCommand(Object parameter) {
 var dropObjectParameter = parameter as DropObjectParameter; // Cast drop object parameters.
 if (dropObjectParameter == null) return;
 var sourceElement = dropObjectParameter.SourceElement as UXTreeViewItem; // Identify the item being dropped.
 if (sourceElement == null) return;
 var sourceElementParent = sourceElement.Parent as UXTreeViewItem; // Identify the parent of the item being dropped.
 if (sourceElementParent == null) return;
 var targetElement = dropObjectParameter.TargetElement as UXTreeViewItem; // Identify the item being dropped onto.
 if (targetElement == null) return;
 sourceElementParent.Items.Remove(sourceElement); // Relocate tree view item.
 targetElement.Items.Add(sourceElement);
 targetElement.AllowDropItem = true;
 targetElement.AllowMoveItem = true;
 targetElement.AllowReorderItem = true;
 }
 private void AMBuildTree() {
 UXTreeViewItem topItem;
 UXTreeViewItem folder;
 tree2.Items.Add(topItem = AMBuildFolder("Top"));
 topItem.Items.Add(AMBuildItem("Item 1"));
 topItem.Items.Add(AMBuildItem("Item 2"));
 topItem.Items.Add(folder = AMBuildFolder("Folder 1"));
 folder.Items.Add(AMBuildItem("Item 1.1"));
 folder.Items.Add(AMBuildItem("Item 1.2"));
 folder.Items.Add(AMBuildItem("Item 1.3"));
 folder.Items.Add(AMBuildItem("Item 1.4"));
 folder.Items.Add(AMBuildItem("Item 1.5"));
 topItem.Items.Add(AMBuildItem("Item 3"));
 topItem.Items.Add(AMBuildFolder("Folder 2"));
 }
 private UXTreeViewItem AMBuildFolder(String label) {
 return new UXTreeViewItem {
 AllowDropItem = true,
 AllowDropObject = true,
 AllowMoveItem = true,
 AllowReorderItem = true,
 DropObjectCommand = DropObjectCommand,
 Header = label,
 IsExpanded = true
 };
 }
 private static UXTreeViewItem AMBuildItem(String label) {
 return new UXTreeViewItem { Header = label };
 }
 }
}

TreeView Drag Drop

terrell.jm@gmail.com — Wed, 23 Nov 2011 13:57:02 GMT

Hi, we had reviewed the documentation specifically the section "How-to: Drag an UIElement using API". As part of our evaluation of the CLientUI we are attempting to convert segments of an existing application using this approach. I have included a simple example, which when run under Silverlight, sees the MouseDown and Up events fire for the standard TreeView control, but not the UXTreeView control. Are we doing something wrong, or do we need to consider a different approach. Thanks, Joanthan

<UserControl x:Class="SilverlightApplication13.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:UXCollection="clr-namespace:Intersoft.Client.UI.Aqua.UXCollection;assembly=Intersoft.Client.UI.Aqua.UXCollection"
    xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls">
  <StackPanel x:Name="LayoutRoot" Background="White">
    <UXCollection:UXTreeView>
      <UXCollection:UXTreeViewItem Header="Top">
        <UXCollection:UXTreeViewItem Header="Item 1" />
        <UXCollection:UXTreeViewItem Header="Item 2" />
        <UXCollection:UXTreeViewItem Header="Item 3" MouseLeftButtonDown="UXTreeViewItem_MouseLeftButtonDown"
            MouseLeftButtonUp="UXTreeViewItem_MouseLeftButtonUp" />
        <UXCollection:UXTreeViewItem Header="Item 4" />
        <UXCollection:UXTreeViewItem Header="Item 5" />
      </UXCollection:UXTreeViewItem>
    </UXCollection:UXTreeView>
    <Controls:TreeView>
      <Controls:TreeViewItem Header="Top">
        <Controls:TreeViewItem Header="Item 1" />
        <Controls:TreeViewItem Header="Item 2" />
        <Controls:TreeViewItem Header="Item 3" MouseLeftButtonDown="UXTreeViewItem_MouseLeftButtonDown"
            MouseLeftButtonUp="UXTreeViewItem_MouseLeftButtonUp" />
        <Controls:TreeViewItem Header="Item 4" />
        <Controls:TreeViewItem Header="Item 5" />
      </Controls:TreeViewItem>
    </Controls:TreeView>
  </StackPanel>
</UserControl>

TreeView Drag Drop

handy@intersoftpt.com — Wed, 23 Nov 2011 06:39:26 GMT

Hello Jonathan,

Unfortunately, we don't have a direct sample about UXTreeView with DragDrop capability. To understand about our Drag and Drop, please kindly check our documentation about Drag-drop Framework Overview.
We also have DragDrop sample in our ClientUI sample>>ClientUIFramework. Hope this helps.

Regards,
Handy

TreeView Drag Drop

terrell.jm@gmail.com — Tue, 22 Nov 2011 08:37:25 GMT

Hi, is it possible to implement drag and drop between two tree view controls under Silverlight. Behaviors do not appear to be implemented for the tree view control under WPF or Silverlight, and I have been unable to trap the mouse down event for a tree view item under Silverlight. Is it possible to do this? Is there a simple example to help get me started. Thanks, Jonathan