Default delete confirmation dialog still shown when overwritten.

[Rachael]

I'm using the example from http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/custom-delete-confirmation-dialog. From what I can see, the code appears almost identical, but when I click the delete command the default javascript dialog is still shown then the kendo.confirm(). If I then disable the confirmation using confirmation: false in the editable {}, the default confirmation dialog is not shown, but the destroy event is triggered before the kendo.confirm(). Is there a reason why I'm still getting the default confirmation dialog?

 

I've attached a gif screen capture of what I am seeing when clicking the delete command button.

 

var ds_addresses = new kendo.data.DataSource({
        autoSync: false,
        transport: {
            create: {
                url: url('common/ax_add_address'),
                dataType: "json",
                type: "post"
            },
            read: {
                url: url('common/ax_read_addresses/' + item.user_id),
                dataType: "json",
                type: "post",
                contentType: "application/json"
            },
            update: {
                url: url('common/ax_update_address/' + item.user_id),
                dataType: "json",
                type: "post"
            },
            destroy: {
                url: url('common/ax_delete_address'),
                dataType: "json",
                type: "post"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        },
        batch: true,
        serverPaging: false,
        serverSorting: false,
        serverFiltering: false,
        pageSize: 10,
        schema: {
            model: {
                id: "address_id",
                fields: {
                    text: { editable: true, validation: { required: true } },
                    suburb: { editable: true, validation: { required: true }  },
                    postcode: { editable: true, validation: { required: true, max: 9020 } },
                    postal: { type: "boolean", editable: true }
                }
            },
            data: "data",
            total: "total"
        },
        error: function (e) {
            //kendo.alert(e.errors.join("; "));
        }
});

$("div.client-addresses").kendoGrid({
    dataSource: ds_addresses,
    scrollable: false,
    selectable: "row",
    sortable: false,
    pageable: false,
    toolbar: ["create"],
    columns: [
        { field: "address_id", hidden:true },
        { field: "text", title: "Address Text" },
        { field: "suburb", title: "Suburb", width: "200px" },
        { field: "postcode", title: "Postcode", width: "80px" },
        { field: "postal", title: "Postal?", width: "90px", template: "#= postal ? 'Yes' : 'No' #" },
        { command: [
            {name: "edit", text: " ", template: "<a class='k-button k-grid-edit' href='' style='min-width:16px;'><span class='k-icon k-edit'></span></a>" },
            {name: "delete", text: " ", template: "<a class='k-button k-grid-delete' href='' style='min-width:16px;'><span class='k-icon k-delete'></span></a>", click: function(e) {

                e.preventDefault(); //prevent page scroll reset

                var tr = $(e.target).closest("tr"); //get the row for deletion
                var data = this.dataItem(tr); //get the row data so it can be referred later

                kendo.confirm("Are you sure you want to delete this address record?").then(function () {
                    grid.dataSource.remove(data)  //prepare a "destroy" request
                    grid.dataSource.sync()  //actually send the request (might be ommited if the autoSync option is enabled in the dataSource)
                }, function () {
                    //kendo.alert("You chose to Cancel action.");
                });
            }}
           ], title: "Action", width: "118px" }
    ],
    editable: {
        mode: "inline"
    },
    change: function(e) {

        var rows = this.select();

        if(rows.length > 0)
            $('#selected-controls').show();
        else
            $('#selected-controls').hide();
    },
    noRecords: {
        template: '<div style="margin:20px">No address records present.</div>'
    }
});

[Rachael]

Any assistance would be greatly appreciated.

[Dimiter Topalov]

Hi Rachael,

Due to some changes in our more recent releases, the name of the custom button should not match the one of the built-in command (in this case - "delete") in order to avoid triggering the built-in functionality.

If you change the name of the custom button to "Delete" (for example), only the custom click handler will be executed:

http://dojo.telerik.com/aKUli

You can change the name of the command to "delete" in the example above, and then back to "Delete" for a demonstration of the described behavior.

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[Rachael]

Thanks Dimiter, this pointed me in the right direction. I was also missing the fact that I had to change the CSS class also (k-grid-Delete). Much appreciated.

{ name: "Delete", text: " ", template: "<a class='k-button k-grid-Delete' href='' style='min-width:16px;'><span class='k-icon k-delete'></span></a>", click: function(e) {