KendoGrid - проблема с фильтрацией таблиц и разбиением на страницы

Question

Я пытаюсь создать сетку с таблицей HTML. Я добавляю строки и создаю текстовые поля в свойстве DOM CELLS в KendoGrid. Однако, когда я фильтрую данные, фильтрация и разбиение на страницы не работают в таблице KendoGrid. Сетка восстанавливается, и клетки исчезают. Может ли кто-нибудь помочь мне?

<table id="dataTable" width="500px" border="double">
  <thead>
    <tr style="height:8px">
      <th data-field="name">Name</th>
      <th data-field="age">Age</th>
      <th data-field="num">Num</th>
    </tr>
</table>

$(document).ready(function() {
  var grid = $("#dataTable").kendoGrid({
    toolbar: [{
        template: "<input type='button' class='k-button' value='AddData' onclick='addRow()'/>"
      }
      /* {name: "addrow", text: " Add Row "} */
    ],
    columns: [{
      field: 'name'
    }, {
      field: 'age'
    }, {
      field: 'num'
    }],
    pageable: {
      messages: {
        empty: "No items to display"
      },
      input: true,
      refresh: true,
      pageSizes: true,
      pageSizes: [10, 20, 30, 50]
    },
    scrollable: true,
    sortable: true,
    selectable: "row",
    filterable: true,
    dataSource: {
      pageSize: 10
    }
  }).data("kendoGrid");

  grid.dataSource.pageSize(10);
});

function addRow() {
  var table;
  var tableID;
  table = document.getElementById("dataTable");
  tableID = 'dataTable';

  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var cell1 = row.insertCell(0);
  var element1 = document.createElement("textarea");
  element1.cols = "85";
  cell1.appendChild(element1);

  var cell2 = row.insertCell(1);
  var element2 = document.createElement("textarea");
  element2.cols = "85";
  cell2.appendChild(element2);

  var cell3 = row.insertCell(2);
}