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

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

i have mvvm grid binded 'labsviewvm' viewmodel, shown below. column commands 'activate', 'suspend', 'abolish' binded through 'click' event labsviewvm's transitlab method/handler, executes 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 https://www.packtpub.com/books/content/kendo-mvvm-framework, info click property stress way kendo differentiates click event traditional one.

"the click property binds click event of button function within of view-model. shortcut events binding see later. unlike traditional click event wire-up, the kendo ui framework pass context info event handler allow richer event-handling experience. example, when click event bound within row template, event argument passed event handler have access item source collection. allows event handler operate against model info straight without farther dom exploration , keeps of observable functionality in place."

having in mind, able access parent grid, within transitlab, through event parameter 'e'.

i had alter implementation , utilize kendo template column commands, because needed add together logic appearance of command buttons.

so 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( status ){# <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 doesn't work.

my code crashes within transitlab handler, because event parameter 'e' does not populated same context info before. illustration e.delegatetarget in first case points grid, whereas in sec case points command button itself.

i don't it. shouldn't these 2 implementations have same effect?? please help!

kendo-ui kendo-grid kendo-mvvm kendo-template