Creating and extending Kendo widgets

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. One way to change this is to write my own custom widget which extends Kendo Grid, but I don’t want 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.