1. Home
  2. Forum
  3. Blazor
  4. ConfirmDeleteDialog from Command Column execute before press Ok button of Dialog box

ConfirmDeleteDialog from Command Column execute before press Ok button of Dialog box

Hi here is my code

@page "/"
@page "/ViewCountry"
@inject HttpClient http;
@inject NavigationManager navigationManager;
@inject IJSRuntime JSRuntime



<h3>Country</h3>

@if (countryList == null)
{
    <div class="row">
        <div class="col-md-12" id="container">
            <SfSpinner ID="spinner" Type="Syncfusion.Blazor.Popups.SpinnerType.Material" Target="container" Width="200">

            </SfSpinner>
        </div>

    </div>
}
else if (countryList.Count == 0)
{
    <span>No record found in the Database.....</span>
}
else
{
    <SfButton OnClick="AddNew">Add New</SfButton>
    <br />
    <SfGrid DataSource="@countryList" TValue="CountryMaster" AllowFiltering="true" AllowPaging="true" AllowSorting="true">
        <GridEditSettings AllowDeleting="true" AllowEditing="true" ShowDeleteConfirmDialog="true"></GridEditSettings>
        <GridSearchSettings IgnoreCase="true" Operator="Operator.Contains"></GridSearchSettings>
        <GridPageSettings PageSize="5"></GridPageSettings>
        <GridEvents CommandClicked="CommandClickHandler" TValue="CountryMaster"></GridEvents>

        <GridColumns>
            <GridColumn Field=@nameof(CountryMaster.CountryName) HeaderText="Country Name"></GridColumn>

            <GridColumn Width="150" Filter="false" HeaderText="Actions">
                <GridCommandColumns>
                    <GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-edit", CssClass="e-flat" })"></GridCommandColumn>
                    <GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-delete", CssClass="e-flat" })"></GridCommandColumn>
                </GridCommandColumns>
            </GridColumn>
        </GridColumns>
    </SfGrid>
}

@code {

    public List<CountryMaster> countryList { get; set; }

    string apiPath = "https://localhost:44321/api/" + "CountryMaster";

    protected override async Task OnInitializedAsync()
    {
        await LoadCountryList();
    }

    async Task LoadCountryList()
    {
        countryList = await http.GetJsonAsync<List<CountryMaster>>(apiPath);
    }

    public void CommandClickHandler(CommandClickEventArgs<CountryMaster> args)
    {
        long CountryId = 0;
        if (args.CommandColumn.Type == CommandButtonType.Edit)
        {
            CountryId = args.RowData.CountryId;
            navigationManager.NavigateTo("/EditCountry/" + CountryId);
        }
        else if (args.CommandColumn.Type == CommandButtonType.Delete)
        {
            CountryId = args.RowData.CountryId;
            //I want run this method to be executed if the confirm dialog has been clicked with ok button
            Task.Run(() => DeleteCountry(CountryId));
        }
    }

    public async Task DeleteCountry(long CountryId)
    {
        var country = countryList.First(c => c.CountryId == CountryId);
        var result = await http.DeleteAsync(apiPath + "/" + CountryId);
        string Message = "Record Successfully Deleted !!!";
        if (result.StatusCode == HttpStatusCode.NotFound)
        {
            Message = "No such Country found to Delete Country";
        }
        else if (result.StatusCode == HttpStatusCode.BadRequest)
        {
            Message = result.ReasonPhrase;
        }
        else if (result.StatusCode == HttpStatusCode.OK)
        {
            await LoadCountryList();
        }
    }

    public void AddNew()
    {
        navigationManager.NavigateTo("/AddCountry");
    }
}









Here is my _Host.cshtml

@page "/"
@namespace eBizRiseServer.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>eBizRiseServer</title>
    <base rel='nofollow' rel='nofollow' href="~/" />
    <link rel="stylesheet" rel='nofollow' rel='nofollow' href="css/bootstrap/bootstrap.min.css" />
    <link rel='nofollow' rel='nofollow' href="css/site.css" rel="stylesheet" />
    <link rel='nofollow' rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" />
    <link rel='nofollow' rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.19.2/sweetalert2.min.css" rel="stylesheet" />


</head>
<body>
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>

    <script src="js/Helpers.js"></script>
    <script src="_framework/blazor.server.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.19.2/sweetalert2.min.js"></script>

</body>
</html>





The Delete Country method executes each time even though the Cancel button is clicked of dialog box.....
Please help in this

3 Replies
RS Renjith Singh Rajendran Syncfusion Team April 14, 2020 07:17 AM UTC

Hi Salimkhan, 

Thanks for contacting Syncfusion support. 

Based on your requirement, we suggest you to use the codes in “OnActionBegin” event instead of “CommandClicked” event to achieve this requirement. This event will be triggered only when the data operation like Delete action occurs, so only when click on the OK button in Delete confirm dialog, this event will be triggered. In this event handler based on the RequestType you can call your method. Please use the code below, 

 
<SfGrid DataSource="@Orders" TValue="Order" AllowFiltering="true" AllowPaging="true" AllowSorting="true"> 
    ... 
   <GridEvents CommandClicked="CommandClickHandler" OnActionBegin="OnActionBegin" TValue="Order"></GridEvents> 
 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.IdRecord) HeaderText="IdRecord" IsPrimaryKey="true"></GridColumn>   //Must to set a unique value column as primary key column 
        <GridColumn Field=@nameof(Order.UserName) HeaderText="UserName"></GridColumn> 
        <GridColumn Width="150" Filter="false" HeaderText="Actions"> 
            <GridCommandColumns> 
                ... 
           </GridCommandColumns> 
        </GridColumn> 
    </GridColumns> 
</SfGrid> 
 
@code 
{ 
    ... 
   public void OnActionBegin(ActionEventArgs<Order> args) 
    { 
        long CountryId = 0; 
        if (args.RequestType.ToString() == "Delete")       inner code will be executed only when OK button is clicked 
        { 
            CountryId = args.Data.IdRecord; 
            Task.Run(() => DeleteCountry(CountryId)); 
        } 
    } 
     
} 


Note : If you are performing any CRUD operations in Grid, then it is a must to specify a unique value column as Primary key column. 

Documentations :  
 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


SP Salimkhan Pathan April 14, 2020 02:08 PM UTC

Thanks, it resolved. 

Really appreciate your support.

RS Renjith Singh Rajendran Syncfusion Team April 15, 2020 05:10 AM UTC

Hi Salimkhan, 

Thanks for your update. 

We are glad to hear that the provided suggestion helped you in achieving your requirement. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


Loader.
Up arrow icon