Kendo UI insert custom command in dynamic datasource (SOLUTION)

by Yordan Asenov

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<div id="example">
    <table id="grid" data-bind="source: gridRows"></table>
</div>

CSS

.custom-delete-btn {
    color: Black !important;
}

JavaScript

$(document).ready(function () {
    var myDataSource = new kendo.data.DataSource({
        data: [{
            one: "1",
            two: "2",
            three: "3",
            four: "4"
        }, {
            one: "5",
            two: "6",
            three: "7",
            four: "8"
        }]
    });

    myDataSource.fetch();

    var myDataSourceRowsNumber = myDataSource.total();

    var rows = [];
    var columns = null;
    var columnsCount = 0;

    for (var i = 0; i < myDataSourceRowsNumber; i++) {
        var entryArray = [];
        var dataItem = myDataSource.at(i);

        columns = [];

        for (var field in dataItem) {
            if (dataItem.hasOwnProperty(field) && field != 'parent' && field != 'uid' && field != '_events') {

                columns.push({
                    field: field,
                    value: dataItem[field.toString()]
                });
            }
        }

        columnsCount = columns.length;
        for (var j = 0; j < columnsCount; j++) {
            entryArray.push(dataItem[columns[j].field]);
        }

        rows.push(kendo.observable({
            entries: entryArray
        }));
    }

    var viewModel = kendo.observable({
        gridRows: rows
    });

    var finalColumns = [];
    for (var k = 0; k <= columnsCount; k++) {
        var entryIndex = "entries[" + k + "]";
        if (k != columnsCount) {
            finalColumns.push({
                field: entryIndex,
                title: columns[k].field
            });
        } else {
            finalColumns.push({
                command: [{
                    name: "CustomDelete",
                    text: "Delete",
                    className: "custom-delete-btn ",
                    imageClass: "k-icon k-i-close",
                    click: ManageDeleteButtonClick
                }],
                title: "Actions"
            });
        }
    }

    var configuration = {
        editable: true,
        sortable: true,
   ...