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

Question

我是剑道网格的新手。我有一列名为Status，列的可能值为1,2,3. 如果该值等于 1 或 2，我希望在单元格中显示文本“好”。如果值为 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) #"