如何为Angular的Kendo网格创建动态单元格(How to create dynamic cells for Kendo grid for Angular)

如何为Angular的Kendo网格创建动态单元格(How to create dynamic cells for Kendo grid for Angular)

我有一个Kendo网格，我需要根据数据在一列中使用不同的输入控件。 我有三种情况：

如果该值为true ，则复选框应该在编辑时出现。 如果该值是一个string或number ，则应该编辑文本框 如果值是更多，超链接应该来编辑。

请看上面的截图。

I have a Kendo grid in which I need different input controls in a single column depending on data. I have three scenarios:

If the value is true, checkbox should come on edit. If the value is a string or number, textbox should come on edit If the value is More, hyperlink should come on edit.

Please see the screenshot above.

最满意答案

在您定义列的模板中，您可以为自己的单元格使用自定义模板。 在这里你可以写一些条件来决定渲染的内容：

<kendo-grid-column field="example" title="Example" width="100"> <ng-template kendoGridCellTemplate let-dataItem> <!-- You can use ngIf and/or ngSwitch here. --> </ng-template> </kendo-grid-column>

API： https ： //www.telerik.com/kendo-angular-ui/components/grid/api/CellTemplateDirective/

In your template, where you define your columns, you can use a custom template for your cells. In this you can write some conditions to decide what to render:

<kendo-grid-column field="example" title="Example" width="100"> <ng-template kendoGridCellTemplate let-dataItem> <!-- You can use ngIf and/or ngSwitch here. --> </ng-template> </kendo-grid-column>

API: https://www.telerik.com/kendo-angular-ui/components/grid/api/CellTemplateDirective/