Dragging rows between two grids of same TValue issue

[Ben Willan]

I am using 2 SfGrid components with IDs: Grid and DestGrid.

Grid rows are dragged to DestGrid, once a user is satistifed with the rows dropped they can click on a button where a the rows dragged to DestGrid can be identified and then written to a database. Rows represent staff members.

As soon as I try and add any events to the <GridEvents TValue="Staff"></GridEvents> ​like on ActionBegin, OnActionComplete, OnDropped or others, when subsequent rows are dropped onto DestGrid they just replace the row already there and the DestGrid doesn't update with multiple rows. Removing all events from the GridEvents tag (as above) causes the DestGrid to behave as expected which is to add multiple rows as the user drops them. I want the events becuase I am trying to access all the data in the rows dropped.

How can I drop the rows that I wish, have the grid behave properly and then access the data of the DestGrid for DB writing purposes?

I should add that is possible to drag multiple rows at once and have all drop onto DestGrid but then further drops whether single or multiple rows will always replace what's already in the DestGrid instead of adding to it.

I've  added my razor code below:

<div class="row" style="margin-top: 36px;">
    <div class="col-6">
        <h5>Staff List</h5>
        <SfGrid id="Grid"
            DataSource="@Staff"
            AllowRowDragAndDrop="true"
            AllowSelection="true"
            AllowPaging="true"
            AllowFiltering="true"
            AllowTextWrap="true"
            AllowSorting="true"
            GridLines="GridLine.Both"
            @ref="_staffListGrid">

            <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>
            <GridFilterSettings Type="FilterType.Excel"></GridFilterSettings>
            <GridPageSettings PageSize="10"></GridPageSettings>
            <GridRowDropSettings TargetID="DestGrid"></GridRowDropSettings>
            <GridEvents TValue="Staff" OnLoad="ApplyInitialFilter"></GridEvents>
            
            <GridColumns>
                <GridColumn Field=@nameof(Models.Staff.Id) HeaderText="Staff Id" IsPrimaryKey="true" TextAlign="TextAlign.Left" Width="120" Visible="false"></GridColumn>
                <GridColumn Field="@nameof(Models.Staff.FullName)" HeaderText="Staff" TextAlign="TextAlign.Left" Width="120"></GridColumn>
                <GridColumn Field="@nameof(Models.Staff.DisplayGrade)" HeaderText="Display Grade" TextAlign="TextAlign.Left" Width="120"></GridColumn>
                <GridColumn Field="@nameof(Models.Staff.Department)" HeaderText="Department" TextAlign="TextAlign.Left" Width="120"></GridColumn>
            </GridColumns>
        </SfGrid>
    </div>
        
    <div class="col-6">

        <div>
            <h5>Staff Allocated</h5>
            <SfGrid id="DestGrid"
                DataSource="@StaffAllocated"
                AllowRowDragAndDrop="true"
                AllowSelection="true"
                AllowPaging="true"
                AllowFiltering="true"
                AllowTextWrap="true"
                AllowSorting="true"
                GridLines="GridLine.Both"
                @ref=_staffAllocatedGrid>

                <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>
                <GridPageSettings PageCount="1" PageSize="10"></GridPageSettings>
                <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>
                <GridFilterSettings Type="FilterType.Excel"></GridFilterSettings>
                <GridRowDropSettings TargetID="Grid"></GridRowDropSettings>
                <GridEvents TValue="Staff"></GridEvents>

                <GridColumns>
                    <GridColumn Field="@nameof(Models.Staff.Id)" HeaderText="Staff Id" IsPrimaryKey="true" TextAlign="TextAlign.Left" Width="120" Visible="false"></GridColumn>
                    <GridColumn Field="@nameof(Models.Staff.FullName)" HeaderText="Staff" TextAlign="TextAlign.Left" Width="120"></GridColumn>
                    <GridColumn Field="@nameof(Models.Staff.DisplayGrade)" HeaderText="Display Grade" TextAlign="TextAlign.Left" Width="120"></GridColumn>
                    <GridColumn Field="@nameof(Models.Staff.Department)" HeaderText="Department" TextAlign="TextAlign.Left" Width="120"></GridColumn>
                </GridColumns>
                
            </SfGrid>

[Prathap Senthil]

Hi Ben,

We are unable to reproduce the reported issue when attempting to reproduce the issue in the latest version 24.2.4. Attached is a simple sample for your reference. However, in order to further investigate and address the problem you've encountered, we kindly ask for some additional clarification from your end. Could you please provide the following details:

• A simple and reproducible sample demonstrating the reported issue would greatly assist us in pinpointing the problem more efficiently and offering a resolution.
• If possible, could you share your attempt to replicate the issue using the provided sample?
• Additionally, could you provide a video demonstration of the issue along with the steps to reproduce it?

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

Above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible. Thanks for your understanding.

Regards,
Prathap S

[Ben Willan]

My previous code is also running in a Bootstrap container within a Syncfusion Dialog component. I didn't think this would be an issue but included that this time as well.

I have upgraded the NuGet packages for the all Syncfusion components to 24.2.4 now and then rewritten the code. The issue is now that the grid fails to drop rows onto the target grid at all now when I run the Blazor app locally. With or without the <GridEvents> tag having event handlers.

I reproduced my source code using the Syncfusion Playground and it was working in the Playground, you can drag and drop rows from Grid to DestGrid. I copy and pasted the exact same code back into my source code and the components render ok but the drop feature is still not working. You can drag the row from Grid to DestGrid but when releasing the row it fails to add/ append and the row disappears from where the user drags it to.

I'm unable to upload a gif as the file type is not allowed.

What would you suggest?

I copied the working playground version here:

@page "/"

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Popups

@using Syncfusion.Blazor.Inputs

<SfDialog Width="1280px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsDialogVisible" Height="820px" AllowDragging="true" @ref="_addJobDialog">

    <DialogTemplates>

        <Header>Add Job</Header>

        <Content>

        <div class="container">

        <SfGrid DataSource="@StaffList" id="Grid"  AllowRowDragAndDrop="true" AllowSelection="true"

            AllowPaging="true"

            AllowFiltering="true"

            AllowTextWrap="true"

            AllowSorting="true"

            GridLines="Syncfusion.Blazor.Grids.GridLine.Both">

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

            <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>

            <GridPageSettings PageSize="10"></GridPageSettings>

            <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>

           

            <GridColumns>

                <GridColumn Field=@nameof(StaffTest.Id) HeaderText="Id" Width="110" Visible="false" IsPrimaryKey="true"> </GridColumn>

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

            </GridColumns>

        </SfGrid>

    <br>

   

        <SfGrid DataSource="@SecondGrid" id="DestGrid" AllowRowDragAndDrop="true" AllowSelection="true" AllowPaging="true"

            AllowFiltering="true"

            AllowTextWrap="true"

            AllowSorting="true"

            GridLines="Syncfusion.Blazor.Grids.GridLine.Both">

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

            <GridPageSettings PageCount="1" PageSize="10"></GridPageSettings>

            <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="Syncfusion.Blazor.Grids.EditMode.Normal"></GridEditSettings>

            <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>

            <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>

           

            <GridColumns>

                <GridColumn Field=@nameof(StaffTest.Id) HeaderText="Id" Width="110" Visible="false" IsPrimaryKey="true"> </GridColumn>

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

            </GridColumns>

        </SfGrid>

        </div>

        </Content>

    </DialogTemplates>

</SfDialog>

@code {

    public List<StaffTest> StaffList { get; set; }

    public List<StaffTest> SecondGrid { get; set; } = new List<StaffTest>();

    public bool IsDialogVisible { get; set;} = true;

    private SfDialog _addJobDialog { get; set; }

    protected override void OnInitialized()

    {

        StaffList = Enumerable.Range(1, 8).Select(x => new StaffTest()

            {

                Id = 1000 + x,

                Name = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

            }).ToList();

    }

    public void RowDropHandler(Syncfusion.Blazor.Grids.RowDroppedEventArgs<StaffTest> args)

    {

        // Here, you can customize your code.

    }

    public void ActionBeginHandler(Syncfusion.Blazor.Grids.ActionEventArgs<StaffTest> args)

    {

        // Here, you can customize your code.

    }

    public void ActionCompletedHandler(Syncfusion.Blazor.Grids.ActionEventArgs<StaffTest> args)

    {

        // Here, you can customize your code.

    }

    public class StaffTest

    {

        public int Id { get; set; }

        public string Name { get; set; }

    }

}

[Monisha Saravanan]

Hi Ben,

Kindly ensure whether you have upgraded both scripts and styles to our latest version (24.2.4) if you are using CDN to load scripts and styles.

I'm unable to upload a gif as the file type is not allowed. -> kindly compress the gif to Zipped folder and share us. So that we can validate further.

Also kindly share the below details for further validation.

1. Share us the codes used behind the GridEvents.
2. Share us whether you are using Blazor server or WASM.
3. Bind the ActionFailure Event to DataGrid and check whether any issue arise while performing dropping by placing the breakpoints.
4. Share us whether you are facing any browser console exceptions.

The above requested details will be very helpful for us to validate the reported issue at our end.

Regards,

Monisha

[Ben Willan]

Hi Monisha,

The problem seems to have sorted it self out. I wasn't using a CDN but the NuGet packages were updated to 24.2.4 when the problem was there, the IDE restarted and project rebuilt and it had no effect. Opening it again now several days later and it's working as expected.

This is now resolved.

Thanks.

[Monisha Saravanan]

Hi Ben,

Thanks for the information. We are glad to hear that the reported issue has been resolved at your end. Kindly get back to us if you have further queries. As always we will be happy to assist you.

Regards,

Monisha