This is a migrated thread and some comments may be shown as answers.
Custom command MVVM binding
8 Answers 298 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Dennis
Top achievements
Rank 1
Dennis asked on 22 Aug 2012, 11:34 AM
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();
           }
 
      
        });

8 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 27 Aug 2012, 07:19 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dennis
Top achievements
Rank 1
answered on 27 Aug 2012, 11:21 AM
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.
0
Darryl
Top achievements
Rank 1
answered on 19 Nov 2012, 04:07 AM
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.

0
Ram
Top achievements
Rank 1
answered on 10 May 2013, 04:50 PM
hi Darryl,
Did you get the solution for this, I have same problem. if you found the solution, please let me know.
Thanks
0
Darryl
Top achievements
Rank 1
answered on 12 May 2013, 11:11 PM
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.
0
Ram
Top achievements
Rank 1
answered on 17 May 2013, 04:20 PM
Thanks Darryl 
0
Jianwei
Top achievements
Rank 1
answered on 12 Jan 2015, 10:38 PM
I have the same issue, not sure if there is any update on this issue.
0
Rosen
Telerik team
answered on 14 Jan 2015, 03:11 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Dennis
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Dennis
Top achievements
Rank 1
Darryl
Top achievements
Rank 1
Ram
Top achievements
Rank 1
Jianwei
Top achievements
Rank 1
Share this question
or