0

I'm working on an Angular app using the Kendo grid control. How do I bind to properties of the current element?

For example, I have a list of users. I can list them out pretty simply with this code:

<kendo-grid [data]="Users" style="height: 100%">
  <kendo-grid-column title="Email" field="Email"></kendo-grid-column>
  <kendo-grid-column title="Username" field="Username"></kendo-grid-column>
  <kendo-grid-column title="Permissions" field="Permissions"></kendo-grid-column>
</kendo-grid>

However, I also want to add button columns to do things like edit and delete the user. There are also places I'm using this that I would like to have a button column that routes to a detail page for that object. In that case I would need the id of the object to add to the route, however I don't see a way to get the object. I want to do something like this:

<kendo-grid-column>
  <ng-template kendoGridCellTemplate>
    <button routerLink="/knprojects/{{project.id}}">View Notes</button>
  </ng-template>
</kendo-grid-column>

The problem is that I don't have a 'project' object because there is not an *ngFor iterating items...

Sorry if it's a simple question but this is the first time I'm using their grid and first real Angular app so trying to figure it out.

sfaust
  • 2,089
  • 28
  • 54

1 Answers1

0

Nevermind I got it. I actually found it in the tree view documentation, I don't see it in the grid documentation but it seems to work. If you use 'let-project' in the template definition then 'project' is the object. So in my example it should be:

<kendo-grid-column>
  <ng-template kendoGridCellTemplate let-project>
    <button routerLink="/knprojects/{{project.id}}">View Notes</button>
  </ng-template>
</kendo-grid-column>
sfaust
  • 2,089
  • 28
  • 54
  • 1
    After using the Kendo library for Angular I've noticed you really have to read between the lines on some of their examples. +1 for figuring it out. I elaborated on a similar type question here that may help you down the line: https://stackoverflow.com/questions/52359303/get-dataitem-from-kendo-grid-with-custom-button-in-angular/52359623#52359623 – Rod Mar 08 '19 at 04:27