Custom command MVVM binding

Thread is closed for posting
9 posts, 0 answers
  1. Dennis
    Dennis avatar
    30 posts
    Member since:
    Aug 2012

    Posted 22 Aug 2012 Link to this post

    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();
               }
     
          
            });

  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 27 Aug 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Dennis
    Dennis avatar
    30 posts
    Member since:
    Aug 2012

    Posted 27 Aug 2012 Link to this post

    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.
  5. Darryl
    Darryl avatar
    23 posts
    Member since:
    May 2005

    Posted 18 Nov 2012 Link to this post

    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.

  6. Ram
    Ram avatar
    3 posts
    Member since:
    Apr 2013

    Posted 10 May 2013 Link to this post

    hi Darryl,
    Did you get the solution for this, I have same problem. if you found the solution, please let me know.
    Thanks
  7. Darryl
    Darryl avatar
    23 posts
    Member since:
    May 2005

    Posted 12 May 2013 Link to this post

    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.
  8. Ram
    Ram avatar
    3 posts
    Member since:
    Apr 2013

    Posted 17 May 2013 Link to this post

    Thanks Darryl 
  9. Jianwei
    Jianwei avatar
    20 posts
    Member since:
    Feb 2011

    Posted 12 Jan 2015 Link to this post

    I have the same issue, not sure if there is any update on this issue.
  10. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 14 Jan 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready