Mimic drag and drop

[Antonio Paglia]

On the screen below you can see the following two grids. The first one called "Cupos" and the second one "Solicitudes".

Goal: Start a drag and drop operation to modify the column values on the destination grid (without moving any records)

Explanation:

I start Dragging a record from the grid “Solicitudes” (source) to the grid “Cupos” (destination) in order to modify the value of the columns "Cupos Otrogados", "Sin Asignar", and "Asignados" in the destination grid in the row where the source record was dropped.

Desired behavior

In the grid “Solicitudes”, dragging the record shouldn’t delete it.

In the grid “Cupos”, the record that was dragged there shouldn’t be added.

When drop operation is completed, I want to be able to get the destination row index where the source record was dropped and be able to modify the values in the columns: "Cupos Otrogados", "Sin Asignar", and "Asignados".

We are working with version 20.3.0.52. of components.

Any idea or example how to accomplish this?

Thanks in advance

[Prathap Senthil]

Hi Antonio Paglia,

Based on your requirement, you want to prevent the drag-and-drop operation from modifying column values on the destination grid (without moving any records). We suggest using the RowDropping event to achieve this. However, it is not feasible to meet your requirement with the mentioned NuGet version, as the RowDropping event was introduced in version 20.4.38. You will need to upgrade to the latest version to implement this functionality. For your reference, we have attached the release notes. https://blazor.syncfusion.com/documentation/release-notes/20.4.38?type=all#grid

We have canceled the drop action, obtained the drop index for the destination grid using the RowDropping event, and updated the data using the UpdateRowAsync method in the destination grid. Please refer to the code snippet and sample below for your reference.

<span>Cupos</span>

<SfGrid DataSource="@Orders" @ref="CuposGrid" ID="Grid" AllowSelection="true" AllowRowDragAndDrop="true">

    <GridRowDropSettings TargetID="DestGrid"></GridRowDropSettings>

    <GridEditSettings AllowEditing="true"></GridEditSettings>

    <GridEvents RowDropping="RowDroppedHandler"  TValue="Order"></GridEvents>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" Width="110" IsPrimaryKey="true"> </GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer ID" Width="110"></GridColumn>

        <GridColumn Field=@nameof(Order.ShipCity) HeaderText="Ship City" Width="110"></GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" Width="110"></GridColumn>

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Width="110" Type="Syncfusion.Blazor.Grids.ColumnType.Date"></GridColumn>

    </GridColumns>

</SfGrid>

<br>

 

<span>Solicitudes</span>

<SfGrid DataSource="@SecondGrid" ID="DestGrid" AllowRowDragAndDrop="true" AllowSelection="true">

    <GridRowDropSettings TargetID="Grid"></GridRowDropSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" Width="100" > </GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer ID" Width="110"></GridColumn>

        <GridColumn Field=@nameof(Order.ShipCity) HeaderText="Ship City" Width="110"></GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" Width="110"></GridColumn>

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Width="110" Type="Syncfusion.Blazor.Grids.ColumnType.Date"></GridColumn>

    </GridColumns>

</SfGrid>

 

 

@code {

 

    SfGrid<Order> CuposGrid { get; set; }

 

 

    public async Task RowDroppedHandler(Syncfusion.Blazor.Grids.RowDroppingEventArgs<Order> args)

    {

        args.Cancel = true;  // cancel the drop action

 

        int dropIndex =  args.DropIndex;

        var ShipCityValue   = args.Data[0].ShipCity;

 

        var dataList = CuposGrid.DataSource.ToList();

        Order data = dataList[dropIndex];

 

        data.ShipCity = ShipCityValue;

        data.CustomerID = "Updated";

        // Update the row with new data

        await CuposGrid.UpdateRowAsync(dropIndex, data);

    }

}

Sample:
https://blazorplayground.syncfusion.com/embed/LNBTXFsUUuLFBayh?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Reference:
https://blazor.syncfusion.com/documentation/datagrid/events#rowdropping
https://blazor.syncfusion.com/documentation/datagrid/row-drag-and-drop#drag-and-drop-events
https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UpdateRowAsync_System_Int32__0_

Regards,
Prathap Senthil

[Antonio Paglia]

Thank you very much for the answer. 

I'm using NET 6 so to upgrade to the suggested version 20.4.38 of the NuGet package, I have to upgrade before my solution to NET 7.

[Prathap Senthil]

No, you can use version 24.0.38 with .NET 6, but for a better experience, you can upgrade the project to .NET 7 or 8. We also provide support for .NET 8 in NuGet version 24.1.41.

[Marcelo Stocco]

Very good ! that sound good for me.

Thank you so much for the support.

[Prathap Senthil]

Thanks for the update,

We are happy to hear that the provided information was helpful. We are closing the forum now