Drag and Drop in same Grid not working

[Judi Smith]

I set up the following Hierarchical Grid

<SfGrid TValue="Programs" ToolBar=@Tool RowHeight="70">
    <SfDataManager Url="api/programs" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
    <GridEditSettings AllowAdding="true" AllowEditing="true" Mode="EditMode.Dialog"/>
    <GridTemplates>
        <DetailTemplate>
            @{
                var program = (context as Programs);
                <!-- Set private variable programId to the current Program.Id -->
                programId = program.Id;


                <!-- Create an empty Ranks list if we don't already have one -->
                if (program.Ranks == null || program.Ranks.Count() == 0)
                {
                    List<Rank> program_ranks = new List<Rank> {new Rank()};
                    program.Ranks = new List<Rank>(program_ranks);
                }
                <SfGrid TValue="Rank" Query=@GetProgramsQuery(program) ToolBar="@RankTool" @ref="RanksGrid" RowHeight="70">
                    <SfDataManager Url="api/ranks" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
                    <GridEvents TValue="Rank" OnActionFailure="@ActionFailure" OnToolbarClick="ToolbarClickHandler"></GridEvents>
                    <GridEditSettings AllowAdding="true" AllowEditing="true" Mode="EditMode.Dialog">
                        <Template Context="rankContext">
                           /*Template Omitted*/
                        </Template>
                    </GridEditSettings>
                    <GridColumns>
                        <GridColumn Type="ColumnType.CheckBox" Width="50"/>
                        <GridColumn Field="Id" IsPrimaryKey="true" Visible="false" ShowInColumnChooser="false"/>
                        <GridColumn Field="RankOrder"/>
                        <GridColumn Field="RankName"/>
                        <GridColumn Field="UsesBelts" Type="ColumnType.Boolean" DisplayAsCheckBox="true"/>
                        <GridColumn Field="RankRequiredAttendances"/>
                        <GridColumn Field="RankTestFee" Format="C2" TextAlign="TextAlign.Right"/>
                        <GridColumn Field="RankTimeToTest"/>
                        <GridColumn Field="RankTimeToTestUnits"/>
                        <GridColumn Field="RankTestLength">
                            <Template Context="testlengthcontext">
                                @{
                                    var r = (testlengthcontext as Rank);
                                    @r.RankTestLength?.ToString("h\\:mm")
                                    ;
                                }
                            </Template>
                        </GridColumn>
                        <GridColumn Field="ProgramId" Visible="false"/>
                        <GridColumn HeaderText="Edit">
                            <GridCommandColumns>
                                <GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"/>
                            </GridCommandColumns>
                        </GridColumn>
                    </GridColumns>
                </SfGrid>
            }
        </DetailTemplate>
    </GridTemplates>
    <GridColumns>
        <GridColumn Type="ColumnType.CheckBox" Width="50"/>
        <GridColumn Field="Id" IsPrimaryKey="true" Visible="false" ShowInColumnChooser="false"/>
        <GridColumn Field="ProgramName"/>
        <GridColumn Field="ProgramDescription"/>
        <GridColumn Field="UsesRanks" Type="ColumnType.Boolean" DisplayAsCheckBox="true"/>
        <GridColumn HeaderText="Edit">
            <GridCommandColumns>
                <GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"/>
            </GridCommandColumns>
        </GridColumn>
    </GridColumns>
</SfGrid>
<ReorderRanksComponent @ref="reorderRanksDialog"></ReorderRanksComponent>

In the child grid for Ranks I tried AllowRowDragAndDrop="true". But it did not work. I read in the documentation that Row Drag And Drop does not work with Hierarchical Grids. So next I created a separate component "ReorderRanksComponent" with SfDialog which holds an SfGrid. The dialog is opened from a custom tool bar button. 

<SfDialog Width="600" Height="800" ShowCloseIcon="true" Target="#target" @bind-Visible="@Visibility">

    <DialogTemplates>
        <Header>
            <h1><span class="button-title"><span style="vertical-align: text-bottom; padding-right: 5px;" class="material-icons">email</span>Reorder Ranks</span></h1>
        </Header>
        <Content>
            <SfGrid TValue="Rank" Query=@GetProgramsQuery(ProgramId) RowRowHeight="70" AllowRowDragAndDrop="true" AllowSelection="true">
                <SfDataManager Url="api/ranks" Adaptor="Adaptors.WebApiAdaptor"/>
                <GridColumns>
                    <GridColumn Field="Id" IsPrimaryKey="true" Visible="false"/>
                    <GridColumn Field="RankOrder"/>
                    <GridColumn Field="RankName"/>
                </GridColumns>
            </SfGrid>
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Save" IsPrimary="true" OnClick="@Save" />
        <DialogButton Content="Cancel" OnClick="@CloseDialog" />
    </DialogButtons>
</SfDialog>
}

@code {
    int ProgramId { get; set; }
    private bool Visibility { get; set; } = false;


    public Query GetProgramsQuery(int value)
    {
        return new Query().Where("ProgramId", "equal", value);
    }


    public void OpenDialog(int gridProgramId)
    {
        ProgramId = gridProgramId;
        Visibility = true;
        StateHasChanged();
    }


    public void RowDroppedHandler()
    {


    }


    private void CloseDialog()
    {
        Visibility = false;
        StateHasChanged();
    }


    private void Save()
    {
        Visibility = false;
        StateHasChanged();
    }
}

However, I still cannot reorder rows by dragging and dropping. Is there a way to accomplish using Drag and Drop in this scenario?

Thank you

[Judi Smith]

I just discovered that I am getting an error: 

The format of value 'batch_8daf4842-43dd-4d72-a7f0-f5195cff85cf' is invalid.

Thank you in advance

[Vignesh Natarajan]

Hi Judi,

Greetings from Syncfusion support.

Query: “I still cannot reorder rows by dragging and dropping. Is there a way to accomplish using Drag and Drop in this scenario?”

We have analyzed your query and we understand that you are facing an issue while dragging and dropping the records in Grid with datasource returned from the WebAPI adaptor. We would like to inform you while performing the drag and drop action in Grid, a batch update request (to remove the records from the dragged position and to insert the record in dropped location) will be sent to the WebAPI server to include the changes in the database.

But ASP.NET Core (Blazor) Web API with batch handling is not yet supported by ASP.NET Core v3+. Hence it is not feasible for us to support multi-delete with Web API until ASP.NET Core provides the support for the proper batch handler.  

Please find the general GitHub link below. 

GitHub Link : https://github.com/aspnet/AspNetCore/issues/14722

Hence Drag and drop operation is not working at your end with WebAPI adaptor Grid. Please get back to us if you have further queries.

Regards,

Vignesh Natarajan

[Judi Smith]

VIgnesh, thank you for the update.

Couple of questions:

1. Is this limitation in the documentation somewhere? If not, it should be added.
2. Is there an alternative that will work with DataGrid?

Thank you in advance.

[Naveen Palanivel]

Hi judi,

Greetings from Syncfusion support.

We analysis your query and we like to inform that limitation in the web API Controllers  and yes there is an alternative work with datagrid by using ODataV4 or customize Adaptor. We already discuss in the documentation given below.

https://blazor.syncfusion.com/documentation/datagrid/data-binding#binding-with-odata-v4-services

If you have further queries, please get back to us with more details. 

Regards,

Naveen Palanivel.