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.
BoldDeskWe are launching BoldDesk on Product Hunt soon. Learn more & follow us.
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
}
}
}
}
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;
}
} } |
Regards,
Prathap S
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
}
}
}
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
Hi,
Thank you very much for the help.
That solves all my questions (issues) for now.
Cheers,
Cristobal.
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.
