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

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

1 Answer 98 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 2
Jacques asked on 30 Apr 2015, 03:52 PM

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


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

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.    #}#   


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? 





1 Answer, 1 is accepted

Sort by
Telerik team
answered on 04 May 2015, 02:03 PM

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:
  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.

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Top achievements
Rank 2
Answers by
Telerik team
Share this question