Custom command click binding with MVVM

[Olivier]

Hi,
I'm trying to bind a custom command using MVVM and having no luck yet. I'm binding the function on the model inside the data-columns attribute, but the function does not fire when I click the command button. instead it displays an jquery error "Uncaught TypeError: undefined is not a function", i've tried also removing the quotation marks from the click command property, because in other thread someone says: "The name should not be surrounded by quotation marks." but it does not seems to work either.

please someone help me!. I also reprodced the errero in jsfiddle here

<div id="grid"
    data-role="grid"
    data-columns="[
        {'field':'column','title':'Content'},
        {'command':{'text':'Button','click':'openAlert','name':'button'}}
    ]"
    data-bind="source: gridSource"></div>
<script>
var viewModel = kendo.observable({
    openAlert: function(e){
        alert('it Works!');
    },
    gridSource: new kendo.data.DataSource({
        data:[{column:'Row1'},{column:'Row2'}]
    })
});
kendo.bind($("#grid"), viewModel);
</script>

[Alexander Popov]

Hello Olivier,

This behavior is expected for a couple of reasons:

• The function should not be wrapped in quotes
• Every configuration option that is not inside the "data-bind" attribute is taken from the global scope. 

That being said, you could either define the function in the global scope or use a reference to the observable, as seen in this example.

Regards,
Alexander Popov
Telerik

 

 

[Asif]

This example does not work when the grid is defined in a template (in a view). Is there an example where it is used in a view or template? 

[Alexander Popov]

Hello Asif,

I am not sure I understand your scenario very well. Would you please share more details and if possible - some code snippets that we can examine?

Regards,
Alexander Popov
Telerik