Kendo UI Angular 2 - 行模板？

Question

Grid 的框架中是否存在类似 RowTemplate 的东西？

我需要将 (contextmenu)="onContextMenu($event, dataItem)" 附加到 table 行，以便在右键单击该行时显示上下文菜单。

我还没有找到任何方法来做到这一点。

我已经尝试将上下文直接添加到每个 kendoCellTemplate 并将上下文菜单附加到每一列，但它只是抛出错误。

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

我试过向每个 kendoCellTemplate 添加 div，并向其添加上下文菜单，它起作用了——但这是可以理解的混乱，而且 div 的宽度拒绝填满单元格的 space在右键单击的位置留下巨大的空白。

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

如有任何帮助，我们将不胜感激。

Answer 1

这看起来很旧 post，但我找到了一种方法来做到这一点。与 bootstrap 4 一起使用（但它应该与任何 div 一起使用，它是带有 flex-wrap 的弹性框）。

它不是最漂亮的，但它可以按照您的要求完成工作：

您正常设置网格，然后对于每一列：

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

由于第 class 行将占据全部 space，因此 RC 事件应该按预期进行。

如果您想确保高度不是问题，您需要将 .k-grid td 设置为没有填充，然后将填充 (8px) 添加到行 div否则，行的上下文菜单不会触发的边缘有小间隙。

Kendo UI Angular 2 - 行模板？

Kendo UI Angular 2 - RowTemplate?

kendo-ui

kendo-ui-angular2

angular