如何为剑道网格列设置自定义模板

Question

我需要根据值设置剑道网格动作按钮图标。我的代码如下，

function InitProductServicesGrid() {
    var prodServiceDataSource = new kendo.data.DataSource({
        transport: {
            type: "json",
            read:
                {
                    url: SERVER_PATH + "/LTSService/ProductsService.asmx/GetProductServiceDetailsList",
                    type: "POST",
                    contentType: 'application/json',
                    data: GetAdditonalData,
                    datatype: "json"
                },
            update:
            {
                url: SERVER_PATH + "/LTSService/ProductsService.asmx/SaveProductService",
                type: "POST",
                contentType: 'application/json',
                datatype: "json"
            }
        },
        schema: {
            data: function (result) {
                return JSON.parse(result.d);
            },
            model: {
                id: "Id",
                fields: {
                    Id: { type: "int" },
                    ServiceTime: { type: "string" },
                    IsActive: { type: "boolean"}
                }
            }
        },
        requestEnd: function (e) {
            if (e.type === "destroy") {
                var grid = $("#productServicesGrid").data("kendoGrid");
                grid.dataSource.read();
            }
        },
        error: function (e) {
            e.preventDefault();
            if (e.xhr !== undefined && e.xhr !== null) {
                var messageBody = e.xhr.responseJSON.Message;
                ShowGritterMessage("Errors", messageBody, false, '../App_Themes/Default/LtsImages/errorMessageIcon_large.png');
                var grid = $("#productServicesGrid").data("kendoGrid");
                grid.cancelChanges();
            }
        },
        pageSize: 20,
    });

    $("#productServicesGrid").kendoGrid({
        dataSource: prodServiceDataSource,
        sortable: true,
        filterable: false,
        pageable: true,
        dataBound: gridDataBound,
        editable: {
            mode: "inline",
            confirmation: false
        },
        columns: [
            { field: "Id", title: "", hidden: true },
            {
                field: "ServiceTime",
                title: "Time Standard",
                sortable: false,
                editor: function (container, options) {
                    var serviceTimeTxtBox = RenderServiceTime();
                    $(serviceTimeTxtBox).appendTo(container);
                },
                headerTemplate: '<a class="k-link" href="#" title="Time Standard">Time Standard</a>'
            },
            {
                title: "Action", command: [
                    {
                        name: "hideRow",
                        click: hideRow,
                        template: comandTemplate
                    }
                ],
                width: "150px"
            }
        ]
    });

}

我写了一个自定义模板函数如下，

function comandTemplate(model) {

    if (model.IsActive == true) {
        return '<a title="Hide" class="k-grid-hideRow k-button"><span class="k-icon k-i-lock"></span></a><a title="Hide"></a>';
    }
    else {
        return '<a title="Show" class="k-grid-hideRow k-button"><span class="k-icon k-i-unlock"></span></a><a title="Show"></a>';
    }
}

但是当我调试时，我看到了模型值的以下值。

我也关注了this sample code。在这里你可以看到，我也像示例代码一样设置了自定义模板。请帮我解决这个问题。为什么我无法从 comandTemplate 函数访问模型 IsActive 值。

更新

点击hideRow动作时，我访问dataItem如下。

function hideRow(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

        if (dataItem.IsActive == true) {
            dataItem.IsActive = false;
        }
        else {
            dataItem.IsActive = true;
        }
}

是否有任何可能的方式从上述模板函数或任何其他方式访问数据？

Answer 1

我会建议一种不同的方法，因为在渲染和填充网格时您无法访问网格数据。

我的建议是使用两个操作并根据标志隐藏它（在您的情况下为 IsActive）。

类似这样的：Custom command

注意：在visible函数中你可以访问项目！

编辑：您可以访问它并在dataBound 上遍历所有数据进行更改。 检查这个例子：Data bound

Answer 2

我没有看到依赖网格命令的优势。您可以自己渲染任何您想要的按钮，并使用 dataBound 事件绑定点击处理程序：

  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      {
        template: function(dataItem) {
            const isActive = dataItem.isActive;
            return `<a title=${isActive ? "Hide": "Show"} class="k-grid-hideRow k-button"><span class="k-icon k-i-${isActive ? 'lock' : 'unlock'}"></span></a>`
        }      
      }
    ],
    dataBound: function(e) {
      e.sender.tbody.find(".k-grid-hideRow").click(evt => {
        const row = evt.target.closest("tr")
        const dataItem = e.sender.dataItem(row)
        dataItem.set("isActive", !dataItem.isActive)
      })            
    },
    dataSource: [{ name: "Jane Doe", isActive: false }, { name: "Jane Doe", isActive: true }]
  });

可运行的道场：https://dojo.telerik.com/@GaloisGirl/eTiyeCiJ