Kendo UI Angular 2 - RowTemplate?

Does anything like a RowTemplate exist in the framework for the Grid?

I need to attach (contextmenu)="onContextMenu($event, dataItem)" to the table rows in order for the context menu to show up when right clicking the row.

I haven't found any way to be able to do this.

I've tried adding the context directly to each kendoCellTemplate and attach the context menu to every column, but it just throws errors.

<kendo-grid-column field = "poNum">
    <template kendoCellTemplate let-dataItem (contextmenu)="onContextMenu($event, dataItem)">
        {{ dataItem.poNum }}
    </template>
</kendo-grid-column>

I've tried adding divs to each kendoCellTemplate instead and add the contextmenu to that, and it works - but that is understandably messy, and the width of the divs refuse to full the space of the cell leaving huge gaps in where the right click will work.

<kendo-grid-column field = "poNum">
    <template kendoCellTemplate let-dataItem>
        <div (contextmenu)="onContextMenu($event, dataItem)">
            {{ dataItem.poNum }}
        </div>
    </template>
</kendo-grid-column>

Any help would be appreciated.

Solution

This looks to be an old post, but I have found a way to do this. In conjunction with bootstrap 4 (but it should work with any div that is a flex box with flex-wrap).

It is not the prettiest, but it gets the job done to your specifications:

You set the grid normally, then for each column:

<kendo-grid-column title="Option">
    <template kendoGridCellTemplate let-dataItem>
        <div class="row no-margin" (contextmenu)="onRightClick($event, dataItem)">
            {{dataItem.Name}}
        </div>
    </template>
</kendo-grid-column>

Since the row class will take up the full space the RC event should work as expected.

If you want to make sure that height is not an issue, you need to set the .k-grid td to have no padding and then add the padding (8px) to the row div otherwise there are small gaps on the edges where the row's context menu will not fire.