Extending Kendo Grid

Kendo UI is very powerful, especially when you need to customize existing component or extend it with your features.

I don’t like existing JavaScript confirmation dialog which appears when you want press delete button in grid popup or inline editing mode.

On Telerik page there is example for that, but that way I would need to change in all existing grids. Other way is to write my own custom widget which extends Kendo Grid, but then again I have to change all existing code…

So I am just going to extend Grid class like this:

(function ($, kendo) {

    var _oldRemoveRow = kendo.ui.Grid.fn.removeRow; // store original function

    var confirmDelete = function (row, grid) {
        var kendoWindow = $("<div />").kendoWindow({
            title: document.title,
            resizable: false,
            modal: true,
            width: '400px',
            draggable: true,
            actions: ['Close']
        });
        kendoWindow.data('kendoWindow')
            .content($('<p>' + grid.options.messages.editable.confirmation + '</p><div class="dialog-buttons"><button class="confirm-ok k-button">' + grid.options.messages.editable.confirmDelete + '</button><a href="#" class="confirm-cancel k-button">' + grid.options.messages.editable.cancelDelete + '</a></div>'))
            .center().open();
        kendoWindow
            .find(".confirm-ok, .confirm-cancel")
            .click(function () {
                kendoWindow.data("kendoWindow").close();
                kendoWindow.data("kendoWindow").destroy();
                if ($(this).hasClass('confirm-ok')) { 
                    grid._removeRow(row);                                  
                }
            });
    };

    var Grid = kendo.ui.Grid.extend({
        removeRow: function (row) { // new function
            var that = this;
            confirmDelete(row, that);
        },
    });

    kendo.ui.plugin(Grid);
}(window.kendo.jQuery, window.kendo));

And that’s all!

Try this example on JSFiddle or download source from GitHub repository.