Trigger event when row is selected in a Kendo UI Grid (Angular 2)

Question

In Kendo UI (beta) for Angular 2, how does one trigger an event when a specific row is selected? There are no directives or components for the rows themselves; therefore, a (click)="triggeredFunction()" can't work if there is no row element.

Here is my grid:

<kendo-grid [data]="gridData" [selectable]="true">

  <kendo-grid-column field="ProductName">
    <template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
     {{column.field}}({{columnIndex}})
    </template>
  </kendo-grid-column>     

  <kendo-grid-column field="ProductName">
    <template kendoCellTemplate let-dataItem>
      <kendo-dropdownlist [data]="listItems"></kendo-dropdownlist>
    </template>
  </kendo-grid-column>

</kendo-grid>

Here is my component:

@Component({
 selector: "ultron",
 styleUrls: [String("./ultron.component.less")],
 templateUrl: "./ultron.component.html",
 })
 export class UltronComponent {

   private gridData: any[] = [{
      "ProductID": 1,
      "ProductName": "Chai",
      "UnitPrice": 18.0000,
      "Discontinued": true,
    }, {
      "ProductID": 2,
      "ProductName": "Chang",
      "UnitPrice": 19.0000,
      "Discontinued": false,
    }
  }];

  private listItems: Array<string> = ["@", "$", "#", "%"];

  public triggeredFunction(){ ... }

}

Answer 1

The option that you need to set is selectable and the valid values are true and false as currently only single row selection is supported. So your grid should look like this

<kendo-grid
      [data]="gridView"
      [selectable]="true"
    >
  </kendo-grid>

For the event you need to attach a (selectionChange) event handler. Here is a plunkr