What else do I need to make kendo grid's custom toolbar command work?

Question

I need to add a custom toolbar command to my kendo-grid so I searched the kendo-ui documentation about the grid#configuration-toolbar where I found that:

If an Array value is assigned (to a toolbar property), it will be treated as the list of commands displayed in the grid's Toolbar. Commands can be custom or built-in ("cancel", "create", "save", "excel", "pdf").

and I created a custom command for my toolbar (suggested also in this question Adding custom button to KendoGrid Toolbar Issue)

toolbar: [
    {
        name: "copyRows",
        text: "Copy Rows",
        click: function (e) {
            alert('test');
        }
    },
],

with an additional property for the click event handler like described in the documentation for a command columns.command.click Function:

The JavaScript function executed when the user clicks the command button. The function receives a jQuery Event as an argument.

...however it doesn't fire the the click event and the alert doesn't show up.

Do you know what I am missing here?

The complete code that I test looks like this:

$("#grid").kendoGrid({
    columns: [{
        field: "name"
    }, ],
    editable: true,
    toolbar: [{
        name: "create",
        text: "New Row"
    }, {
        name: "copyRows",
        text: "Copy Rows",
        click: function (e) {
            alert('test');
        }
    }, ],
    dataSource: {
        data: [{
            name: "Jane Doe"
        }],        
    }
});

jsfiddle for custom toolbar command

Answer 1

I have found the solution. For some strange undocumented reason a toobar command is not the same command as a column command and cannot be customized in the same way. The only thing they have in common is that a toolbar command can invoke a column command. There seems to be no click event in the toolbar:

$("#grid").kendoGrid({
    columns: [{
        field: "name"
    },{
        command: [{
        name: "customCommand",
        text: "Column Command",
        click: function(e){
            alert('Column Command');
        }
    }]
    } ],
    editable: true,
    toolbar: [{
        name: "create",
        text: "New Row"
    }, {
        // This actually calls the column command with the same name.
        name: "customCommand",
        text: "Toolbar Command",
        // The click event never gets fired.
        click: function (e) {
            alert('Toolbar Command');
        }
    }, ],
    dataSource: {
        data: [{
            name: "Jane Doe"
        }],        
    }
});

demo at jsfiddle

But I didn't want to have an extra button in each row only to make the toolbar command work so the solution was to use a custom template for the toolbar with a custom event handler:

$("#grid").kendoGrid({
    columns: [{
        field: "name"
    }],
    editable: true,
    toolbar: [{
        template:
            '<a class="k-button k-button-icontext k-grid-add" href="\\#"><span class="k-icon k-add"></span>New Row</a>' +
            '<a class="k-button k-grid-custom-command" href="\\#">Toolbar Command</a>'
    }],
    dataSource: {
        data: [{
            name: "Jane Doe"
        }],
    }
});

$('a.k-grid-custom-command').click(function (e) {
    alert('Toolbar Command');
});

demo at jsfiddle