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

В консоли отображается сообщение об ошибке: Uncaught ReferenceError: a не определено. Даже заменить шаблон на:

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>