Question

Grid的框架中是否存在类似RowTemplate的内容？

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

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

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

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

我已经尝试将div添加到每个kendoCellTemplate并添加上下文菜单，并且它可以工作 - 但这是可以理解的混乱，并且div的宽度拒绝填充单元格的空间留下巨大的空白右键单击将起作用。

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

任何帮助都将不胜感激。

Answer 1

这看起来是一个老帖子，但我找到了一种方法来做到这一点。与bootstrap 4一起使用（但它应该适用于任何带有flex-wrap的flex盒的div）。

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

您可以正常设置网格，然后为每列设置：

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

由于行类将占用整个空间，因此RC事件应按预期工作。

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

Kendo UI Angular 2 - RowTemplate？

1 个答案: