Kendo MVVM Grid Custom Toolbar Syntax

Question

I am trying to add a custom command on the toolbar which will call a JavaScript function in my view model. My HTML:

        <div id="dependencyGrid" data-role="grid"
            data-editable="inline"
            data-toolbar="[{'command':[{'text':'+ Add New Record','click':'this.editApp','name':'Edit-App'}]}]",
            data-bind="source: dependencies"
            data-columns="[
                { command: ['edit', 'destroy'], width: 97},
                { field: 'SystemId', title: 'SystemId', width: 50, hidden: true },
                { field: 'DependentOnSystemId', title: 'Dependent On', width: 190 },
            ]">
        </div>

But I get this error: "Uncaught Error: Custom commands should have name specified" even though I have specified a name. What is my error?

OnaBai OnaBai · Accepted Answer · 2014-08-27T15:56:32

The toolbar should be:

data-toolbar="[{'text':'+ Add New Record','click':'this.editApp','name':'Edit-App'}]"

You have extra "[{'command': ", "}]" and also an extra "," at the end

You can see it here: http://jsfiddle.net/OnaBai/XNcmt/166/

Kendo MVVM Grid Custom Toolbar Syntax

1 Answers