Use the treewView for reordering items in drag n drop

[George Sterg]

 I want to have the treeview showing only Parent nodes and able to re-order them using the drag n drop functionality. If i set the DragDropEffect to move, that works, but when i drop the node over another, the node is lost because it is moved as a child node. How can i avoid that? Is it possible not to do that?

My code:

<syncfusion:TreeViewAdv             
            x:Name="TreeView"
            ItemsSource="{Binding AvailableItems}"             
            HorizontalAlignment="Left" VerticalAlignment="Top"
            AllowDragDrop="True"
            AllowMultiSelect="False"
            AllowsColumnReorder="False"
            AnimationSpeed="2" AnimationType="Fade"
            DragDropEffect="Move"
            IsSelectOnRightMouseClick="False"
            ShowRootLines="False" Sorting="None">
            <syncfusion:TreeViewAdv.ItemTemplate>
                     <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <CheckBox
                            x:Name="CheckBox"
                            IsChecked="{Binding IsOpen}"
                            Margin="5"/>
                        <TextBlock
                            Text="{Binding Label}"
                            Margin="5"/>                       
                    </StackPanel>
                </DataTemplate>
            </syncfusion:TreeViewAdv.ItemTemplate>
        </syncfusion:TreeViewAdv>

Thanks.

[Priyanga Balasubramaniam]

Hi George,

Thank you for using Syncfusion products.

We have prepared the sample that tries to meet your requirement. In this sample we restrict dragging a one Parent node into another Parent node but allow reordering Parent nodes. We have attached the sample and you can download the sample from the following link.

Sample:TreeviewSample


Regards,
Priyanga B

[George Sterg]

Thanks that works.  One issue: My treeviewItem is a combobox , and some how the line showing to move to the last item is not visible. I tried to change the margin in the ItemContainerStyle but then the ordering function is not working (eg top, bottom margin 5). In my app because I have space after the last item I can do that. What I can't do is the opposite (move to the first item). How can I fix that?

Thanks

Attachment: TreeviewOnlyReorderSample_437a7784.zip

[Priyanga Balasubramaniam]

Hi George,

We have modified your sample that tries to meet your requirement. In this sample while removing the Margin in ItemContainerStyle we are able to view drop line after last item and before first item.

We have attached the sample and you can download the sample from the following link.

Sample:TreeviewOnlyReorderSample
Please let us know if you need further assistance.

Regards,
Priyanga B

[George Sterg]

Thanks Its works as I need it!

[Mariappan S]

Hi George,

Thank you for your update.

Please let us know if you need further assistance.

Regards,
Mariappan S.

[George Sterg]

I came across with something unusual when going to IsInEditMode. My Treeview Items have some buttons at the end. One of them is used to rename the item. While the Renaming functionality works perfect when i slow double click the selected item (default), when i use the Rename button, the selected item goes to edit mode, but when using the mouse to enter the textbox, the edit mode is gone.
This does not happens when an item is not selected (the button Rename is pressed from another item). That is working OK.

I'm attaching the previous sample to show you the problem.
For demonstration purpose, select an item, and press the rename button a try to move the mouse horizontally to enter the textbox.


Thank you

Attachment: TreeviewIsEdited_2809ba4e.zip

[Rajkumar Ganesamoorthy]

Hi George,

Thank you for your update.

We have checked your last updated sample. In our TreeViewAdv we will change the Editmode of the TreeViewItemAdv to normal when item loses the focus. In your sample, while clicking on the button, treeview item lost its focus and moved to Normal mode from Editing mode. We have modified the sample to achieve your requirement by setting Focusable as false for Button used in the Template of TreeViewItemAdv,

Please download the sample from below link

Link: TreeviewOnlyReorderSample

 Please revert us if u have any concern on this.

Regards,
Rajkumar G

[George Sterg]

Still the sample is not working! If I click the button and wait for a second, yes the Edit mode is still on. But if you try and do the usual move of clicking with the mouse and move the cursor instantly to the TextBox the editMode is gone. Please revisit the sample and try to do the above steps (when the item is selected a the button is clicked from the selected item).

Thanks

[Rajkumar Ganesamoorthy]

Hi George,

Sorry for the inconvenience caused.

We have modified your last updated sample to meet your requirement by activate the “IsInEditMode” in “IsKeyboardFocusWithinChanged” event for Button.

Please download the sample from below link

Link:TreeviewOnlyReorderSample

Please let us know if you have any concern on this.

Regards,
Rajkumar G