Custom command MVVM binding

[Dennis]

Hi,
I'm trying to bind a grid custom command via MVVM and having no luck. i bind the function on the model inside the data-columns attribute ("command":["edit", "destroy", {"text" : "Reset password", "click": "ResetPassword" }) but the function just doesnt fire when i click the command button. Below is the markup for my girds div and the view model.
I'm going crazy here and cant seem to figure out what I'm doing wrong. I also tried this "click" : "viewModel.ResetPassword" but it also wasnt firing.

Help me someone please!

    <div id = "TeamMembersGird" data-role="grid" data-sortable="true" data-pagable="true"

data-editable='{"mode" : "popup", "confirmation" : "Are you sure you want to delete this team member?"}'

         data-bind="source: teamMembersSource"

         data-columns='[

{"field":"FirstName", "title":"First name"},

{"field":"LastName", "title":"Last name"},

{"field":"IsCompanyAdmin", "width":"100px", "title":"Admin"},

{"title":"Action","width":"300px", "command":["edit", "destroy",

{"text" : "Reset password", "click": "ResetPassword" }]

}]'>

 </div>

 

 

  $(function(){

        var viewModel = kendo.observable({

            teamMembersSource: new kendo.data.DataSource({

                transport: {

                    read: {

                        url: '@(Url.Action("Get", "TeamMembers", new { Area = "API" }))',

              

                        data: {

                            companyID: '@(((Signuper.WebApp.Infrastructure.SignuperProfessional)User).CompanyID)'

                        }

                    },

                    destroy: {

                        url: '@(Url.Action("Delete", "TeamMembers", new { Area = "API" }))',

                        type: "DELETE",

                        datatype:"json",       

                    },

                },

                schema: {

                    model: {

                        id: "UserID",

                        fields:

                            {

                                UserID: { type: "number"},

                                FirstName: {type: "string"},

                                LastName: {type: "string"},

                                Gender: {type:"string"},

                                CompanyID: {type: "number"},

                                IsCompanyAdmin: {type: "boolean"}   

                            }

                    },

                    data: "TeamMembers",

                    total: "TotalCount"

                },

                batch:false,

                serverPaging: true,

                pageSize:10

            }),

            RefreshData: function () {

                this.teamMembersSource.read();

            },

 

            ResetPassword : function(e) {

                e.preventDefault();

                var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

                ChangePasswordWindow.refresh({

                url: '@Url.Action("ChangeMemberPassword", "Management", new { area = "Company" })',

                data: { UserID: dataItem.UserID }

            });

            ChangePasswordWindow.center().open();

           }

 

      

        });

[Rosen]

Hi Dennis,

As you may know, when the command name is not set the command text is used as such instead. In the current official version it is mandatory command name not to have spaces in the name. Having this in mind, in order to have command text with spaces, you should also explicitly set the name of the command:

{"text" : "Reset password", "click": "ResetPassword", "name":  "ResetPassword" }

Regards,
Rosen
the Telerik team

[Dennis]

Hi,

I've actually later read about this in another forum post, and tried adding the name, I've also tried removing the space from the text, but the issue stays the same. I eventualy gave up on custom commands and handled this in another way.

[Darryl]

Has anyone found an answer for this one yet?

My code looks like this ...

<div data-role="grid"

    data-editable="popup"

    data-columns='["ProductName", "UnitPrice", "UnitsInStock", {"command": ["edit", "destroy", {"name": "showDetail", "text" : "Details", "click": "ShowDetail" }] }]'

    data-pageable="true"

    data-autobind="false"

    data-filterable="true"

    data-bind="source: gridSource">

</div>

and my viewModel has a function to match ...

var viewModel = kendo.observable({

    ...

        ShowDetail: function (e) {

             // do something;

        },

    ...

});

but I get the following error when I click on the custom command button ...

Error: Object doesn't support property or method 'apply'

A closer look at the Kendo code that runs when the grid is rendered shows "command.click" is defined simply as a string and not a function ...

function attachCustomCommandEvent(context, container, commands) {

        var idx,

            length,

            command,

            commandName;

 

        commands = !isArray(commands) ? [commands] : commands;

 

        for (idx = 0, length = commands.length; idx < length; idx++) {

            command = commands[idx];

 

            if (isPlainObject(command) && command.click) {

                commandName = command.name || command.text;

                container.on("touchend " + CLICK, "a.k-grid-" + (commandName || "").replace(/\s/g, ""), { commandName: commandName }, proxy(command.click, context));

            }

        }

    }

I get the same result if I define the function outside of the model.

This is kendo version 2012.3.1114 so I am running the latest as far as I can tell.

[Ram]

hi Darryl,
Did you get the solution for this, I have same problem. if you found the solution, please let me know.
Thanks

[Darryl]

Hi RamiReddy,

Believe I gave up on this one and went back to jQuery initialisation ...

{
    command: [
       { text: "", name: "edit" },
       { text: "", name: "show-details", click: viewModel.showDetails },
       { text: "", name: "show-invoices", click: viewModel.showInvoices },
       { text: "", name: "destroy" }]
}

I would prefer to use declaritive intialistation everywhere but I find when you try to do some things it's just too hard.

[Ram]

Thanks Darryl 

[Jianwei]

I have the same issue, not sure if there is any update on this issue.

[Rosen]

Hello Jianwei,

We have already provided you with an answer to your question in the other thread you have open on this matter.

Regards,
Rosen
Telerik