1. Home
  2. Forum
  3. WPF
  4. How to determine which specific cell an external drop is made onto

How to determine which specific cell an external drop is made onto

Hi,

We are trying to allow drop on the TreeGrid.

However, we need to be able to drop onto specific cells.

How can we determine which cell/column in the row the drop occured?

Also we would like to fill specific data into the DragOverUI while DragOver a specific cell. How can we achieve this?

Please advise.

Best regards,

8 Replies 1 reply marked as answer
VS Vijayarasan Sivanandham Syncfusion Team March 22, 2021 05:32 PM UTC

Hi MrHessellund,

Thank you for contacting Syncfusion support.

Please find answer for your queries below 
Queries 
Solutions 

How can we determine which cell/column in the row the drop occured? 

In SfTreeGrid, you can get the column based on column index from the mouse pointer position. Please refer the below code snippet for your reference,

 
private void TreeGrid_Drop(object sender, DragEventArgs e) 
{ 
            var treeGridPanel = this.treeGrid.GetTreePanel(); 
            // get the row and column index based on the pointer position  
            var rowColumnIndex = treeGridPanel.PointToCellRowColumnIndex(e.GetPosition(treeGridPanel)); 
            if (rowColumnIndex.IsEmpty) 
                return; 
            //get the node at rowindex 
            var treeNodeAtRowIndex = treeGrid.GetNodeAtRowIndex(rowColumnIndex.RowIndex); 
            //get the column  
            var gridColumn = this.treeGrid.Columns[this.treeGrid.ResolveToGridVisibleColumnIndex(rowColumnIndex.ColumnIndex)]; 
} 
 
 
Also we would like to fill specific data into the DragOverUI while DragOver a specific cell. How can we achieve this? 


 
Currently, we are analyzing your requirement of “fill specific data into the DragOverUI while DragOver a specific cel in SfTreeGrid” We will validate and update you the details on or before March 24, 2021. 
 

Please let us know if you have any concerns in this. 

Regards,
Vijayarasan S 


VS Vijayarasan Sivanandham Syncfusion Team March 24, 2021 05:58 PM UTC

Hi MrHessellund,

Sorry for the inconvenience.   

We are still working on this. We will update with further details on March 26, 2021. We appreciate your patience and understanding.

Regards,
Vijayarasan S 


VS Vijayarasan Sivanandham Syncfusion Team March 26, 2021 02:03 PM UTC

Hi MrHessellund,

Thank you for your patience. 
You can customize the dragging popup to show the corresponding drag node data by customizing the RowDragDropTemplate with binding the data from the DraggingNodes property. Please refer the below code snippet, 
<Window.Resources> 
        <DataTemplate x:Key="dragdroptemplate"> 
            <Border x:Name="border" Width="250"     
                    Background="#ececec"    
                    BorderBrush="#c8c8c8"  Height="60"   
                    BorderThickness="1.2"> 
                <Grid  VerticalAlignment="Center" HorizontalAlignment="Left"> 
                    <Grid.RowDefinitions> 
                        <RowDefinition Height="Auto"/> 
                        <RowDefinition Height="Auto"/> 
                    </Grid.RowDefinitions> 
                    <Grid.ColumnDefinitions> 
                        <ColumnDefinition Width="Auto"/> 
                        <ColumnDefinition Width="Auto"/> 
                    </Grid.ColumnDefinitions> 
                    <TextBlock Text="FirstName : " Grid.Row="0" Grid.Column="0" /> 
                    <TextBlock Text="{Binding DraggingNodes[0].Item.FirstName}" Grid.Row="0" Grid.Column="1"/> 
                    <TextBlock Text="LastName : " Grid.Row="1" Grid.Column="0"/> 
                    <TextBlock Text="{Binding DraggingNodes[0].Item.LastName}" Grid.Row="1" Grid.Column="1"/> 
                </Grid> 
            </Border> 
        </DataTemplate> 
    </Window.Resources> 
 
<syncfusion:SfTreeGrid Name="treeGrid" 
                               AutoGenerateColumns="False" 
                               AllowEditing="True"                                
                               ChildPropertyName="ReportsTo" 
                               ParentPropertyName="ID"                                
                               SelfRelationRootValue="-1" 
                               RowDragDropTemplate="{StaticResource dragdroptemplate}" 
                               AllowDraggingRows="True" 
                               AllowDrop="True"/ > 
Please let us know, if you require further assistance on this.

Regards,
Vijayarasan S 


Marked as answer
MR MrHessellund April 1, 2021 12:25 PM UTC

Hi,

Thank you for the sample.

How can I fill the dragAndDrop popup with information about the target row/cell ?

I want a specific data shown when the target is on a specific cell. Meaning different information based on the target cell.

How can that be achieved?

Best regards,


SS Susmitha Sundar Syncfusion Team April 2, 2021 01:24 PM UTC

Hi MrHessellund, 
 
Thank you for the update. 
 
Currently we don’t have direct support for bind the target value in DargPopup. We will validate the possibilities and update you the details in two business days (April 7, 2021). We appreciate your patience until then. 
 
Regards,
Susmitha S 


MR MrHessellund April 3, 2021 06:18 AM UTC

Hi,

Is it posible at least to know which column it is dragged over.

Being able to disable the pop-up while dragging over specific column would also be an improvement.

Best regards

VS Vijayarasan Sivanandham Syncfusion Team April 5, 2021 04:52 PM UTC

Hi MrHessellund,

Thanks for the update.

 
As we mentioned earlier, we are analyzing your requirement of “dragAndDrop popup with information about the target row/cell and disable the pop-up while dragging over specific column in SfTreeGrid”. We will validate and update you further details on April 07, 2021. 
 
We appreciate your patience until then. 
 
Regards, 
Vijayarasan S 


VS Vijayarasan Sivanandham Syncfusion Team April 7, 2021 04:08 PM UTC

Hi MrHessellund,

Thank you for your patience.

Please find answer for your queries below 
Queries 
Solutions 

How can I fill the dragAndDrop popup with information about the target row/cell ?

 

Your requirement can be achieved by customize the DragOver event in SfTreeGrid.RowDragDropController. Please refer the below code snippet,

 
private void RowDragDropController_DragOver(object sender, TreeGridRowDragOverEventArgs e) 
        { 
            //Get the Target Node 
            var targetNode = e.TargetNode.Item as EmployeeInfo; 
 
            //Create the RowdragDropTempalte. 
            DataTemplate dragdroptemplate = new DataTemplate(); 
 
            //Create the textBlock 
            FrameworkElementFactory textBlock = new FrameworkElementFactory(typeof(TextBlock)); 
 
            //Set the value for TextBlock in Target Item 
            textBlock.SetValue(TextBlock.TextProperty, "First Name :" + targetNode.FirstName + "\n" + "Last Name:" + targetNode.LastName); 
            textBlock.SetValue(TextBlock.BackgroundProperty, Brushes.LightGray); 
 
            //add the TextBlock to DataTemplate 
            dragdroptemplate.VisualTree = textBlock; 
 
            //Add the Customized RowDragDropTemplate 
            treeGrid.RowDragDropTemplate = dragdroptemplate;            
 
        } 



 

disable the pop-up while dragging over specific column in SfTreeGrid

 

Your requirement can be achieved by override the ProcessOnDragOver method in TreeGridRowDragDropController in SfTreeGrid. Please refer the below code snippet,

 
treeGrid.RowDragDropController = new GridRowDragDropControllerExt();

 
public class GridRowDragDropControllerExt : TreeGridRowDragDropController 
{             
 
        private ObservableCollection<TreeNode> GetNodes(DragEventArgs dragEventArgs) 
        { 
            if (dragEventArgs.Data.GetDataPresent("Nodes")) 
                return dragEventArgs.Data.GetData("Nodes") as ObservableCollection<TreeNode>; 
            return null; 
        }        
 
        protected override void ProcessOnDragOver(DragEventArgs args, RowColumnIndex rowColumnIndex) 
        { 
            autoExpandNode = null; 
            var draggingNodes = GetNodes(args); 
            var dropPosition = GetDropPosition(args, rowColumnIndex); 
            bool showdragUI = true; 
            // when drag and drop nodes from two different treegrid and  
            //source treegrid has allow dragging settings is false we need to skip the droping rows in Targetted TreeGrid.  
            //in this case Dragging nodes has came as Null value. 
            if (draggingNodes == null && args.Data == null) 
                return; 
 
 
            var method = this.GetType().BaseType.GetMethod("RaiseTreeGridDragOver", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic); 
 
            
            var treeGridDragOverEventArgs = (TreeGridRowDragOverEventArgs)method.Invoke(this, new object[] { args, rowColumnIndex, dropPosition }); 
            if (treeGridDragOverEventArgs != null) 
            { 
                if (treeGridDragOverEventArgs.Handled) 
                    return; 
                showdragUI = treeGridDragOverEventArgs.ShowDragUI; 
            } 
 
            if (dropPosition ==  Syncfusion.UI.Xaml.TreeGrid.DropPosition.None || dropPosition == Syncfusion.UI.Xaml.TreeGrid.DropPosition.Default) 
            { 
                CloseDragIndicators(); 
            } 
 
 
            //Get the Column details by passing column index  
            var gridColumn = this.TreeGrid.Columns[this.TreeGrid.ResolveToGridVisibleColumnIndex(rowColumnIndex.ColumnIndex)]; 
            //check the condition to disable the popup for particular column 
            if (gridColumn.MappingName == "FirstName") 
            { 
                showdragUI = false; 
                var popup = (Popup)this.GetType().GetField("dragpopup", System.Reflection.BindingFlags.NonPublic | 
            System.Reflection.BindingFlags.Instance).GetValue(this); 
                popup.IsOpen = false; 
            } 
            //To Show the draggable popup with the DropAbove/DropBelow message based on column condition 
            if (showdragUI) 
            { 
                var showDragDropPopup = this.GetType().BaseType.GetMethod("ShowDragDropPopup", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic); 
 
 
                showDragDropPopup.Invoke(this, new object[] { GetDropPosition(args, rowColumnIndex), draggingNodes, args }); 
            }             
 
             ShowDragIndicators(dropPosition, rowColumnIndex, args); 
 
                if (rowColumnIndex.RowIndex == this.TreeGrid.GetTreePanel().ScrollRows.LastBodyVisibleLineIndex 
                             || rowColumnIndex.RowIndex != this.TreeGrid.GetFirstDataRowIndex() && dropPosition != Syncfusion.UI.Xaml.TreeGrid.DropPosition.None) 
                    this.TreeGrid.AutoScroller.AutoScrolling = AutoScrollOrientation.Vertical; 
 
            var mouseMovePosition = this.TreeGrid.AutoScroller.GetType().GetProperty("MouseMovePosition", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic); 
 
            mouseMovePosition.SetValue(this.TreeGrid.AutoScroller, args.GetPosition(this.TreeGrid.GetTreePanel())); 
 
 
            args.Handled = true; 
        }        
    } 




 
 

Please let us know if you have any concerns in this. 

Regards,
Vijayarasan S 


Loader.
Up arrow icon