Drag and Drop styling without TargetID

As long as there is no TargetID provided for D&D the row is only dragable at the small icon on the left.

As soon as one is provided this icon disappears and the complete row becomes dragable.

How can I achieve, that the icon is not present and the row is completely dragable, while no TargetID is provided?

I tried using OnRowDataBound="RowBound" to add the e-rowdragdrop class to every row, because this works, when I do it manually in the Chrome Dev tools, but this resulted in infinite loop calling RowBound.


5 Replies 1 reply marked as answer

RS Renjith Singh Rajendran Syncfusion Team January 14, 2022 06:50 AM UTC

Hi Joschka, 
 
Greetings from Syncfusion support. 
 
We would like to inform that we can rearrange the grid rows within grid only by using drag icon in left side of grid column. We could not able to perform drag and drop operation within grid if the icon is hidden. This is the default behavior of performing drag and drop(DnD) within grid. 
 
In our online demo you could find two examples for DnD. One is for DnD within grid and the other one is for DnD between grids. In the sample with DnD between Grids you could find a code difference that GridRowDropSettings will be added in Grid with TargetID, whereas in DnD within grid there won’t be any GridRowDropSettings and only the AllowRowDragAndDrop property will be enabled. 
 
So it is a must to have the icon when you are performing drag and drop within grid. Without this icon it is not feasible to perform DnD within grid. 
 
Note : And also, it is not possible to enable both drag and drop within Grid feature and drag and drop between Grid features in a single Grid. At a time, either drag and drop within Grid or drag and drop between Grids can only be enabled in a single Grid. It is not feasible to enable both these feature in a single Grid. 
 
Regards, 
Renjith R 



JO Joschka January 14, 2022 10:18 AM UTC

Hey,

thank you for the fast answer.

I am not using drag and drop within the table. I worked my way into having 6 tables I can freely drag and drop between, by using the RowDroppedEventArgs.Target.Xpath and a custom RowDropped EventHandler.

But this only works if I don't provide a target ID.


As I mentioned I can mostly achieve the desired behavior of the whole row being draggable just by adding the correct .css class to a row in Chrom directly. But doing that for each row programmatically with the RowDataBound Event leads to infinite loops in my case. That event always fires infinitely disregarding of the content of the corresponding method and I'm unsure why at the moment. But that seems to be a problem with my implementation, because the event works fine in other tables.


Regards,

Joschka



MS Monisha Saravanan Syncfusion Team January 17, 2022 01:59 PM UTC

Hi Joschka, 

Thanks for contacting Syncfusion support. 

We would like to inform that TargetID is must when trying to perform row drag and drop between Grids. You have mentioned that your requirement works only when you don’t provide the TargetID. So please share the issues faced while using TargetID. We need some more details about the requirement. So we request you to share us the below details. 

  • Share more detail along with code example about the workaround you have tried using RowDataBound event.
  • Share the Grids code example.
  • Share video demonstration of the issue along with replication procedure.
  • Share a simple issue reproducible sample
  • Or try to reproduce the reported issue on the below sample.


The above requested details will be helpful for us to validate your query and to provide you with a better solution as early as possible. 

Regards, 
Monisha 



JO Joschka January 17, 2022 06:11 PM UTC

Hey,


my inquiry is about an completely cosmetic aspect by now, because I found workarounds for the rest.


I got this Data Grid








AutoFit="true">*@




It has this callback method and is part of the PmtDeckDataGrid component:

public async Task RowDropHandler(RowDragEventArgs args)

{
Console.WriteLine(Zone.Name);
await OnRowDropped.InvokeAsync((args, Zone));
}


The parent creates 6 of those components in the following manner


    

@foreach (var zoneEnum in Enum.GetValues())
{

}

The event handler contains the following I commented the following code to explain what is happening.

    public void OnRowDroppedEventHandler((RowDragEventArgs, Zone) packedArgs)
{
var (args, donatorZone) = packedArgs;
//Retrieves the protected Property Xpath that is contained in the OnRowDroppedEvenArgs
var xPathByReflection = (string)args.Target.GetPropertyValue("XPath");
//This method converts the string into the corresponding Enum and then gives back the correct Zone object
if (!Zone.TryGetZone(xPathByReflection, out var receiverZone))
return;


if (!Grids.ContainsKey(receiverZone))
return;
//Grids holds all references to the created DataGrids
var targetGridComponent = Grids[receiverZone];
//A Method that effectively removes the CardInfo object that was contained in the OnRowDroppedEvent from one Zone and adds it to the other zone.
targetGridComponent.Zone.MoveCard(donatorZone, args.Data.First());
}


This allows free drag and drop between my 6 different tables. As demonstrated here:

https://imgur.com/a/PVfKNgE


I achieved the whole row to be a dragable area, by adding the e-rowdragdrop css class to each individual cell using the CustomAttributes property of DataTables.

Now I just want to remove the small icon on the left (column -1) that is normally supposed to be the area where you drag the row.


Or in short I want it to look and behave like this example:  https://blazor.syncfusion.com/demos/datagrid/row-drag-and-drop?theme=bootstrap4 

And being able to drag and drop freely between multiple grids, that contain the same object type.

----


A problem that I cannot reproduce myself on different tables, but that doesn't effect me right now are the infinite event calls to OnRowDataBound if I insert it like this into to SfDataGrid I posted above.

This seems to be a very specific problem, that I cannot figure out.

The complete project source can be found here:

https://github.com/JoschiGrey/PaperMagicTracker



MS Monisha Saravanan Syncfusion Team January 18, 2022 01:15 PM UTC

Hi Joschka,  
 
Thanks for sharing the requested details. 
 
Query: “my inquiry is about an completely cosmetic aspect by now, because I found workarounds for the rest.&& Now I just want to remove the small icon on the left (column -1) that is normally supposed to be the area where you drag the row. 

We suggest you to remove the drag icon in the Grid rows using the below CSS styles. Refer the below code example.  

<SfGrid @ref="Grid" DataSource="@Orders" AllowRowDragAndDrop="true" AllowPaging="true">       <GridColumns>        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>    </GridColumns></SfGrid> <style>    .e-grid .e-row .e-rowdragdrop.e-grid .e-drag-intent.e-grid .e-rowdragheader {        displaynone;    }</style>

Refer the below screenshot as output of above code example.  

 

Please get back to us if you have further queries. 

Regards, 
Monisha   



Marked as answer
Loader.
Up arrow icon