如何為劍道網格列設置自定義模板

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如下，

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>';
    }
}

但是當我調試時，我看到了 model 值的以下值。

我也遵循了這個示例代碼。 在這里你可以看到，我也像示例代碼一樣設置了自定義模板。 請幫我解決這個問題。 為什么我無法從comandTemplate訪問 model 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;
        }
}

是否有任何可能的方式從上述模板 function 或任何其他方式訪問數據？

Answer 1

我建議采用不同的方法，因為在渲染和填充網格時無法訪問網格數據。

我的建議是使用兩個動作並根據標志隱藏它（在你的情況下IsActive ）。

像這樣的東西：自定義命令

注意：在visible的 function 中，您可以訪問項目！

編輯：您可以訪問它並在遍歷所有數據的dataBound上更改它。 檢查這個例子：數據綁定

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 }]
  });

可運行 Dojo： https://dojo.telerik.com/@GaloisGirl/eTiyeCiJ