This is a migrated thread and some comments may be shown as answers.

Default delete confirmation dialog still shown when overwritten.

3 Answers 468 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rachael
Top achievements
Rank 1
Rachael asked on 14 Jan 2017, 01:57 AM

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>'
    }
});

3 Answers, 1 is accepted

Sort by
0
Rachael
Top achievements
Rank 1
answered on 17 Jan 2017, 10:26 AM
Any assistance would be greatly appreciated.
0
Dimiter Topalov
Telerik team
answered on 17 Jan 2017, 12:22 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Rachael
Top achievements
Rank 1
answered on 17 Jan 2017, 12:43 PM

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) {
Tags
Grid
Asked by
Rachael
Top achievements
Rank 1
Answers by
Rachael
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or