Default delete confirmation dialog still shown when overwritten.

4 posts, 0 answers
  1. Rachael
    Rachael avatar
    3 posts
    Member since:
    Aug 2016

    Posted 13 Jan 2017 Link to this post

    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>'
        }
    });
  2. Rachael
    Rachael avatar
    3 posts
    Member since:
    Aug 2016

    Posted 17 Jan 2017 Link to this post

    Any assistance would be greatly appreciated.
  3. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1049 posts

    Posted 17 Jan 2017 Link to this post

    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.
  4. Rachael
    Rachael avatar
    3 posts
    Member since:
    Aug 2016

    Posted 17 Jan 2017 Link to this post

    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) {
Back to Top