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:  [{title: '#'}, { field: 'id'},{ field: 'name'}],
columnMenu: true,
filterable: true,
groupable: 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>
            <a href="#" data-bind="click: $root.removeItem">x</a>
        </td>   
        <td data-bind="text: id"></td>
        <td>
            <input data-bind="value: $root.items.getItemById('id',id).name" />
        </td>
    </tr>
</script>

<br/>Name#1: <span data-bind="text: items()[0].name"></span>

JavaScript

ko.observableArray.fn.getItemById = function(prop,value) {
   return ko.utils.arrayFirst(this(), function(item) {return item[prop]() === value;})             
}

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(function (row) {
            return row.id() === item.id
        })
    }.bind(this);
};

ko.applyBindings(new ViewModel());