[Solved] Grid Column using kendo.Template and Binding Element Events in the Template to MVVM viewModel

[Jacques]

Is it possible to bind an anchor element's (<a href...) click event to your MVVM viewModel when the anchor is the product of a grid column's template?

Here's the scenario: We use TypeScript, Kendo and Kendo's MVVM

ViewModel

01.export class ViewModel {
02.
03.    public people: Array<person>;
04.
05.    constructor() {
06.        this.people = new Array<person>();
07.
08.        $.getJSON(url)
09.            .done((result) => {
10.                $.each(result.contacts, (index, value) => {
11.                    this.people.push(new person(value));
12.                });
13.            });
14.
15.    }
16.
17.    onTradeRecordIgnore(dataItem: TradeRecordViewModel): void {
18.        dataItem.IsDeleted = !dataItem.IsDeleted;
19.    }
20.}

 

HTML & Template

01.<div id="tradeGrid"></div>
02.<script id="tradeGridIgnore" type="text/x-kendo-template">
03.    # if (IsDeleted == false) { #
04.        <a href="\#" data-uid="#:uid#" data-command="ignore" class="glyphicon glyphicon-unchecked text-center"></a>
05.    #}
06.    else
07.    {#
08.        <a href="\#" data-uid="#:uid#" data-command="ignore" class="glyphicon glyphicon-check text-center"></a>
09.    #}#
10.</script>

 

Main Questions: 

1. In the kendo-template how do I bind the click event of the anchor tag to the onTradeRecordIgnore function of the viewModel? 
2. Am I right in assuming that the data context, when the template is run, is the dataItem (the record/row)? 
3. If point 2 is correct, how do you access properties in the viewModel that has the people property? ​For example: myViewModel has the property people which I'm using to bind the grid to, but perhaps it could have another property called myViewModel.manager which I want to print in each row using the template approach? How do I access it? #: Name # is part of the dataItem/row but you would need something like #: $parent.manager # to get this right?
4. Considering point 3 above, how do I bind the click event of the anchors in the template? 

 

 

 

 

[Daniel]

Hello,

Straight to your questions:

1. You can use click binding to bind a handler to the element click event.
2. I am not sure if I understand what you mean by "data context". The context in which the handler will be called will be the ViewModel. The corresponding record can be found from the event argument data field.
3. Inside the template, you can use the parent method to render a field from the ViewModel:
   

   #:data.parent().parent().manager#

4. The handler will be bound the same way. The click handler will be called in the context of the ViewModel so you can use this to get the ViewModel fields.

Regards,
Daniel
Telerik