Kendo UI Сетка, обрабатывающая отсутствующие значения в шаблонах столбцов

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

В этом примере сетка работает хорошо и показывает недостающий «а» значение в первой строке как пустая ячейка.

При работе с шаблоном столбца:

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

Он отображает сообщение об ошибке в консоли: Uncaught 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>