Kendo Grid and knockoutjs row template filtering

http://stackoverflow.com/questions/21386545/using-kendo-grid-with-knockoutjs-row-template-make-filtering-impossible

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.0.0.debug.js"></script>
<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.common.min.css">
<link rel="stylesheet" href="http://rniemeyer.github.io/knockout-kendo/css/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.io/knockout-kendo/js/knockout-kendo.min.js"></script>
<div data-bind="kendoGrid: { 
data: items.asJS,
dataSource: {
    schema: {
      model: {
        id: 'id',
        fields: {
            'id': { type: 'number' },
            'name': { type: 'string' }
        }
      }
    }
  },
columns:  [ { field: 'id'},{ field: 'name'}],
columnMenu: true,
filterable: true,
rowTemplate: 'rowTmpl', useKOTemplates: true }"> </div>
<button data-bind="click: function() { items()[0].name('apples'); }">Apple -> Apples</button>

<script id="rowTmpl" type="text/html">
    <tr>
        <td data-bind="text: id"></td>
        <td>
            <input data-bind="value: name" />
        </td>
    </tr>
</script>

JavaScript

var ViewModel = function() {
    this.items = ko.observableArray([
        { id:  ko.observable("1"), name: ko.observable("apple")},
        { id: ko.observable("2"), name: ko.observable("orange")},
        { id: ko.observable("3"), name: ko.observable("banana")}
    ]);
    this.items.asJS = ko.computed(function() {
        return ko.toJS(this.items());
    }, this);
    
    this.removeItem = function(item) {
        this.items.remove(item);
    }.bind(this);
};

ko.applyBindings(new ViewModel());