2013-10-17 41 views
1

代碼來創建網格:爲什麼Kendo UI網格中的列菜單會導致錯誤?

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/

回答

2

這是kendoColumnMenu一個缺陷(影響版本到2013.2.1002)導致的錯誤在下列條件下:

  1. Array.prototype改變爲具有附加的方法,例如「包含」
  2. 網格選項包含columnMenu:真

私人VAR「模板」,在kendoColumnMenu需要改變:在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>'; 

目前解決這個問題的唯一方法是編輯劍道UI的源代碼kendoC olumnMenu。

相關問題