how to use a template inside a kendo mvvm grid column command? - kendo-ui

Question

I have an MVVM Grid binded to the 'LabsViewVM' ViewModel, shown below.
Column commands 'activate', 'suspend', 'abolish' are binded through the 'click' event to the LabsViewVM's transitLab method/handler, which executes just fine.
<div id="labs_view"
data-role="grid"
data-bind="source: labs, visible: isVisible, events: {edit: createLab, dataBound: dataBound, dataBinding: dataBinding}"
data-detail-init="LabsViewVM.detailInit"
data-detail-template= 'lab_details_template'
data-selectable="row"
data-scrollable= "true"
data-resizable= "true"
data-sortable= "{'allowUnsort': false}"
data-pageable="{ 'pageSizes': [5, 10, 15, 20, 25, 30, 50],
'messages': { 'display': '{0}-{1} από {2} Διατάξεις Η/Υ',
'empty': 'Δεν βρέθηκαν Διατάξεις Η/Υ',
'itemsPerPage': 'Διατάξεις Η/Υ ανά σελίδα',
'first': 'μετάβαση στην πρώτη σελίδα',
'previous': 'μετάβαση στην προηγούμενη σελίδα',
'next': 'μετάβαση στην επόμενη σελίδα',
'last': 'μετάβαση στην τελευταία σελίδα' }}"
data-editable="{ 'mode' : 'popup', 'template': $('#lab_create_template').html()}"
data-toolbar="[{ 'template' : $('#lab_toolbar_template_labs_view').html() }]"
data-columns="[{ 'field': 'lab_id', 'title':'Κωδικός Διάταξης Η/Υ', 'width':'65px', 'hidden' : true},
{ 'field': 'lab_name', 'title':'Ονομασία', 'width':'440px'},
{ 'field': 'lab_type', 'title':'Τύπος', 'width':'150px', 'hidden' : true},
{ 'field': 'lab_state', 'title':'Λειτουργική Κατάσταση', 'width':'150px'},
{ 'field': 'rating', 'title':'Αξιολόγηση', 'template' : $('#labs_view_rating_column_template').html(), 'width':'85px'},
{ 'field': 'positioning', 'title':'Τοποθεσία', 'width':'180px', 'hidden' : true},
{ 'field': 'lab_special_name', 'title':'Ειδική Ονομασία', 'width':'180px', 'hidden' : true},
{ 'field': 'creation_date', 'title':'Ημερομηνία Δημιουργίας', 'width':'150px', 'hidden' : true},
{ 'field': 'last_updated', 'title':'Τελευταία Ενημέρωση', 'width':'150px'},
{ 'field': 'created_by', 'title':'Δημιουργία από', 'width':'130px', 'hidden' : true},
{ 'command': [{'text':'Ενεργοποίηση', 'click':LabsViewVM.transitLab, 'name':'activate'},
{'text':'Αναστολή', 'click':LabsViewVM.transitLab, 'name':'suspend', },
{'text':'Κατάργηση', 'click':LabsViewVM.transitLab, 'name':'abolish'}],
'title': 'Ενέργειες', 'width':'500px', 'hidden': LabsViewVM.hideLabTransitColumn() }
]">
</div>
var LabsViewVM = kendo.observable({
transitLab: function(e){
e.preventDefault();
var parent_grid = $(e.delegateTarget).data("kendoGrid");
var transition_dialog = $("#transition_dialog").kendoWindow({
modal: true,
visible: false,
resizable: false,
width: 500,
pinned:true,
open: function(){lots of code...}
}).data("kendoWindow");
var transitTemplate = kendo.template($("#lab_transit_template").html());
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
transition_dialog.content(transitTemplate(dataItem));
transition_dialog.center().open();
}
});
I'm quoting from https://www.packtpub.com/books/content/kendo-mvvm-framework, some information for the click property just to stress the way kendo differentiates its click event from the traditional one.
"The click property binds the click event of a button to a function inside of the View-Model. It is a shortcut to the events binding that we will see later. Unlike a traditional click event wire-up, the Kendo UI framework will pass context data to the event handler to allow for a richer event-handling experience. For example, when a click event is bound within a row template, the event argument passed to the event handler will have access to the item from the source collection. This allows the event handler to operate against that Model data directly without any further DOM exploration and keeps all of the observable functionality in place."
Having that in mind, I was able to access the parent grid, inside transitLab, through the event parameter 'e'.
I then had to change my implementation and use a kendo template for the column commands, because I needed to add some logic to the appearance of the command buttons.
So i replaced
{ 'command': [{'text':'Ενεργοποίηση', 'click':LabsViewVM.transitLab, 'name':'activate'},
{'text':'Αναστολή', 'click':LabsViewVM.transitLab, 'name':'suspend', },
{'text':'Κατάργηση', 'click':LabsViewVM.transitLab, 'name':'abolish'}],
'title': 'Ενέργειες', 'width':'500px', 'hidden': LabsViewVM.hideLabTransitColumn() }
with
{ 'command': [{'name':'commands', 'template': $('#labs_grid_command_column_template').html()}], 'title': 'Ενέργειες', 'width':'270px' }
and template :
<script id="labs_grid_command_column_template" type="text/x-kendo-template">
#if( some condition ){#
<a class="k-button k-button-icontext k-grid-activate" href="\#" data-bind="click: transitLab"><i class="fa fa-check"></i> Ενεργοποίηση </a>
<a class="k-button k-button-icontext k-grid-suspend" href="\#" data-bind="click: transitLab"><i class="fa fa-clock-o"></i> Αναστολή </a>
<a class="k-button k-button-icontext k-grid-abolish" href="\#" data-bind="click: transitLab"><i class="fa fa-ban"></i> Κατάργηση </a>
#}#
</script>
but it doesn't work.
My code crashes inside transitLab handler, because its event
parameter 'e' does not get populated with the same context data as before.
For example e.delegateTarget in the first case points to the grid, whereas in the second case points to the command button itself.
I don't get it. Shouldn't these two implementations have the same effect?? Please help!