This is a migrated thread and some comments may be shown as answers.

Issues in Custom command MVVM binding

17 Answers 298 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jianwei
Top achievements
Rank 1
Jianwei asked on 12 Jan 2015, 10:43 PM
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);


 

17 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 14 Jan 2015, 02:28 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
IT
Top achievements
Rank 1
answered on 09 Feb 2015, 11:41 PM
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,
0
Alexander Valchev
Telerik team
answered on 11 Feb 2015, 02:16 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
IT
Top achievements
Rank 1
answered on 11 Feb 2015, 03:38 PM
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. 
0
Alexander Valchev
Telerik team
answered on 13 Feb 2015, 11:56 AM
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.
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Peter
Top achievements
Rank 1
answered on 08 Apr 2016, 07:12 AM

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.

0
Peter
Top achievements
Rank 1
answered on 08 Apr 2016, 07:19 AM

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

0
Alexander Valchev
Telerik team
answered on 12 Apr 2016, 07:37 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Peter
Top achievements
Rank 1
answered on 13 Apr 2016, 11:34 PM

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?

0
Petyo
Telerik team
answered on 18 Apr 2016, 10:53 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Peter
Top achievements
Rank 1
answered on 27 May 2016, 12:50 AM

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?

0
Petyo
Telerik team
answered on 27 May 2016, 07:24 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Peter
Top achievements
Rank 1
answered on 30 May 2016, 12:02 AM

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.

0
Petyo
Telerik team
answered on 31 May 2016, 12:25 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Stian
Top achievements
Rank 1
answered on 05 May 2017, 09:21 PM
I'm using typescript. How would declare the VM as global. var/let in the entry ts file will not make the VM gobal.
0
Alex Hajigeorgieva
Telerik team
answered on 09 May 2017, 04:38 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Stian
Top achievements
Rank 1
answered on 09 May 2017, 05:24 PM
Thank you Alex. I will certainly try that :)
Tags
Grid
Asked by
Jianwei
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
IT
Top achievements
Rank 1
Peter
Top achievements
Rank 1
Petyo
Telerik team
Stian
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or