We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Multiple rows selected after canceling delete using DeleteConfirmDialog

Hi,

I am having an issue using a command column with a delete button that requests confirmation from the user to delete the record. It all works fine, but the record stays selected when canceling the delete operation. Then if the user clicks on the delete button on another record, and cancels the operation, that record also stays selected. This can continue as much as the user can, even if I set the grid to a single selection. The biggest issue is that all selected records are deleted once the user confirms the delete operation.

How can I prevent the grid from keeping these records selected after canceling the delete operation?

Here an extract of the code that reproduces thee issue:

<SfGrid @ref="_sfGrid" DataSource="DataSource" AllowPaging="true" AllowFiltering="true" AllowReordering="true"
AllowResizing="true" AllowGrouping="true" AllowExcelExport="true" AllowSorting="true"
Toolbar="@(new List<string>() { "Add", "ExcelExport", "Search" })" Height="315">
<GridSelectionSettings Mode="SelectionMode.Row" Type="SelectionType.Single"/>
<GridEditSettings AllowAdding="true" AllowDeleting="true" ShowDeleteConfirmDialog="true"/>
<GridEvents OnToolbarClick="OnToolbarClicked" OnActionBegin="OnActionBegin" CommandClicked="OnCommandClicked" TValue="DataType"/>
<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"/>
<GridPageSettings PageSizes="true"/>
<GridColumns>
<GridColumn Field=@nameof(DataType.Id) HeaderText="Id" IsPrimaryKey="true" TextAlign="TextAlign.Left"/>
<GridColumn Field=@nameof(DataType.Field1) HeaderText="Field1" TextAlign="TextAlign.Left"/>
<GridColumn Field=@nameof(DataType.Field2) HeaderText="Field2" TextAlign="TextAlign.Left"/>
<GridColumn HeaderText="Actions" Width="100" HeaderTextAlign="TextAlign.Center">
<GridCommandColumns>
<GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"/>
<GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-delete", CssClass = "e-flat" })"/>
</GridCommandColumns>
</GridColumn>
</GridColumns>
</SfGrid>

@code
{
private class DataType
{
public string Id { get; set; }
public string Field1 { get; set; }
public string Field2 { get; set; }
}

private IList<DataType> DataSource { get; set; }

private SfGrid<DataType> _sfGrid;

/// <inheritdoc />
protected override async Task OnInitializedAsync()
{
DataSource = new List<DataType>()
{
new() { Id = "1", Field1 = "Field11", Field2 = "Field2" },
new() { Id = "2", Field1 = "Field11", Field2 = "Field2" },
new() { Id = "3", Field1 = "Field11", Field2 = "Field2" },
new() { Id = "4", Field1 = "Field11", Field2 = "Field2" },
new() { Id = "5", Field1 = "Field11", Field2 = "Field2" },
new() { Id = "6", Field1 = "Field11", Field2 = "Field2" }
};
await base.OnInitializedAsync();
}

private async Task OnToolbarClicked(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Text == "Excel Export")
await _sfGrid.ExportToExcelAsync();
}

private void OnCommandClicked(CommandClickEventArgs<DataType> args)
{
if (args.CommandColumn.Type == CommandButtonType.Edit)
{
// NavigationManager.NavigateTo("somepage");
}
}

private async Task OnActionBegin(ActionEventArgs<DataType> args)
{
if (args.RequestType == Action.Add)
{
// NavigationManager.NavigateTo("/some page");
}

if (args.RequestType == Action.Delete)
{
try
{
var item = DataSource.FirstOrDefault(item => item.Id == args.Data.Id);
if (item != null)
DataSource.Remove(item);
}
catch(Exception exception)
{
// handler
}
}
}
}




5 Replies 1 reply marked as answer

PS Prathap Senthil Syncfusion Team December 19, 2022 02:01 PM UTC

Hi Cristobal,

Greetings from Syncfusion support

Query: “The biggest issue is that all selected records are deleted once the user confirms the delete operation.”

Based on your reported issue, we validated your shared code snippet, but we were unable to reproduce the problem in our most recent version[20.3.0.61]. If the reported issue persists. kindly share the below details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

              1. Share with us the NuGet version used.

2. Share with us the video demonstration of the issue with the replication procedure.

Query:” How can I prevent the grid from keeping these records selected after canceling the delete operation?”

This is the default behavior after canceling a delete in the grid's built-in dialogue. To overcome this behavior, we recommend using a custom dialogue to call the ClearSelectionAsync method inside the custom dialogue's cancel button, as shown in the code below.

<SfGrid @ref="Grid" TValue="DataType" DataSource="DataSource" AllowPaging="true" AllowFiltering="true" AllowReordering="true"

        AllowResizing="true" AllowGrouping="true" AllowExcelExport="true" AllowSorting="true"

        Toolbar="@(new List<string>() { "Add", "ExcelExport", "Search" })" Height="315">

    <GridSelectionSettings Mode="SelectionMode.Row" Type="Syncfusion.Blazor.Grids.SelectionType.Single" />

    <GridEditSettings AllowAdding="true" AllowDeleting="true"  />

    ----------

   </GridColumns>

</SfGrid>

 

@if (openDialogBtn)

{

    <SfDialog Width="250px"  IsModal="true" @bind-Visible="@IsVisible">

 

        <DialogTemplates>

 

            <Content>

              Are you sure you want to delete record?

 

            </Content>

 

 

        </DialogTemplates>

 

        <DialogButtons>

 

            <DialogButton Content="Delete" IsPrimary="true" OnClick="@OkClick" />

 

            <DialogButton Content="Cancel" OnClick="@CancelClick" />

 

        </DialogButtons>

 

    </SfDialog>

 

 

 

}

 

@code

{

    private bool IsVisible { get; set; } = true;

    private bool openDialogBtn { get; set; } = false;

    private SfGrid<DataType> Grid;

   

    private class DataType

    {

        public string Id { get; set; }

        public string Field1 { get; set; }

        public string Field2 { get; set; }

    }

 

    private IList<DataType> DataSource { get; set; }

 

 

 

    /// <inheritdoc />

    protected override async Task OnInitializedAsync()

    {

        DataSource = new List<DataType>()

        {

            new() { Id = "1", Field1 = "Field11", Field2 = "Field2" },

            new() { Id = "2", Field1 = "Field11", Field2 = "Field2" },

            new() { Id = "3", Field1 = "Field11", Field2 = "Field2" },

            new() { Id = "4", Field1 = "Field11", Field2 = "Field2" },

            new() { Id = "5", Field1 = "Field11", Field2 = "Field2" },

            new() { Id = "6", Field1 = "Field11", Field2 = "Field2" }

        };

        await base.OnInitializedAsync();

    }

 

    public async Task CancelClick()

 

    {

        IsVisible = false;

        Grid.ClearSelectionAsync();

 

    }

 

    public async Task OkClick()

    {

 

        Grid.DeleteRecordAsync();

        Grid.Refresh();

        IsVisible = false;

 

    }

 

 

    private void OnCommandClicked(CommandClickEventArgs<DataType> args)

    {

        if (args.CommandColumn.Type == CommandButtonType.Delete)

        {

            openDialogBtn = true;

            IsVisible = true;

 

        }

    }

 

    private async Task OnActionBegin(ActionEventArgs<DataType> args)

    {

        if (args.RequestType == Action.Delete)

        {

            args.Cancel = true;

           

        }

 

    }

}


Reference :
https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSelectionAsync



Regards,
Prathap S


Attachment: BlazorDataGrid_858fd7aa.zip


CR Cristobal December 19, 2022 07:16 PM UTC

Hi,

Thanks for the reply; I was using version 20.3.0.60 and just updated it to 20.3.0.61. After updating, the issue is gone, so it works fine now.

I have another question related to the same code. 

When deleting a registry, if the backend does not delete the record, the row in the grid gets deleted anyway (not in the backend). Is there a way to prevent this from happening?

For example, if I block the deletion on item Id = "3" in the code, when deleting it, it gets removed from the grid, yet the dataset still contains it.


private async Task OnActionBegin(ActionEventArgs<DataType> args) 

    {

        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Add)

        {

    // NavigationManager.NavigateTo("/some page");

        }


        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Delete)

        {

            try

            {

                var item = DataSource.FirstOrDefault(item => item.Id == args.Data.Id);

                if (item != null && item.Id !="3")

                    DataSource.Remove(item);

            }

            catch(Exception exception)

            {

    // handler

            }

        } 

    }




PS Prathap Senthil Syncfusion Team December 21, 2022 02:15 AM UTC

Thank you for updating us, we are happy to hear that the reported issue has been solved.

We checked another reported query based on your code snippet. If you want to block the delete in a particular row id, we suggest setting args.cancel as true to prevent the delete operation. We have used the ActionBegin event of the DataGrid and, by using the request type as delete.

private async Task OnActionBegin(ActionEventArgs<DataType> args)

    {

        if (args.RequestType == Action.Add)

        {

            // NavigationManager.NavigateTo("/some page");

        }

 

        if (args.RequestType == Action.Delete)

        {

 

            if(args.Data.Id == "3")

            {

                args.Cancel = true;

            }

 

        }

    }


Documentation: https://blazor.syncfusion.com/documentation/datagrid/events#onactionbegin
                              https://blazor.syncfusion.com/documentation/datagrid/editing#event-trace-while-editing


Marked as answer

CR Cristobal December 21, 2022 10:31 AM UTC

Hi,


Thank you very much for the help.

That solves all my questions (issues) for now.


Cheers,

Cristobal.



PS Prathap Senthil Syncfusion Team December 21, 2022 12:34 PM UTC

Thank you for letting us know that the provided solution was helpful. We are glad to hear that it has been resolved. We will now close this thread.

Please get back to us if you have any further queries.


Loader.
Live Chat Icon For mobile
Up arrow icon