CODEWITHSUNDEEP
jquerykendo-uikendo-grid
jestges
jestges

Reputation: 3740

Kendo grid row delete confimation

Hi I've a Kendo grid with delete button on each row. When I click on delete button it is asking for confirmation like "Delete?" up to here it is fine. Now I want to catch the events when I click on yes or now.

When I click yes want to display a message. And when I click No I want to display another message.

How to catch these events in Kendo?

Upvotes: 2

Views: 15688

Answers (4)

Prathap Kudupu
Prathap Kudupu

Reputation: 1353

I tried all the examples above was not able to resolve it. It simple

//Add this line of code to the grid
   columns.Command(command => command.Custom("Remove").Click("removeItem"));
   //Java script function to remove
       function removeItem(e) {
        //Get the instance of the grid
        var grid = $("#grid").data("kendoGrid");
        //Get the selected grid
        var tr = $(e.target).closest("tr");
        //Get the item from the grid
        var data = this.dataItem(tr);
        //Remove the item from the datasource
        grid.dataSource.remove(data);
        //Sync it with the grid
        dataSource.sync();
   }

Upvotes: 0

serendipity07
serendipity07

Reputation: 4324

UweB is correct, you cannot hook into the destroy event. There is an example in the Kendo UI Code Library for rolling your own delete confirmation.

http://www.kendoui.com/code-library/web/grid/customize-the-delete-confirmation-dialog.aspx

The linked code example uses the Kendo Window, and gives you a way to handle the click event for both yes and no. If you just need a custom delete message, here's a code snippet:

$("#grid").kendoGrid({
    columns: [
        {
            command: [{ name: "edit" }, {
                name: "Delete", imageClass: "k-icon k-i-close", click: function (e) {
                    e.preventDefault();
                    var dataItem = this.dataItem($(e.target).closest("tr"));
                    if (confirm('Do you really want to delete my favorite record?')) {
                        var dataSource = $("#grid").data("kendoGrid").dataSource;
                        dataSource.remove(dataItem);
                        dataSource.sync();
                    }
                }
            }], title: " ", width: "200px"
        }
    ]
});

Upvotes: 2

Vojtiik
Vojtiik

Reputation: 2560

I agree with UweB, there is no way how to catch such events. Ideally do the delete dialogue yourself using KendoWindow, you will gain more freedom and looks as the page UI.

Try following : http://jsfiddle.net/vojtiik/KZ6pj/8/

Add command :

 command: [{
            name: "delete",
            text: "delete",
            click: _handleDelete,
            imageClass: "ui-icon ui-icon-close"
        }],

Capture selected item and pass the control to the window:

  function _handleDelete(event) {
        dataitem = grid.dataItem($(event.currentTarget).closest("tr"));
        kWindow.open();
    };

Do your stuff and delete:

   $('.yesbtn').click(function () {
        console.log('My message');
        grid.dataSource.remove(dataitem);  
        kWindow.close();
    });

Upvotes: 0

UweB
UweB

Reputation: 4110

I don't believe it is possible to catch these, the destroy event is built-in and works "as-is".

However, there's the click event (http://docs.kendoui.com/api/web/grid#configuration-columns.command.click) where you can create a custom command that displays a confirmation dialogue that you have to write (could e.g. use the javascript built-in confirm() which doesn't look pretty, but will work for now), where you have full control over the buttons and events they fire.

Upvotes: 1

Related Questions