javascript - 为什么 Kendo UI 网格中的列菜单会导致错误？

Question

创建网格的代码：

var grid = $("#grid").kendoGrid({
    dataSource: [],
    columnMenu: true,
    scrollable: true,
    sortable: false,
    filterable: true,
    groupable: true,
    columns: [{
        field: "Id",
        title: "Id",
        filterable: false
    }, {
        field: "title",
        title: "Title"
    }]
}).data("kendoGrid");

我也以这种方式自定义了 Array 的原型：

Function.prototype.method = function (name, func) {
    "use strict";

    if (!this.prototype[name]) {
        this.prototype[name] = func;
        return this;
    }
};

Array.method('contains', function (object) {
    return $.inArray(object, this) !== -1;
});

结果：每当我尝试打开任何列的列菜单时，我都会得到：

Uncaught TypeError: Cannot call method 'replace' of undefined

请参阅http://jsfiddle.net/lhoeppner/sNdVR/上的错误演示

Answer 1

这是 kendoColumnMenu 中的一个缺陷（影响到 2013.2.1002 的版本），在以下情况下会导致错误：

1. Array.prototype 更改为具有其他方法，例如“包含”
2. 网格选项包含 columnMenu: true

kendoColumnMenu 中的私有 var "template" 需要更改：在 for 循环中，添加对 hasOwnProperty 的检查，格式如下：

'#if (columns.hasOwnProperty(col)) {#' +

完整的模板将是：

var template = '<ul>' +
'#if(sortable){#' +
'<li class="k-item k-sort-asc"><span class="k-link"><span class="k-sprite k-i-sort-asc"></span>${messages.sortAscending}</span></li>' +
'<li class="k-item k-sort-desc"><span class="k-link"><span class="k-sprite k-i-sort-desc"></span>${messages.sortDescending}</span></li>' +
'#if(showColumns || filterable){#' +
'<li class="k-separator"></li>' +
'#}#' +
'#}#' +
'#if(showColumns){#' +
'<li class="k-item k-columns-item"><span class="k-link"><span class="k-sprite k-i-columns"></span>${messages.columns}</span><ul>' +
'#for (var col in columns) {#' +
'#if (columns.hasOwnProperty(col)) {#' +
'<li><input type="checkbox" data-#=ns#field="#=columns[col].field.replace(/\"/g,"&\\#34;")#" data-#=ns#index="#=columns[col].index#"/>#=columns[col].title#</li>' +
'#}#' +
'#}#' +
'</ul></li>' +
'#if(filterable){#' +
'<li class="k-separator"></li>' +
'#}#' +
'#}#' +
'#if(filterable){#' +
'<li class="k-item k-filter-item"><span class="k-link"><span class="k-sprite k-filter"></span>${messages.filter}</span><ul>' +
'<li><div class="k-filterable"></div></li>' +
'</ul></li>' +
'#}#' +
'</ul>'; 

目前解决此问题的唯一方法是编辑 kendo 用户界面的 kendoColumnMenu 源代码。