Completed
Last Updated: 26 Jul 2021 07:36 by ADMIN
Release 2.26.0
David
Created on: 24 Jan 2020 15:48
Category: Grid
Type: Feature Request
29
grid delete confirmation

Can you add a confirmation popup to the grid row delete like what is in the JQuery UI library?

---

ADMIN EDIT

As of 2.23.0 predefined confirmation dialog is available for use with just a few lines of code and you can achieve that behavior through the OnClick event of the command button:

<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline"
             Height="500px" AutoGenerateColumns="true" Pageable="true"
             OnDelete="@DeleteItem">
    <GridColumns>
        <GridAutoGeneratedColumns />

        <GridCommandColumn Width="100px">
            <GridCommandButton Command="Delete" Icon="delete" OnClick="@ConfirmDelete">Delete</GridCommandButton>
        </GridCommandColumn>

    </GridColumns>
</TelerikGrid>

@code {
    //for the confirmation - see the OnClick handler on the Delete button
    [CascadingParameter]
    public DialogFactory Dialogs { get; set; }

    async Task ConfirmDelete(GridCommandEventArgs e)
    {
        Product productToDelete = e.Item as Product;
        string confirmText = $"Are you sure you want to delete {productToDelete.Name}?";
        string confirmTitle = "Confirm Deletion!";
        //the actual confirmation itself
        bool userConfirmedDeletion = await Dialogs.ConfirmAsync(confirmText, confirmTitle);
        e.IsCancelled = !userConfirmedDeletion;//cancel the event if the user did not confirm
    }

    // only sample data operations follow

    public List<Product> GridData { get; set; }

    protected override async Task OnInitializedAsync()
    {
        GridData = Enumerable.Range(1, 50).Select(x => new Product { Id = x, Name = $"Name {x}" }).ToList();
    }

    private void DeleteItem(GridCommandEventArgs args)
    {
        Console.WriteLine("DELETING ITEM");
        var argsItem = args.Item as Product;

        GridData.Remove(argsItem);
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

---

10 comments
ADMIN
Marin Bratanov
Posted on: 05 Apr 2021 16:43

Hi Wes,

To know when it gets implemented as an out-of-the-box feature, please click the Follow button on the portal page. This is the best way to get email status updates for changes, such as the release number when we know it - we keep the portal up to date.

Now that the dialog component is available, you can already have that confirmation with just a few lines of code through the OnClick event of the command button too:

<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline"
             Height="500px" AutoGenerateColumns="true" Pageable="true"
             OnDelete="@DeleteItem">
    <GridColumns>
        <GridAutoGeneratedColumns />

        <GridCommandColumn Width="100px">
            <GridCommandButton Command="Delete" Icon="delete" OnClick="@ConfirmDelete">Delete</GridCommandButton>
        </GridCommandColumn>

    </GridColumns>
</TelerikGrid>

@code {
    //for the confirmation - see the OnClick handler on the Delete button
    [CascadingParameter]
    public DialogFactory Dialogs { get; set; }

    async Task ConfirmDelete(GridCommandEventArgs e)
    {
        Product productToDelete = e.Item as Product;
        string confirmText = $"Are you sure you want to delete {productToDelete.Name}?";
        string confirmTitle = "Confirm Deletion!";
        //the actual confirmation itself
        bool userConfirmedDeletion = await Dialogs.ConfirmAsync(confirmText, confirmTitle);
        e.IsCancelled = !userConfirmedDeletion;//cancel the event if the user did not confirm
    }

    // only sample data operations follow

    public List<Product> GridData { get; set; }

    protected override async Task OnInitializedAsync()
    {
        GridData = Enumerable.Range(1, 50).Select(x => new Product { Id = x, Name = $"Name {x}" }).ToList();
    }

    private void DeleteItem(GridCommandEventArgs args)
    {
        Console.WriteLine("DELETING ITEM");
        var argsItem = args.Item as Product;

        GridData.Remove(argsItem);
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Wes
Posted on: 05 Apr 2021 14:16

Now that dialog has been released are there plans to add this as a built in feature of the grid?

This seems like a basic feature that should be included.

 

 

ADMIN
Marin Bratanov
Posted on: 06 Oct 2020 07:02

Hello,

The best way to get status updates is to click the Follow button on the page. When we know which release will include a feature, we update it here too.

At the moment, this is not in the top list of requests in terms of popularity and so it should still be implemented separately in the project (see a sample linked in the thread below). We are monitoring its traction, though, as we monitor the entire portal and other channels.

By the way, you may also want to Follow this one as it is a prerequisite for this.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Jan
Posted on: 05 Oct 2020 18:33

Hi, can we expect this functionality to be added in the near future or did it not get any priority for now?

ADMIN
Marin Bratanov
Posted on: 28 May 2020 09:02

Hi,

You can click the Follow button on this page to get status change notifications when this gets updated. In the meantime, you can try the workaround linked before.

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
laboratorysystemdevelopment
Posted on: 27 May 2020 21:43
Is the delete confirmation feature there yet?
ADMIN
Marin Bratanov
Posted on: 24 Apr 2020 16:12

Hi Dan,

The issue is another bug that stems from the ObservableCollection data: https://feedback.telerik.com/blazor/1450321-grid-stays-in-edit-mode-after-clicking-save-when-bound-to-observablecollection. It will be fixed in our 2.13. 0 release.

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Dan
Posted on: 24 Apr 2020 13:56

The example code does not allow the user to edit an item in the grid. In edit mode the update button does not terminate the edit.

 https://github.com/telerik/blazor-ui/tree/master/common/confirm-button

David
Posted on: 24 Jan 2020 16:18

Marin,

Thanks for the example, I will check it out.

ADMIN
Marin Bratanov
Posted on: 24 Jan 2020 16:12

Hi David,

That's a neat idea and you can actually do this right now: https://github.com/telerik/blazor-ui/tree/master/common/confirm-button.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor