如何为剑道网格列设置皮肤模板

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。在这里您可以看到，我还像样例代码一样设置了自定义模板。请帮我解决这个问题。为什么我无法从IsActive函数访问模型comandTemplate值。

Answer 1

根据API documentation，模板应为字符串。由于没有提及函数，因此最好的选择是直接使用template和哈希语法。

这是您可以尝试的（很抱歉，如果有任何错别字，这只是一个未经测试的例子：]

title: "Action",
command: [{
  name: "hideRow",
  click: hideRow,
  template: '<a title="#=IsActive? "Hide" : "Show" #" class="k-grid-hideRow k-button"><span class="k-icon #=IsActive? "k-i-lock" : "k-i-unlock" #"></span></a><a title="Hide"></a>'
}
],