Kendo UI Grid處理列模板中的缺失值

Question

我使用Kendo UI Grid來顯示具有缺少某些字段的對象的數組數據。這裏是js代碼：

var arr = [{b: "b1"}, {a: "a2", b: "b2"}]; 

$("#grid").kendoGrid({ 
    dataSource: arr, 
    columns: [ 
     { 
      title: "The A column", 
      field: 'a' 
     }, { 
      title: "The B column", 
      template: '<i>#=b#</i>' 
     }] 
}); 

在這個例子中，網格效果很好，並在第一行顯示缺少的「a」值作爲空單元格。

當與柱模板工作：

$("#grid").kendoGrid({ 
    dataSource: arr, 
    columns: [ 
     { 
      title: "The A column", 
      template: '<b>#=a#</b>' 
     }, { 
      title: "The B column", 
      template: '<i>#=b#</i>' 
     }] 
}); 

它顯示在控制檯一個錯誤：沒有定義：未捕獲的ReferenceError。 即使更換模板：

template: '<b>#=a || ""#</b>' 

表達，而不是沒有幫助，所以我必須構建表之前，需要手動設置爲空字符串的缺失值。有沒有辦法避免這種情況？

Answer 1

相反的：

template: '<b>#=a || ""#</b>' 

你應該使用：

template: '<b>#=data.a || ""#</b>' 

凡data由KendoUI預定義的，等於行數據。否則，JavaScript不知道a應該是data的一部分，並認爲它是一個拋出錯誤的變量。

你可以看到它運行在下面的代碼片段

$(document).ready(function() { 
 
    var arr = [{b: "b1"}, {a: "a2", b: "b2"}]; 
 

 
    $("#grid").kendoGrid({ 
 
    dataSource: arr, 
 
    columns: [ 
 
     { 
 
     title: "The A column", 
 
     template: '<b>#= data.a || ""#</b>' 
 
     }, { 
 
     title: "The B column", 
 
     template: '<i>#=b#</i>' 
 
     }] 
 
    }); 
 
});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css"> 
 
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css"> 
 

 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script> 
 

 
<div id="grid"></div>