kendo-grid - Kendo Grid - 根据列单元格数据值呈现自定义 HTML

Question

我是剑道网格的新手。我有一个名为 Status 的列，这些列的可能值为 1,2,3。如果该值等于 1 或 2，我希望在单元格中显示文本“Good”。如果值为 3，我希望在单元格中显示按钮“应用”按钮。用户可以单击按钮触发弹出窗口并在那里执行操作。

我以前使用 ag-grid，我知道我可以在 cellRenderer:(params)=>{...} 中执行此操作以根据此单元格的值显示不同的文本。然后，如果值为 3，则在 onCellClicked:(params)=>{...} 中触发弹出窗口。

我怎样才能在剑道网格中做同样的事情？

Answer 1

如果您使用的是 Kendo ASP.NET，请为列状态添加一个 ClientTemplate:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
          columns.Bound("Status").ClientTemplate("#if(Status == 1 || Status == 2 ){# Good #}else{# <input type=button value=apply onclick=CallAnyJSFunction() /> #}#");

        ...

如果您使用的是 Kendo UI JS，

<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "Status",
    template: "#if(Status == 1 || Status == 2 ){# Good #}else{# <input type=button value=apply onclick=CallAnyJSFunction() /> #}#"
  }],
  ...
});
</script>

此外，您可以将逻辑包装在一个 javascript 函数中，然后像这样从模板中调用它。

function setStatus(status) {
        switch (status) {
            case 1:
                return "Good";
                break;
            case 2:
                return "Good";
                break;
            case 3:
                return "<input type=button value=apply onclick=CallAnyJSFunction() />";
                break;
        }
    }

---

columns.Bound("Status").ClientTemplate("#= setStatus(Status) #"); 

或

template: "#= setStatus(Status) #"