Issues in Custom command MVVM binding

[Jianwei]

I have a similar issue as the one posted here: http://www.telerik.com/forums/custom-command-mvvm-binding

I tried to bind on click function to the grid with MVVM approach. However, it will complain the openAction is not property defined.

Any recommendation on how to do this properly?

<div id="evaluationlists"
         data-role="grid"
         date-scrollable="true"
         data-editable="false"
         data-columns="[
                {field:'DisplayId', title:'Id'},
                {field:'Name', title: 'Name'},
{field:'Evaluatee', title:'Evaluating'},
                {field:'ParentName', title: 'Curricular Entity'},
{field:'DateRange', title: 'Open'},
{command:{ text: 'Open Action', click: openAction, name:'openAction' } }
             ]"
         data-bind="source: evaluations, visible:isVisible">
    </div>

Then I also define my view model as the following:

var vm = kendo.observable({
           isVisible: true,
           openAction:function(e) {
               window.console && console.log(e);
           },
           evaluations: new kendo.data.DataSource({
               schema: {
                   data: "Data",
                   model: {
                       id: "Id"
                   }
               },
               transport: {
                   read: {
                       url: "@Url.Action(Model.ActionMethod, "Home")",
                       type: "get",
                       contentType: "application/json"
                   }
               }
           })
       });
       kendo.bind($('#evaluationlists'), vm);

 

[Alexander Valchev]

Hi Jianwei,

In your current configuration, the click event handler cannot be part of the ViewModel (or at least cannot be accessed directly. You may use the following approach instead:

{command:{ text: 'Open Action', click: vm.openAction, name:'openAction' } }

Regards,
Alexander Valchev
Telerik

 

 

[IT]

Sorry but this does not solve the issue. I have been trying to do the same thing and can't get this to work. Keep telling me the function is not defined. The only way to get it to work is to put the function in the global scope which is not possible in my case.

Is there a way to use custom command column in a grid with MVVM scenario? 

Thank you,

[Alexander Valchev]

Hello,

Could you please provide a small Kendo Dojo test page that demonstrates your current implementation so I can examine it and assist you further?

Regards,
Alexander Valchev
Telerik

 

 

[IT]

Here's a test page:

http://dojo.telerik.com/oVANo

If I uncomment the global function, it is working fine. But with MVVM, it won't work. In my case, I need to use it via MVVM. 

[Alexander Valchev]

Hello,

As stated before the click event handler should be accessible from the global scope. In your case you should make the ViewModel available in the global scope.

• http://dojo.telerik.com/@valchev/ijaYo

In case you do not want to make the ViewModel global, nor the click event handler, you may define the custom command as template and use data-bind="click: ..." to attach the event handler.

Regards,
Alexander Valchev
Telerik

 

 

[Peter]

I had a similar problem and found, to great disappointment, that the click event must be specified in quotes

 { command: { text: 'Add', click: actions.addSelectedUser, name: 'addUser' }, width: 80 },

Error: actions is not defined

 { command: { text: 'Add', click: 'actions.addSelectedUser', name: 'addUser' }, width: 80 },

No error.

 

Difficult to discover errors like this cost me quite a lot of time with Kendo.

[Peter]

To make my error worse, although there is no error on initialization, once I corrected the method to use quotes.

When I click the button bound, there's another error:

 

TypeError: ((jQuery.event.special[handleObj.origType] || (intermediate value)).handle || handleObj.handler).apply is not a function

[Alexander Valchev]

Hi Peter,

The click event handler should not be encapsulated in quotation marks. Most probably you receive an error because the specified event handler is not accessible from the global scope.

Please check the example from my previous post. It does not use quotation marks.

Regards,
Alexander Valchev
Telerik

 

 

[Peter]

Thanks, my methods are accessible via the observable model bound - in this way

  template = _this.root.append($($('#add-template').html()));

        $adWindow = template.find('#add-window');
        return _this.adModel = kendo.observable({
          adDatasource: datasource
          searchText: '',
          actions: actions()
        });

Where actions is a method, something like this.

 actions: function() {
    addUser: function() { console.debug('test') };
    }

}

Ignore any syntax errors, as I've simplified it down and de-coffified it...

I've used such binding many times in Kendo, is it specifically different with grids or the command toolbar?

[Petyo]

Hello,

I am afraid that the problem you describe is a bit unclear. The invalid code do not help much, too. May you please isolate the problem you face in a Dojo?

Regards,
Petyo
Telerik

 

 

[Peter]

I don't have time for that I'm afraid.

Can you not have any idea how my code, set up correctly, would get an error like thi "jquery.js:4435 Uncaught TypeError: ((jQuery.event.special[handleObj.origType] || (intermediate value)).handle || handleObj.handler).apply is not a function"

On running your code?

[Petyo]

Hi,

I am afraid that we can't guess what goes on in your setup based on an error which we can't reproduce. 

Regards,
Petyo
Telerik

 

 

[Peter]

Fair enough. But I don't understand why errors are so badly covered in Kendo.

Any time a configuration or textual property is wrong in binding, we get bizarre, meaningless errors until we can guess how to fix it.

I don't understand why you don't catch errors and exceptions in code and use the knowledge at that point in the code, to give the user meaningful feedback.

[Petyo]

Hello,

This is a valid feedback - and we strive to do that, where possible. However, JavaScript is a dynamic language, so it is quite hard for us to foresee and anticipate all the problematic cases that may occur. 

Regards,
Petyo
Telerik

 

 

[Stian]

I'm using typescript. How would declare the VM as global. var/let in the entry ts file will not make the VM gobal.

[Alex Hajigeorgieva]

Hi Stian,

I think that this post on Stack Overflow that I found on the internet will help you:

http://stackoverflow.com/questions/13252225/call-a-global-variable-inside-typescript-module/13252853#13252853

Regards,
Alex Hajigeorgieva
Telerik by Progress

[Stian]

Thank you Alex. I will certainly try that :)